Here's how to install your Startup Pre-launch, Tempting Giveaway or Leaderboard Giveaway campaign on Instapage and having your campaign participants use one of your existing forms to join the campaign.
First off, you need a page in your website with the form that your participants will be using. This is going to be your Registration page.
Step 1: Your form
The URL of the Registration page is what you need to use in your campaign settings as the sign-up page for your website. You set this up when you were creating your campaign, at the Info step of your campaign wizard.
Step 2: Your campaign Javascript snippet
While editing this page, go to Settings > JavaScript > Footer and paste there the Javascript snippet for your campaign.
Edit your campaign and get this Javascript snippet from the Installation step of your campaign wizard in Viral Loops.
Step 3: Submitting data to Viral Loops
Now, we need to make sure that the data your visitors submit using your form, is also sent to Viral Loops.
While editing your page, click on Settings and then JavaScript. In the Header section add the following code:
window.instapageFormSubmitSuccess = function(form)
{
// get values from form fields
var param1 = ijQuery(form).find('input[name="'+ base64_encode('First Name' ) +'"]').val();
var param2 = ijQuery(form).find('input[name="'+ base64_encode('Email' ) +'"]').val();
var param3 = ijQuery(form).find('input[name="'+ base64_encode('Last Name') +'"]').val();
// Get the actual redirect url
var redirect_url = ijQuery(form).find('input[name="redirect"]' ).val();
// Amend redirect url in form by adding fields from form
ijQuery(form).find('input[name="redirect"]').val(redirect_url + '?firstname='+ param1 + '&email='+ param2 + '&lastname=' + param3 + '&autoDetect=1');
}
Your form should necessarily submit to Viral Loops at least the following two pieces of information:
First Name
Email
That means that these two inputs should exist in your form.
The script above relies on the placeholder texts of your form in order to work. You can see they are reflected in the script above.
Need to use different labels?
Not a problem. Just go back to edit the JavaScript you just added in Settings > JavaScript > Header and change these values too, to whatever you have named your form inputs:
For example, if you wanted to use greek, it would be like so:
// nothing changes before that part
var param1 = ijQuery(form).find( 'input[name="'+ base64_encode('Όνομα') +'"]').val();
var param2 = ijQuery(form).find('input[name="'+ base64_encode('Email') +'"]').val();
var param3 = ijQuery(form).find('input[name="'+ base64_encode('Επώνυμο') +'"]').val();
// nothing changes after that part
Alright, then click Done on the top right corner of the screen and go ahead and publish these changes.
Step 4: Add the main javascript snippet again
After your visitors sign-up they should be redirected to a different page where they can see their unique link and invite their friends. Let's call that the Referral page.
So, while editing your Referral page make sure you to go to Settings > JavaScript > Footer and also paste there the Javascript snippet for your campaign. Unless you do that the participation will not be registered in Viral Loops even if the form is submitted.
As before, you can get that from the Installation step of your campaign wizard.
Step 5: Triggering the popup
When participants reach the Referral page they should see the Viral Loops popup through which they get their unique link and invite their friend.
While editing your Referral page go again to Settings > JavaScript > Footer and, under the main Javascript snippet that you added earlier, add this one:
<script>
window.addEventListener('vl_ready', function(e) {
VL.openModal();
}, false)
</script>
This makes the popup open automatically as soon as the page is loaded.
If you would rather avoid using the popup at the Referral page, please refer to this documentation article: https://intercom.help/viral-loops/faq/can-i-use-viral-loops-without-using-the-popup This is not a recommended approach, though, as it's highly advanced.
Step 6: The popup trigger
In case a participant closes the popup in the Referral page, you want to offer them an option to launch it again.
On the top bar, click Add New and select HTML. A Custom HTML block was just placed in your website.
Place it where you want it in your website and click on and then click Edit. In the field that appears, add the following code:
<div data-vl-widget="popupTrigger"></div>
Save and publish your page and that's it!
Summary
Participants join the campaign using your own form created on Instapage.
They are redirected to the Referral page where the Viral Loops popup opens automatically and they can invite their friends.
Unique links redirect invitees to the registration page where they can participate too.
Need more help? Just let us know! 😀