Sometimes so, it happens that you wish to use your form to add participants to your referral program. We have you covered! You can now connect your custom form with Viral Loops.
Before you deep dive, check our concierge service, where we set all this up, and you will avoid all the hustling!
STEP 1: choose one of the 3 logic scenarios:
a) Custom form with Viral Loops participation (you have to complete one option from STEP 2 and that's all)
This means that when someone uses your form to sign up, they also get added to Viral loops
b) Custom form with Viral Loops participation + Sharing state afterwards (you have to complete one option from STEP 2 and one option from STEP 3)
This means that once someone signs up for your form, they become part of Viral Loops, and they instantly get the sharing state where they can find their referral link
c) Custom form with Viral loops and then redirection to another URL (you have to complete one option from STEP 2 and one option from STEP 3)
This means that once someone signs up to your form, they get redirected to another URL (from there, you can show them their sharing state as well)
STEP 2: choose one of the 3 options on how to implement the above scenarios and continue with its installation:
a) No code installation through our Visual Installer tool
b) Client Side installation using our SDK script for a frontend installation
c) Using our API endpoints for a backend Installation
a) No Code Installation
For the No-Code installation please log in to your account click on edit campaign and at the Installation Step you will find the No-Code installation option.
You just need to copy and paste the snippet on the head of your page where the custom form is located and follow the instructions.
b) For front-end installation, here is what you need to know :
First, add the "Javascript Snippet" from your campaign to your website
Here you can find the Javascript Snippet, which you should add to your website.
You can also find it in the Installation Step of your Campaign if you choose the "I'll do it myself" option.
Second, create your own Custom Form with Viral Loops' attributes or even your attributes
We allow you to use your custom attributes by connecting them with Viral Loops. If you don't have your attributes, our documentation below has an example that you can use for the installation.
To proceed with Viral Loops' attributes, you have to follow this documentation here.
c) For a back-end installation, here is what you need to know:
You would want to register the new participants over the Web API using the Registration method.
If you wish to redirect to another page where the referral state appears you need to have a page where the snippet and the widget Js is installed and triggered automatically. Here is the article that will help you: Automatically joining a Viral Loops campaign - Automatic Participation.
STEP 3: if you choose the scenarios 2 or 3 from STEP 1, then you have one more STEP to do here:
Choose between options a and b and continue with their instructions below:
a) Participating in your Custom Form, and afterwards show Viral Loops' Sharing State?
a. Copy/Paste this code from here to your website.
b. Don't forget to change the "your Campaign ID" from the code with your actual campaign ID. (you will find it on the Installation Step of your campaign)
c. Right now, you should pull your participant's email, too.
b) Participating in your Custom Form, and then redirection to another URL and afterwards show Viral Loops' Sharing State?
To do such an implementation, all you need to do is to add a URL parameter on your SUBMIT button. Here is the article that will help you: Automatically joining a Viral Loops campaign - Automatic Participation.
IMPORTANT NOTE!
Remember that even if you skip using the Form Widget to capture participation for your campaign, we still advise you to add it somewhere else on your website, as it’s the only widget through which participants can get their unique link and invite others. In order to do that, you need to add the campaign snippet and Form Widget on any page you want to redirect them to.
EXTRA STEP: If you want to capture GDPR Consent
Add the consents property to the user object. The Consent ID can be found in the app's Settings Page, where the GDPR consents are added.
Live Example
Check a full example here with the complete code using Bootstrap and jQuery.
EXTRA INFO:
📄 Note: This article is mainly to be followed for custom-built websites and does not apply to landing page platforms with certain limitations/restrictions (e.g. Squarespace, Wix etc.)