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 and refsource

It is critical to include those two hidden fields and name them as: refsource and referralcode.

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

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 have any questions on this process? Let us know! 😊


PS: Do you want to keep the flow going? Read this article on how to use the Viral Loops Webhooks to connect to even more integrations after the participation is completed: Create advanced referral flows using webhooks 

Did this answer your question?