All Collections
Embedding
Embedding Options & Basics
Embedding Options & Basics
Outgrow Team avatar
Written by Outgrow Team
Updated over a week ago

There are plenty of ways to use an Outgrow calculator or quiz within your website:

Option 1: iFrame Embedding

You can embed the calculator/quiz on your website or blog. If done right, these interactive tools will seem native to your website. You can do one of 2 things:

Embed as a full page:

We highly recommend this as the user has no distractions from the sidebars and other website elements. You can use your header, footer and have the calculator inside the two.

In the example below, the white header with the Radius logo is actually the header of the parent website and the calculator is embedded in an end to end container.

Ensuring Responsiveness on Full Page Embeds

While pasting code in an empty HTML page, users often forget to add an important tag in the header that ensures responsiveness. Please make sure that this tag exists in the header of the HTML page where you are creating your full page embed.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Embed inside a page:
If you want other website elements to also be present on the page, then you can embed inside a container of a page.

In the example below, a calculator has been embedded inside of a blog post.

Here is some more information: HTML - Embed Calculators or Quiz

Option 2: CNAME

Using CNAME records, you can host your calculators on your own website like: calculator.yourwebsite.com/name_of_your_calculator or yourwebsite.com/name_of_your_calculator

This is the recommended way of using Outgrow calculators while using your brand. You can find detailed instruction here: Hosting a Calculator on Your Domain via CNAME

Option 3: Domain Masking (calculator.yourwebsite.com)

If you do not want to spend time changing the code on your website, you can simply have your calculator/quiz show up on your own sub-domain via domain masking.

All you need to do is configure a couple settings in your domain registrar (ex: GoDaddy etc) and you are good to go. It takes a few minutes at most and you do not even require a developer.

Here is more information on how to set this up: Hosting a Quiz or Calculator on Your Sub-Domain

Exceptions

There are cases where domain masking might not be permitted by your domain registrar or nameserver provider. Please check with your registrar if they allow for domain masking. We will update the list of domain name providers and or nameserver providers that disable masking below continuously

[HostGator]

Impact on SEO

Domain masking is neutral to SEO but doesn't thave the same benefits as having the calculator embedded on your website. Also, there are times when due to configuration issues, there may be minor design related (CSS) errors.

Option 4: Triggered Pop Ups

Lastly, if you do not want to edit your website too much and also do not want to change your registrar settings, you can serve your calculator/quiz as a pop-up. A user will click on a link or a button and that will trigger a pop-up.

Exit Intent

If you want, you can also embed a calculator inside of an exit intent pop-up served by a third party tool like sumome.com or optinmonster.com.

Did this answer your question?