Add the equator wizard to your website


Embed into an existing page

Embed the wizard on your own website, or anywhere you can insert HTML.

On large screens, the wizard gets loaded in an iframe wherever you put the code, filling the width of its parent element.

On small screens, the wizard still gets loaded in an iframe, but expands to fill the entire window area when activated.

See an example

<!-- Change the width and height values to suit you best -->
<div class="typeform-widget" data-url="" data-text="Wizard_w_pen" style="width:100%;height:500px;"></div>
<script>(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='';if(!,id)){,'script');;js.src=b+'widget.js';,'script')[0];q.parentNode.insertBefore(js,q)}})()</script>

Launch the wizard in a popup

You can add a button or link to your page which, when clicked, launches the wizard in a popup window without taking visitors away from your site. 

Launch popup from button

<a class="typeform-share button" href="" data-mode="1" target="_blank">Find reporting guidelines</a>
<script>(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='';if(!,id)){,'script');;js.src=b+'share.js';,'script')[0];q.parentNode.insertBefore(js,q)}id=id+'_';if(!,id)){,'link');qs.rel='stylesheet';;qs.href=b+'share-button.css';,'head')[0];s.appendChild(qs,s)}})()</script>

Launch popup from a link

<a class="typeform-share link" href="" data-mode="1" target="_blank">Find reporting guidelines</a>
<script>(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='';if(!,id)){,'script');;js.src=b+'share.js';,'script')[0];q.parentNode.insertBefore(js,q)}})()</script>

Add the wizard As a page

Make the wizard a page on your website. It will get loaded in an iframe, taking up the entire window area.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">


  <!--CSS styles that ensure the wizard takes up all the available screen space (DO NOT EDIT!)-->
  <style type="text/css">
      margin: 0;
      height: 100%;
      overflow: hidden;
      position: absolute;
  <iframe id="typeform-full" width="100%" height="100%" frameborder="0" src=""></iframe>
  <script type="text/javascript" src=""></script>