Wordpress - Embed Calculators or Quiz

Embed Code on Wordpress site for X-sized iframe display

## 1. Login to your Wordpress account

Login on Wordpress AdminLogin on Wordpress Admin

Login on Wordpress Admin

## 2. Open the "Pages" Section on Wordpress

On the left sidebar find and hover over “Pages” and click on “Add New”

Add new pageAdd new page

Add new page

## 3. Design a basic skeleton for your page

## 4. Determine where the calculator needs to go

So now you have a Wordpress website and you wish to put a calculator in the highlighted portion below.

## 5. Work with embed code copied from Outgrow

Remember the code we copied from Outgrow to Get the Code for Iframe or Pop Up ]

<code><div id='og-iframe-container' data-url='//idea.outgrow.us/5826e1b16f72d46a0b65401b' data-width='50%'></div><script src='//outgrow.us/js/iloader.js'async></script></code>

As you will be placing this calculator on some small 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 :

<code><div id='og-iframe-container' data-url='//idea.outgrow.us/5826e1b16f72d46a0b65401b' data-width='50%'></div><script src='//outgrow.us/js/iloader.js'async></script></code>

Copy the code that you get (similar to above) and simply paste it in the editor. Rest, the code will figure out on its own.

Let's Preview :

2.Determine the width of the parent


<div style="width: 400px;">
    //Embed Code goes here          

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

Now copy and paste the embed code provided in Full Page Embed section in the parent code stack.

Let's preview -

Embed Code on Wordpress for Full Sized iframe Display

## 1. Login to your Wordpress account

## 2. Next, create a blank HTML webpage in Wordpress

The page should be blank just like shown in the image below.

## 3. Paste the code copied from Outgrow Config section

Remember the code you copied from yje Config section on OUTGROW for Full page Embed?
Refer to this ] if you need help on how to get the Embed Code for Full sized Iframe display.

The code you copy from Outgrow will look something like this -

<code><div id='og-iframe-container' data-url='//idea.outgrow.us/5826e1b16f72d46a0b65401b' data-width='100%'></div><script src='//outgrow.us/js/iloader.js'async></script></code>

Just paste the code on the page and you are good to go!

Simply paste the code into the editor on the Blank HTML page you created on Wordpress. Click Preview. Switch over to see the results.

Did this page help you?