Wayin Support

Understanding: Experience web embed code

This article will cover what the embed code is and the two code options you have available when integrating your experience into your website.

Fixed vs Responsive

After selecting a destination website channel you will be asked if you would like the <iframe> to be responsive or fixed. When fixed size is selected the dimensions of the <iframe> will not change no matter what content is presented within.

If you select responsive then the <iframe> will automatically resize to accommodate the content, however with the advanced code it will only resize the height of the <iframe>.

Where is the embed code located?

  1. Under Publishing, click get embed code link for your published destination.
  2. The code will be presented under embed code.

Where is the advanced embed code located?

  1. Under Publishing, click get embed code link for your published destination.
  2. In the top right corner, click on the advanced tab.
  3. The code will be presented under advanced embed code.

Standard Embed code

This is the recommended option, it presents a concise single line of code to place inside your website.

When you select responsive it will be in the following format:

<script src="https://xd.wayin.com/embed/xxxxx?mode=responsive"></script>

You'll notice that mode is set to responsive in the parameters. The xxxxx value represents a unique identifier for the container showing the campaign.

When you select fixed size it will be in the following format:

<script src="https://xd.wayin.com/embed/xxxxx?mode=fixed&width=500&height=500"></script>

You'll see that width and height are 500px in this example, the values that you have will be dependant on what you defined during the publishing wizard. Mode is set to fixed. The xxxxx value represents a unique identifier for the container showing the campaign.

Advanced Embed code

Regardless of specifying responsive or fixed size the advanced embed code will operate as follows:

  • Width will be set to the value specified and not resized
  • Height will start at the size specified, but will resize to fit the content as required.

Advanced code will be in the following format:

<script src="https://xd.wayin.com/ui/ngx.embed.min.js"></script>
<iframe src="https://xd.wayin.com/display/container/dc/xxxxx" frameborder="0" scrolling="no" width="500" height="500" id="ngxFrameyyyyy" allowTransparency="true"></iframe>

You'll see this time that we have a <script> reference and an <iframe> reference, both must be included. As before xxxxx represents a unique identifier for the container showing the campaign. Height and width are now attributes of the <iframe>, an id attribute will be generated by the platform starting with the phrase ngxFrame followed by 5 numbers.

Do not change the id value, this will prevent the embed script from interacting with the <iframe>.

What happens if the 'ngx.embed.min.js' script is removed?

This script controls content resizing and access to the Embed API. If neither are required, you can remove the <script> reference and only use the <iframe> code.

When to use each code type

For the majority of situations we recommend you use the standard embed code.

If you have a technical reason for needing greater control over the <iframe> and its attributes then you should use the advanced code. Other reasons could be that your CMS solution may not allow <script> tags.