Skip to main content
All CollectionsEmbedding
Clickfunnels - Embed Calculator or Quiz
Clickfunnels - Embed Calculator or Quiz
Outgrow Team avatar
Written by Outgrow Team
Updated over 6 years ago

Embed Calculator or Quiz on X-sized iframe display on Clickfunnel page

Following is a step by step illustration on how to add a Calculator/quiz on a Clickfunnel's funnel page.

## 1. Login to your Clickfunnels account
Head over to the login page on Clickfunnels and login with your credentials.

Clickfunnels Login Screen

Once you have logged in, you will see your Clickfunnels Dashboard

Clickfunnels Dashboard

## 2. Create a New page in your funnel
Create a step in the funnel and complete all the required steps including ‘Select a template’, ‘Provide the URLs’ and finally clicking on ‘Open in Editor’.

Create New page on Unbounce

## 3. Add a row to the funnel page

Add a row on the funnel page

Choose the type of container you want to add. This is where your Calculator will go so choose accordingly.

After choosing container add an element to the column.

Choose Custom JS/HTML from the available elements.

After adding Custom JS/HTML element your funnel page will look like this

On clicking Custom Javascript/HTML a code editor will open on right.

## 4. Copy the Embed code from Outgrow

Copy the Embed code from Outgrow

Get the Embed code from Configure section of your calculator or quiz

## 5. Make changes to your code

The code you have copied will look like this

 
 
 

setTimeout(function(){  initIframe('580ee153d8c6f51c6abd425a'); }, 2000);
 

Towards the end of the code there is a function initIframe(calculator_id)

Change it to following

setTimeout(function(){ initIframe('580ee153d8c6f51c6abd425a '); }, 2000);

1 This code will take width of the container

<script src='//outgrow.co/js/nloader.js'></script><script>setTimeout(function(){ initIframe('580ee153d8c6f51c6abd425a'); }, 2000);</script>

2 This code will take full width of the outer space/page

<style>.midWideContainer {max-width: 100% !important;}</style>

<script src='//outgrow.co/js/nloader.js'></script><script>setTimeout(function(){ initIframe('580ee153d8c6f51c6abd425a'); }, 2000);</script>

## 6. Save and Preview

Click Save on the right corner of the screen and then Preview.

Your calculator will now be embedded on your Clickfunnels funnel page.

If you face issues with calculator loading on Clickfunnel page the you will need to increase the number in timeout function setTimeout(function(){ initIframe('580ee153d8c6f51c6abd425a'); }, 2000) in multiples of 1000.

Did this answer your question?