Let's check the instructions you need to install your campaign into your Webflow page!

We have 2 ways to achieve this:

First of all, we have a dedicated page for that here:

https://viral-loops.com/low-code-custom-widgets

You can test and check if this works for you and message us at support@viral-loops.com if you struggle somewhere in the process.

What you can do with this setup is completely customize the widget to match your branding and design without having to do this through the Viral Loops Campaign Wizard. It allows more freedom and versatility when it comes to set up. The idea is that you add the CSS and the changes you wish, and we create the HTML code with the API call in the back to support the registration and referral tracking functions.

You can check more here:

In this set-up, we will be sure to provide the instructions you need to follow to install the Widgets on your Webflow page.

It consists of two steps:

a) Installing the Campaign Snippet

b) Embedding the HTML widget onto the page.

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:

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 unique snippet that we have generated for you.

The next step is to log into 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 campaign's unique snippet is installed, we should move on to the next steps of our installation.

It’s now time to place your Viral Loops Widget that users will use to opt-in to your campaign and interact with it. Inside the Installation Step under the referrer and Inviteee widgets you will be able to find the script

Click on embed widget and you will see the script:

Then you should navigate again to the page you’re willing to use for your campaign and select the section in which you’re about to embed your Viral Loops form widget:

In order for you to be able to install your 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 Web flow'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.

Your widgets are now ready.

The example landing page that I’ve used to guide you through, is inspired by Harry’s and it looks like this:

If you’re willing to supercharge your landing page and your customers are able to see their referral count or the leaderboard in separate locations on the website, you can replicate the above process and install your desired widgets.

Just ensure you install your Widget’s HTML on the section you wish to show it.