NEW: Before reading this documentation make sure you check our video tutorial for our new "Word of Mouth Sales" Story that is specifically created for Shopify stores. This way you'll get a more seamless integration with the referral widgets, plus you'll skip the Javascript code installation:

__________________________________________________________

After you create your campaign in Viral Loops using Refer a Friend template, from your home page on Shopify, you select "Online store":

and then you select "Pages":


In the Refer a Friend template, you have 2 options regarding your widgets, you may go either using the In-app widget or the embeddable widgets.

👉 If you want to install the In-app Referral widget 


Firtst of all, you set a title for your page and then, on the content area, you select the top right button "Show HTML":

There, you paste the following script of your campaign:

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

Like so:

Then, on the right corner, select the template where you want to add your campaign, select "Save" and you're ready!

👉 If you want to install the Form + Rewards widgets


Again, you set a title for your page and then, on the content area, you select the top right button "Show HTML":

Then, you will have to copy and paste the following Snippet to embed the Form Widget:
                       
<div data-vl-widget="embedForm"></div> 

and this Snippet to embed the Reward Widget:
                       
<div data-vl-widget="rewardStats"></div> 


Finally, you will have to copy and paste the Snippet of your campaign:

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


Like so:

Lastly, on the right corner, select the template where you want to add your campaign, select "Save" and you're ready!


Did this article help you? Let us know!

Did this answer your question?