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.