There are two ways to integrate the Refer a Friend campaign on your website or web app. Either via the In-app Referral widget (just like the widget of Intercom or Drift) or by embedding the widgets directly in your pages.


Using the In-app Referral widget

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

First of all, select on which side of the page you want the widget to appear:

Now copy the following script in your page, near the closing </body>  tag.

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


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

Refresh your page and the In-app Referral Widget will be there. Your visitors will be able to join the campaign and invite their friends.


Using the embeddable widgets

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

Add the following script in your page, near the closing </body>  tag.

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

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

This snippet is different than the one for the In-app Referral widget. Make sure to install the right one for your case.


Copy and paste the following HTML in your page to embed the Form Widget:

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

Copy and paste the following HTML in your page to embed the Reward Widget:

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


Did this article help you? Let us know!

Did this answer your question?