Embedding Campaigns on Your Website as IFRAME

Last Updated: Apr 26, 2017 12:03PM PDT

Warning: The IFRAME embed method is only recommended if the JS embed method does not display due to conflicts with your existing website Javascript. The IFRAME embed method will not dynamically scale to your container element.

To embed a Woobox campaign within an external webpage, you'll want to use the following basic IFRAME tag within the HTML for the site content, wherever you want the campaign to be placed:

<iframe src='https://woobox.com/xxxxxx' 
    frameborder='0' 
    height='750' 
    width='100%'
    scrolling='no'>
</iframe>

You'll just need to replace the following parts in the code with the relevant information and styling for your promotion/website. 

  • The first part of the IFRAME's src (https://woobox.com/xxxxxx) would be replaced with your campaign's short URL (which you can find in the promotion's dashboard).

  • IMPORTANT:  If you have the Facebook Page Tab installed for your campaign
    You must add ?web=1 to the end of your promotion's short URL as the IFRAME src in order for it to work (alternatively, you can use the method described below).  So the src would be formatted like this:

    ​src='https://woobox.com/xxxxxx?web=1'
  • OPTIONAL: You can add a second part to the IFRAME's src to direct users who click on the shared link back to the external website, instead of the Facebook Page Tab if you have that installed, or the default web version of the offer.

    To set this up, you'd simply add ?embed= followed by the URL of the webpage you're embedding the campaign on. So the src would be formatted like this: 

    src='http://woobox.com/xxxxxx?embed=http://example.com'
  • You can also adjust the height and width of the IFRAME as needed for your specific campaign's content, and the width can be whatever you'd like, as our apps are all mobile responsive!.
  • If you want the campaign to show as truly responsive, you will need to add the following to your page:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  • ALSO IMPORTANT:  If you are embedding the campaign in an SSL/HTTPS secure webpage
    You will want to make sure you're using the https:// version of the promotion URL when you embed it, otherwise it may not show in some browsers, depending on the site where you've embedded it.  You can find more information about why this is necessary in our blog post, or this other support article.

So what will it look like?

Check it out! A live example of an embedded Sweepstakes campaign: