Embed a Calculator or Quiz on x-sized iframe display on HTML Website

If you have an HTML website and you wish to put Outgrow calculator/quiz in the highlighted portion below, you are in the right place. You will first need to determine the width and height of either the calculator/ quiz iframe itself or the parent that will be enclosing the calculator or quiz.

We wish to add calculator in the area highlighted in this image.

We wish to add calculator in the area highlighted in this image.

The illustration above shows the code for displaying x-sized iframe on a web page. Since you will be placing this calculator on a small or large portion of your web page, so you are free to take one of the following approaches -

1.Use the embed code provided in the very first section

Sample :

Copy the code that you get (similar to above) and simply paste it in your HTML markup.

Outgrow Embed Test

			 About Us 
		 Hi there! This page right here will be used to demonstrate you various
features available with us on Outgrow.
Have a great time ahead. // Here is your embed code //

Time to preview

2.Determine the width of the parent


//Embed Code goes here			

Remember: Providing height attribute won't have an effect.

Now copy paste the embed code provided in Full Page Embed section into the parent markup.

Let's preview -

Embed Calculators or Quiz on Full-sized iframe Display on HTML Website

If you want to embed a calculator or quiz you created on your HTML website on a full sized display, follow these steps -

  • Get a Blank HTML page ready

Create a blank HTML Page. Just make sure you create a blank page for this to work. The code may look somewhat like this.

Outgrow - Demo Calculator Page
  • Paste the code you copied from the Config section of Outgrow

Remember the code we copied for full sized iframe display from CONFIGURE section on Outgrow?
Refer to this, if you need to help on how to get the embed Code for Full sized Iframe Display.
The code should look like this:

NOTE: To display calculator/quiz spanning the entire page, the code should look something like the one here.

Just paste the code in the <body> tag and that’s all.

Voila! You have successfully embedded your calculator/ quiz to the HTML website

You’re done. See it was so easy. Switch over to see the results.

Full Page Embed Preview

Full Page Embed Preview

Did this answer your question?