Displaying Viewport Content in an iframe

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

XML

<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

JS

$( 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

JS

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