There are two ways to integrate the Refer a Friend campaign on your website or web app:

  • Using the In-app Referral widget (just like the widget of Intercom or Drift)
  • By embedding the widgets directly in your pages

Using the In-app Referral widget

You can have your campaign up and running on your website in minutes by installing the In-app Referral Widget.

Edit your page in Instapage by clicking the Settings (gear icon) in the right corner of the navigation bar and then Javascript:

In the Footer tab paste the following Javascript snippet which will add the In-app Referral Widget on the page of your website:

<script>!function(){var a=window.VL=window.VL||{};return a.instances=a.instances||{},a.invoked?void(window.console&&console.error&&console.error("VL snippet loaded twice.")):(a.invoked=!0,void(a.load=function(b,c,d){var e={};e.publicToken=b,e.config=c||{};var f=document.createElement("script");f.type="text/javascript",f.id="vrlps-js",f.defer=!0,f.src="https://app.viral-loops.com/client/vl/vl.min.js";var g=document.getElementsByTagName("script")[0];return g.parentNode.insertBefore(f,g),f.onload=function(){a.setup(e),a.instances[b]=e},e.identify=e.identify||function(a,b){e.afterLoad={identify:{userData:a,cb:b}}},e.pendingEvents=[],e.track=e.track||function(a,b){e.pendingEvents.push({event:a,cb:b})},e.pendingHooks=[],e.addHook=e.addHook||function(a,b){e.pendingHooks.push({name:a,cb:b})},e.$=e.$||function(a){e.pendingHooks.push({name:"ready",cb:a})},e}))}();var campaign=VL.load("YOUR_CAMPAIGN_ID",{autoLoadWidgets:!0});campaign.addHook("boot",function(){campaign.widgets.create("rewardingWidget",{container:"body",position:"bottom-right"}),campaign.widgets.create("rewardingWidgetTrigger",{container:"body",position:"bottom-right"})});</script>

Make sure to replace YOUR_CAMPAIGN_ID with your campaign ID that you can find in the Installation step of your Campaign Wizard.

Save and publish the page. The In-app Referral widget will appear on the page so that your visitors can use it to join the campaign and invite their friends.

If you want the In-app Referral Widget to appear on the left-hand side of the page, use this code instead:

<script>!function(){var a=window.VL=window.VL||{};return a.instances=a.instances||{},a.invoked?void(window.console&&console.error&&console.error("VL snippet loaded twice.")):(a.invoked=!0,void(a.load=function(b,c,d){var e={};e.publicToken=b,e.config=c||{};var f=document.createElement("script");f.type="text/javascript",f.id="vrlps-js",f.defer=!0,f.src="https://app.viral-loops.com/client/vl/vl.min.js";var g=document.getElementsByTagName("script")[0];return g.parentNode.insertBefore(f,g),f.onload=function(){a.setup(e),a.instances[b]=e},e.identify=e.identify||function(a,b){e.afterLoad={identify:{userData:a,cb:b}}},e.pendingEvents=[],e.track=e.track||function(a,b){e.pendingEvents.push({event:a,cb:b})},e.pendingHooks=[],e.addHook=e.addHook||function(a,b){e.pendingHooks.push({name:a,cb:b})},e.$=e.$||function(a){e.pendingHooks.push({name:"ready",cb:a})},e}))}();var campaign=VL.load("YOUR_CAMPAIGN_ID",{autoLoadWidgets:!0});campaign.addHook("boot",function(){campaign.widgets.create("rewardingWidget",{container:"body",position:"bottom-left"}),campaign.widgets.create("rewardingWidgetTrigger",{container:"body",position:"bottom-left"})});</script>

Again, don't forget to replace YOUR_CAMPAIGN_ID with your campaign ID.

Using the embeddable widgets

Follow these instructions if you would like to use embeddable widgets instead of the In-app Referral Widget.

Edit your page in Instapage by clicking the Settings (gear icon) in the right corner of the navigation bar and then Javascript. In the Footer tab paste the following Javascript snippet:

<script>!function(){var a=window.VL=window.VL||{};return a.instances=a.instances||{},a.invoked?void(window.console&&console.error&&console.error("VL snippet loaded twice.")):(a.invoked=!0,void(a.load=function(b,c,d){var e={};e.publicToken=b,e.config=c||{};var f=document.createElement("script");f.type="text/javascript",f.id="vrlps-js",f.defer=!0,f.src="https://app.viral-loops.com/client/vl/vl.min.js";var g=document.getElementsByTagName("script")[0];return g.parentNode.insertBefore(f,g),f.onload=function(){a.setup(e),a.instances[b]=e},e.identify=e.identify||function(a,b){e.afterLoad={identify:{userData:a,cb:b}}},e.pendingEvents=[],e.track=e.track||function(a,b){e.pendingEvents.push({event:a,cb:b})},e.pendingHooks=[],e.addHook=e.addHook||function(a,b){e.pendingHooks.push({name:a,cb:b})},e.$=e.$||function(a){e.pendingHooks.push({name:"ready",cb:a})},e}))}();var campaign=VL.load("YOUR_CAMPAIGN_ID",{autoLoadWidgets:!0});</script>

Make sure to replace YOUR_CAMPAIGN_ID with your campaign ID that you can find in the Installation step of your Campaign Wizard.

Also, note that this snippet is different than the one for the In-app Referral Widget. Make sure to install the right one for your case.

Save the code.

Back to editing your page, from the navigation bar on the top click < > Html for each one of the widgets you want to use.

Double-click (or click EDIT on) the corresponding element and paste the following HTML in the HTML Widget to embed the Form Widget from Viral Loops:

<div data-vl-widget="embedForm"></div>

Copy and paste the following HTML in the HTML Widget to embed the Reward Widget from Viral Loops:

<div data-vl-widget="rewardStats"></div>

And that's it! Participants will use the Form Widget to join your campaign and invite their friends. On the Reward Widget they will see the rewards they have won by referring others to the campaign.

Is this helpful? Let us know! 💜

Did this answer your question?