Typeform allows you to create stunning and high-conversion forms in minutes using their simple drag-and-drop interface. 

In this guide we will demonstrate how to integrate Typeform to your landing page as an alternative method for registering users to your Viral Loops campaign.

It's a fairly simple process and it will only take a few minutes to do.

What is this guide

First, you will create a simple Typeform and embed it on your website. 

Then, through Zapier you will funnel the Typeform submissions to your Viral Loops campaign.

What this means is that when people are submitting their details on your Typeform their data will be submitted to your Viral Loops campaign as well. 

If someone was referred to your Typeform, their referrer will also be tracked to Viral Loops so that the referral can be attributed correctly.

You will need:

  • a paid account on Typeform on their Pro plan
  • an account on Zapier

Create a form 

As a first step, we need to create a simple Typeform. 

It includes two fields: firstname and email.  

It also includes two hidden fields to capture the parameters from the referral URLs that will drive people to your campaign page: referralcode (for the templates with a popup widget the respective parameter is referral) and refsource

It is critical to include those two hidden fields and name them as: refsource and referralcode (for the templates with a popup widget the respective parameter is referral).

Install the Typeform in your page

You will find your form link in the Share tab when creating your Typeform and you should remove the trailing URL parameters in order to end up with a link that looks like this:

https://yourcompany.typeform.com/to/aBc13g

Remove everything after the first "?" in that link and remove the "?" too.

Then, embed the following HTML code in your page to install the Typeform:

<div id="typeFormDiv" typeform-URL="FORM_LINK"></div>

Replace FORM_LINK with the link from your form, to end up with a code like this: 

<div id="typeFormDiv" typeform-URL="https://yourcompany.typeform.com/to/aBc13g"></div>

Add an extra snippet

In your page, copy paste the following code right before the closing </body> tag.

<script>var URL=document.getElementById("typeFormDiv").getAttribute("typeform-URL");if(URL===null){console.log('invalid placeholder');}else{var campaignID=URL.split("/").reverse()[0];function getParam(name, url) {if (!url) url = window.location.href;name = name.replace(/[\[\]]/g, "\\$&");var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),results = regex.exec(url);if (!results) return null;if (!results[2]) return '';return decodeURIComponent(results[2].replace(/\+/g, " "));}if (getParam('refSource') && getParam('referralCode')) URL += "?refsource="+getParam('refSource')+"&referralcode="+getParam('referralCode');(function getTyperformScript () {var fdiv = document.createElement("div");fdiv.setAttribute("class", "typeform-widget");fdiv.setAttribute("style", "width: 100%; height: 500px;");fdiv.setAttribute("data-url", URL);document.getElementById("typeFormDiv").appendChild(fdiv);var sdiv=document.createElement("div");sdiv.setAttribute("style", "font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;");sdiv.innerHTML=" powered by ";document.getElementById("typeFormDiv").appendChild(sdiv);var link=document.createElement("a");link.setAttribute("href", "https://admin.typeform.com/signup?utm_campaign="+campaignID+"&utm_medium=typeform&utm_content=typeform-embedded-poweredbytypeform&utm_term=EN");link.setAttribute("style", "color: #999");link.setAttribute("target", "_blank");link.innerHTML="Typeform";sdiv.appendChild(link);})();(function typeformScript(){var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/";if(!gi.call(d,id)){js=ce.call(d,"script");js.id=id; js.src=b+"embed.js";q=gt.call(d,"script")[0];q.parentNode.insertBefore(js,q)}})();}</script>


Refresh and now you should be able to see your form installed to your page 😍

Create a Zap

Now go to Zapier and create a new Zap. Choose Typeform as your Trigger App. 

Make sure to do at least one submission in your form so Zapier can pick up the fields and use them automatically for the rest of the integration. 

Then choose Webhooks as your Action app.


It will ask you what kind of API request to make.
Choose POST. 

Then setup your API call:

First add the Viral Loops API endpoint as the url:

https://app.viral-loops.com/api/v2/events


Choose json  as the Payload Type

And let's feed it our Typeform data:

Make sure to include those values:

  • params__event with value "registration". Note that this is a double underscore there in "params__event".
  • apiToken: This is the API token of your campaign which you can find at the Installation step of your campaign wizard
  • params__user__firstname: with the value of the firstname you capture from the Typeform
  • params__user__email: with the value of the email you get from the Typeform
  • params__user__refSource: with the value of the hidden field refsource
  • params__referrer__referralCode: with the value of the hidden field referralCode

Please note that the parameters on the left columns need *double* underscores to work.

One last option needed. A bit down you will see this:

Make sure Unflatten is set to yes so Zapier will convert the previous parameters to a valid Viral Loops API call.

And that's it!
Click Continue and then Finish.
Your Zap is ready and your integration is complete! 🎉 

Do you want to use another tool with Viral Loops? Then check out our official Viral Loops® Zapier integration! 😊

Did this answer your question?