×

You're using an outdated browser

For a better experience, keep your browser up to date. Check here for the latest version.

Manual

Displaying Viewport Content in an iframe

Steffen Burzlaff

Steffen Burzlaff Last update: Jan 18, 2018

This guide explains how to integrate a Scroll Viewport into another viewport or website.

Adding the iframe in the theme

First implement the <i-frame>-tag inside your template where you want to include the external viewport.

Adding the iframe

<iframe src="http://www.yourViewportThemeURL.de/"><iframe>

To configure the iframe you can add all the iframe attributes as normal.

Adding the iframe via javascript

With the javascript solution you are more flexible because you can add the iframe also between the page content between your content your confluence pages.

To achieve this you need to add the javascript to your theme, by inserting it in an external file. The following code creates an <iframe> inside the <body>: 

Adding a iframe inside of an html-element

$( document ).ready(function() {
    var iframe = '<iframe src="http://www.yourViewportThemeURL.de/"><iframe>';
  	$("body").append(iframe); 
});

You can also select classes or IDs of your HTML.

If you want to append the iframe after an element you can do this with the following code:

Adding a iframe after of an html-element

$( document ).ready(function() {
    var iframe = '<iframe src="http://www.yourViewportThemeURL.de/"><iframe>';
  	$("body").after(iframe); 
});




2x2.10
We use cookies to create a secure and effective browsing experience for our website visitors and to understand how you use our site (i.e. Google Analytics). For more information: click here.
Ok