Publishing in an iframe

Using an iframe to insert your campaign on your own website

Niklas Cuthbert Mehlsen avatar
Written by Niklas Cuthbert Mehlsen
Updated over a week ago

One way you can drive traffic to your campaign is by publishing it in an iframe.

The iframe embeds the game directly in your website so you don't have to direct traffic to an external page.

There are a few settings you should be aware of when creating a campaign that will be published in an iframe. Read more here: Iframe important to know.

Iframe settings

There are two ways to iframe your campaign into your website:

  1. Insert our iframe script in your website's page code

  2. Insert the campaign URL into your website's own iframe module

Note: a campaign can only be iframed if your website is not blocking external scripts.

Using the iframe script

You can find the iframe script under the campaign's Publishing tab.

You can choose different settings, for example, to only display the game flow section and none of the other landing page sections. Changing the settings will update the script.

Add responsive support

A standard iframe has a set width and height. This can result in a scrollbar if the game content is too tall.

For this reason, we recommend you make use of responsive support and copy the extra script into your website. Responsive support is automatically enabled in the iframe settings, however, it can be disabled if needed.

If you are inserting the campaign URL instead of using the iframe script, you will copy and add the responsive support code elsewhere on your webpage.

Campaign URL

The iframe script uses the campaign's Live URL by default. This means the campaign must be published before you can test the iframe on your website.

When a campaign is live, you have to clear cache and open the campaign in a new incognito window before you can see your changes. Read more here: Editing a Live Campaign.

To avoid having to clear cache constantly, you may want to use the Demo URL while you are testing. To use the Demo URL, you will either replace the Live URL in the iframe script or insert the Demo URL into your website's iframe module.

If you do this, make sure you publish your campaign and use the Live URL before you start directing traffic to your game β€” otherwise, your data will not be collected properly!

Security headers and iframe domain

You can enable Security headers to add the domain of the website where you will be iframing the game. This is to increase security and to ensure that no other domain can display the iframe.

If you enable frame ancestors on your account and insert the domains under Account > developer > Security headers, it will apply to all campaigns on your account.

You will enter the main domain for the website (e.g. playable.com), not the specific URL where you will be iframing the game.

Read more about security headers here.

Switching out iframe content

The iframe script and campaign URL are specific to one campaign. If you want to insert a different campaign, you have to change the script or URL in your website.

If you know you will use the same webpage for multiple different campaigns, you can set up an iframe queue. This is a different script that can display different games based on a date range. This means you only have to insert the script once and can administer in the platform which game should be shown.

Did this answer your question?