If you are building your landing page using Landingi, you can use a native form from Landingi to get your visitors to join your Viral Loops campaign.
To do that, firstly you need to install your Viral Loops campaign snippet on the page where your form is but also in the page where you are redirecting after the form is submitted (thank you page).
The page with the form should also be set as your campaign URL in your Viral Loops campaign wizard, the page where referral links will direct people to.
You can find your Viral Loops campaign snippet in the Installation step of your Campaign Wizard in Viral Loops.
Depending on the Viral Loops template you are using, follow the relevant instructions.
Milestone Referral - Refer a Friend
In the thank you page (where you are redirecting after the form is submitted), add the following snippet of code right after the Viral Loops campaign snippet:
<script>
campaign.identify({
email: conversion['email'],
firstname: conversion['firstname'],
lastname: conversion['lastname']
});
</script>
If you are not capturing the first name or last name, you should modify the above script like so:
<script>
campaign.identify({
email: conversion['email']
});
</script>
In the thank you page, you should also embed the Form Widget by adding a custom HTML block and pasting this code in it:
<div data-vl-widget="embedForm"></div>
Using this widget your participants will be able to invite their friends.
If you want, you can also embed other widgets in that page, such as the Milestone Widget (if you are using the Milestone Referral):
<div data-vl-widget="milestoneWidget"></div>
or the Rewards Widget (for the Refer a Friend template):
<div data-vl-widget="rewardStats"></div>
The Tempting Giveaway - Startup Pre-launch - Leaderboard Giveaway
If you are using any of these templates, add the following snippet of code in the thank you page, after the Viral Loops campaign snippet:
<script>
VL.options.form_fields.form_firstName = conversion['firstname'];
VL.options.form_fields.form_email = conversion['email']
VL.options.form_fields.form_lastName = conversion['lastname']
VL.createLead(function() {
VL.openModal();
});
</script>
That way, as soon as the visitor submits your form and gets to the thank you page, they will be submitted to Viral Loops and see the Viral Loops popup with the sharing options they will use to invite their friends.
If you are not capturing the first or last name for your participants, adjust the above script as follows:
<script>
VL.options.form_fields.form_email = conversion['email']
VL.createLead(function() {
VL.openModal();
});
</script>
In this page (the thank you page), make sure you have also added the popup trigger by adding a custom HTML block and pasting this code in it:
<div data-vl-widget="popupTrigger"></div>
This can be used to open the Viral Loops popup. You can customise the look and text of that button from the Installation step of the Campaign Wizard in Viral Loops, under the Custom Built tab.
That's all!
By following these instructions the visitors that come to your Landingi page will use your form to submit their details to you and then they will automatically join the Viral Loops campaign and see the sharing options for inviting their friends.
Did this article help you? Let us know! 😊