Advanced embedding

Advanced instructions on how to embed your calculator directly on your website.

When embedding an iframe you have several inline options to enable/disable in the iframeResizer script.

Example with all inline options added:

<script class="ldScriptLoader" src="https://leaddoubler.s3.eu-west-1.amazonaws.com/files/ldScriptLoader.js" id="ldScript" iframesrc="{calculatorURL}" lazyLoad="true" urlCheck="" autoScroll="true" scrollOnLoad="false" offset="0" loadParams="true" postGA="" gaTracker="" dataLayerTracking="" gtagTracking=""></script>

Options

title

Description:
Adds the title attribute to the iframe

Value:
My iframe title

Default value:
""

Full code example:

title="My iframe title"

lazyLoad

Description:
Loading of the calculator will first occur when in view

Value:
true or false

Default value:
true

Full code example:

lazyLoad="true"
or
lazyLoad="false"

urlCheck

Description:
Only accepts ‘commands’ from the specified URL. E.g: "http://myCalculator.beregner.net"

Value:
{URL}

Default value:
""

Full code example:

lazyLoad="http://myCalculator.beregner.net"

autoScroll

Description:
Automatically scrolls to top of calculator when navigating in quizzes

Value:
true or false

Default value:
true

Full code example:

autoScroll="true"
or
autoScroll="false"

scrollOnLoad

Description:
Automatically scrolls to calculator when parent page has been loaded

Value:
true or false

Default value:
false

Full code example:

scrollOnLoad="true"
or
scrollOnLoad="false"

offset

Description:
Numerical value: Used in combination with autoScroll so the page scrolls "offset" more or less. Usefull when having a fixed position banner to account for.

Value:
{offsetAmountInPx}

Default value:
""

Full code example:

offset="300"

loadParams

Description:
Automatically loads parameters from URL into the iframe on load, so the values can be used in the calculator.

Value:
true or false

Default value:
true

Full code example:

loadParams="true"
or
loadParams="false"

postGA

Description:
Activates the ability to post tracking data to Google Analytics through the iframe.

Value:
true or false

Default value:
"false"

Full code example:

postGA="true"
or
postGA="false"

Example object to send directly from calculator (not from plug’n’play script):

var tracking = {
    hitType: 'event',
    eventCategory: 'My category',
    eventAction: 'My action',
    eventLabel: 'My label'
}
parent.postMessage(tracking, "*");

gaTracker

Description:
If the parent page has multiple GA trackers, you can specify which one to send to. It defaults to just "send". If you provide "myCustomTracker", it will send data like: ga("myCustomTracker.send", objectFromPostmessage).

Value:
myCustomTracker

Default value:
""

Full code example:

gaTracker="myCustomTracker"

dataLayerTracking

Description:
Sends data from calculator to dataLayer on embedded page

Value:
true or false

Default value:
"false"

Full code example:

postGA="true"
or
postGA="false"

Example object to send directly from calculator (not from plug’n’play script):

var tracking = {
    'event': 'my_event',
    'myCustomField': 'My value',
    'myCustomField2': 'My value',
}
parent.postMessage(tracking, "*");

gtagTracking

Description:
Sends data from calculator to gtag() on embedded page

Value:
true or false

Default value:
"false"

Full code example:

gtagTracking="true"
or
gtagTracking="false"

Example object to send directly from calculator (not from plug’n’play script):

var tracking = {
    'event': 'my_event',
    'extra': {
        event_category: 'My category',
        event_label: 'My label'
    }
}
parent.postMessage(tracking, "*");

Extra

To scroll into view, you can with javascript call resizeNotify("top") from the calculator. This method is automatically called in “quiz mode” and when calculator is loaded on parent page.