Skip to main content

Utilizing Widgets in an iFrame

Any widget can be displayed in an iFrame element.  This can be handy if the widget behaves erratically when displayed directly in your page due to conflicts (e.g., javascript libraries and CSS conflicts), or if you are unable to use the javaScript installation options.  There are two ways to put this together.

 

Create an Iframe that loads the Widget Itself

Below is an HTML tag that you can use as a template for any widget in an iFrame:

<iframe src="//ingo.me/widgets/iframe?widget_unique_id=WIDGET_ID_HERE" style="width: 100%; height: 600px;" frameborder="0"></iframe>

If you're using this implementation for a Login Widget, you will need to add an encoded URL in a parameter for the Login Widget redirect, as seen here.

&data=%7B%22manual%22%3A%22http%3A%2F%2Fwww.insert_your_next_page_where_users_should_land.com%22%7D

Additionally, you will need to check the "Break out of iframe" box in the "Display" section of your widget configuration.

Create a Widget page and embed in Iframe

To do this you just need a very simple page.  Something like the following should do it (taken almost verbatim from the widget generator):

<!doctype html>
<html>
<head>
</head>
<body style="overflow:hidden">
  <div id="widget"></div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="//cdn.ingo.me/widgets-loader/1.0.1/js/ingo.loader.widget.js"></script>
  <script>
  $(function() {
    $('#widget').loaderWidget({
    "widgetId": "AMPLIFIER_WIDGET_ID_HERE"});
  })
</script>
</body>
</html>

Then create your iframe element in your main document and set the url to this new page you created as the src attribute of the iframe.

Trouble with Overflow?

You might have trouble with overflow. This is especially the case with the Amplifier Widget as it's default behavior is to resize itself horizontally to fit it's parent. To fix this you'll have to do two things: 1) set the parameter "Should the widget fill whole parent block?" to checked/true. 2) include the following CSS file in your custom css parameter for the widget:

https://cdn.ingo.me/custom-css/swiniframe.css

Essentially this allows the Amplifier Widget to expand to fit the parent, but explicitly removes it's default minimum width, allowing the Amplifier to more accurately accommodate it's parent's dimensions.

Frame It! 

Enjoy!

Related articles