Refer a Friend + Webflow

How to install the Refer a Friend template in Webflow

Fivos Stergiannis avatar
Written by Fivos Stergiannis
Updated over a week ago

After filling up all the details and steps of your Viral Loops campaign, the last one that you are going to reach, is the “Installation” step:

When reaching the “Installation” step, select the “I’ll do it myself” option:

#1 Copy the snippet

You now have to manually install your campaign javascript snippet in your website.

Don’t feel overwhelmed, there’s nothing to worry about, it’s a simple process that we’re going to go through. 

You should continue by copying the campaign Javascript snippet. You will find it in the Installation step of the Campaign Wizard.

#2 Paste the snippet in your Webflow page

The next step is to login in to your Webflow account and select the project that you are willing to install your campaign to, via your Webflow Projects Dashboard;

You should then access the desired page that you’re willing to install your Viral Loops campaign via the top-left-corner menu;

After accessing the page, you should hover your mouse on the right side of the menu that appears and select the gear icon (for the specific page), as shown below:

When selecting the gear icon, a new menu should expand and it’s now the time to paste the unique snippet that you previously copied from your Viral Loops Installation page, into the “Before </body> tag” section;

Now that your campaigns unique snippet is installed, we should move on to the next steps of our installation.

#3 Embed the form widget

It’s now time to place your Viral Loops Embeddable Form Widget that users will use in order to opt-in to your campaign.

To do that, you should navigate again to the page you’re willing to use for your campaign and select the section that you’re about to embed your Viral Loops form widget:

It’s now time to embed your unique form’s HTML code which is found under the "Form widget” section on your Viral Loops Installation page:

In order for you to be able to install your Form Widget’s HTML code, you should first make the desired section compatible with your HTML code.

To do that, you should select the “Add” (+) from the left top corner again and then select the “Embedded” option that is available;

To properly install the Embedded component, you should just drag and drop it in the section.

❗Please note that the Embedded component option, is only available for paid Webflow accounts.

After that, in order to access Webflow’s code/HTML window, you should navigate to the section you dragged & dropped the Embedded component, hover and select it’s gear icon;

You should then paste your Form’s widget code to the Code editor that pops up and after that, select “Save & Close” the option.

#5 Install the Reward Widget

Repeat #4 using this snippet instead:

You’re done 🎉

Did this answer your question?