Embedding Offers on Your Website as IFRAME

Last Updated: Nov 07, 2016 10:03AM PST

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 offer within an external webpage, you'll want to use the following basic IFRAME tag within the HTML for the site content, wherever you want to offer 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 offer/website. 

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

  • IMPORTANT:  If you have the Facebook Page Tab installed for your offer
    You must add ?web=1 to the end of your offer'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 offer 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 offer's content, and the width can be whatever you'd like, as our offer apps are all responsive now!.
  • If you want the offer 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 offer in an SSL/HTTPS secure webpage
    You will want to make sure you're using the https:// version of the offer 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 offer: