Using Custom HTML pages in Outgrow

Outgrow offers a wide range of customization that can be incorporated into your content piece. On our premium plans, we allow users to add Custom HTML pages to their Outgrow experiences.

How to add Custom HTML to my template?

Depending on your plan and template you might or might not have access to Custom HTML in the Outgrow Builder.
To check if you have access to the code editor simply navigate to the Outgrow Builder and click on Add button towards the bottom of the left side navigation as shown in the screenshot.

When you click on Add Custom HTML, a sample Custom HTML slide will be added to your content piece. You can start editing this HTML page or use one of the templates mentioned here.

Add Vimeo Video

To add a Vimeo video to your content piece, use the following iframe code-

<iframe src="https://player.vimeo.com/video/184385032" width="100%" height="282" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

You can change height of the video embed by adjusting the height attribute here.

Add a YouTube Video

Just replace the src here with your video embed link and your video will be embedded on your Custom HTML slide

<iframe width="100%"  height="315" src="https://www.youtube.com/embed/N-P_8ACSHas" frameborder="0" allowfullscreen></iframe>

You can change height of the video embed by adjusting the height attribute here.

Add a Background Image

To add a background image to a Custom HTML slide use this piece of code

<div class="bg-img" style="background:url('https://cdn.filestackcontent.com/IARhhVM9QumiSRj0xPgF') no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
float: left;
min-height: 350px;">
</div>

Just replace the URL highlighted in screenshot below with your image URL.

In some templates full width background image is not provided by default. You can use Custom HTML to add a full width background on welcome screen for such template.

Full width background on Madrid templateFull width background on Madrid template

Full width background on Madrid template

In the illustration above we have added full width background image to The Madrid template welcome screen. Use following piece of code to achieve this:

<link href="https://cdn.filestackcontent.com/06VhDcYbTpequBWRu2GQ" rel="stylesheet"></p>

Note the default background image on Madrid template has been hidden using the toggle for Background image under display settings section.

Background Image with text

There are cases where you might want to have some text on top of a background image. Use following piece of code to add a background image with text on top of it.

<div class="bg-img" style="background:url('https://cdn.filestackcontent.com/IARhhVM9QumiSRj0xPgF') no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
float: left;
min-height: 350px;">
<h1 style="position:absolute;top:50% ; left:50%;transform:translate(-50%,-50%);">
hiii...dummy text here!!!!
</h1>
</div>

Add a GIF on Custom HTML slide

Add a GIF to your Calculator on Custom HTML slide

<div class="bg-img" style="background:url('https://cdn.filestackcontent.com/I8wbfwwTfOAmKHCLhrXr');
width:100%;
float: left;
min-height: 550px;">
</div>

Add a button

You can add a button on your Custom HTML page. You can also redirect the users to a different website by placing a redirect URL behind the button as per your requirement.

NOTE:
This can come into use when you don't want to show a CTA button on the results page and want to redirect the users to a Custom HTML page where you will show a short video or message to qualify the users, and in case they are interested to learn more they can click on the button on the Custom HTML page.

Add a table

Here's a template for a Table with Heading row, 3 rows for content and 3 columns

<table style="width:100%;float:left; border: 2px solid #ddd;" >
<thead style="border-bottom: 2px solid #ddd;">
<tr>
<th style="border-right:1px solid #ddd;padding: 8px;">S.No.</th>
<th style="border-right:1px solid #ddd;padding: 8px;" >Firstname</th>
<th style=";padding: 8px;">Lastname</th>
</tr>
</thead>
<tbody style="text-align:left">
<tr style="border-bottom: 2px solid #ddd;">
<td style="border-right:1px solid #ddd;padding: 8px;">1</td>
<td style="border-right:1px solid #ddd;padding: 8px;">John</td>
<td style="padding: 8px;">Doe</td>
</tr>
<tr style="border-bottom: 2px solid #ddd;">
<td style="border-right:1px solid #ddd;padding: 8px;">2</td>
<td style="border-right:1px solid #ddd;padding: 8px;">Mary</td>
<td style="padding: 8px;">Moe</td>
</tr>
<tr>
<td style="border-right:1px solid #ddd;padding: 8px;">3</td>
<td style="border-right:1px solid #ddd;padding: 8px;">July</td>
<td style="padding: 8px;">Dooley</td>
</tr>
</tbody>
</table>

Add a Countdown Timer

You can now add a Countdown Timer as well on the Custom HTML page. A good example of how this can be used is when you want the users to go through a specific video embedded on the page, and you want that as soon as the video is over the user should be auto-moved to the next page. You can specify the timer and can also choose whether or not you want the end user to see the timer on the page.

This is how the Countdown Timer will appear on the live version of your Outgrow content.

In case you have any questions you can reach out to us at [email protected], or you can use the chat option at the bottom of the page, and we will be happy to assist you further.