Popup Javascript API

❗️

This has been deprecated

Click here to view the latest docs

Participation

Capture the participant's data

Use the following to capture the participant's first name:

VL.options.form_fields.form_firstName = $("#firstname").val();

Replace #firstname with the ID of the relevant form input in your form. Note that this example uses jQuery. If you don't want to use jQuery, replace with the relevant Javascript code to capture the values from the input fields.

In the same way, you should capture the participant's #email address and #lastname.

If you want to send extra data to Viral Loops, besides name and email, use the following: 

VL.extraData = {my_extra_field_1: extraField1, my_extra_field_2: extraField2, [...] }

where extraField1, extraField2 etc. correspond to values from your form.

Create Lead Method

After you 've added the participant information in the VL object, trigger the createLead method. Like this:

VL.options.form_fields.form_firstName = $("#firstname").val();
VL.options.form_fields.form_lastName =  $("#lastname").val();
VL.options.form_fields.form_email = $("#email").val();

//submit the participant to Viral Loops
VL.createLead(function() {
  //code that runs when participation is completed
});

Careful with the IDs

Notice how we've used "#firstname", "#email" etc. in the code snippet above. Make sure your form uses these IDs to capture the relevant fields otherwise this code snippet won't know where to look to find them.

Redirect after participation

You can submit the participant to Viral Loops and redirect them to your thank you page. You can do that with the following code:

VL.createLead().then(function() {
  // redirect to your thank you page
  window.location.href = "thank_you_page.html";
  });

Open the modal

The following script will open the popup automatically. Place it before the closing </body> tag and after the Javascript snippet.

When the Popup Widget is ready

<script>
window.addEventListener('vl_ready', function(e) {  
  VL.openModal();
}, false);
</script>

With a second delay

<script>
window.addEventListener('vl_ready', function(e) {
   setTimeout(function() {
       VL.openModal();
   }, 1000);
}, false);
</script>

Participant Info

The unique link of the participant can be found in the Javascript VL object: VL.options.form_copy

The partcipant rank or the number of entries, depending on the template that the campaign is created with, are available in the VL.options.lead object.

Use this example to dispay them in your HTML page:

if (VL.refCode) {    
  $("#tweet_button").attr("href", "https://twitter.com/intent/tweet?url=" + VL.options.twitterRefUrl + "&text=myTweet");    
  $("#entries").text("Your entries to the giveaway: " + VL.options.lead.entries);     
  $("#sharingUrl").text(VL.options.form_copy);
}

What is does

  • Makes the button with ID #tweet_button to open the dialog for sharing to Twitter.

  • Adds to the element with ID #entries the text "Your entries to the giveaway: XX", where XX is the participant's entries to the giveaway. Replace with a different text if you're running a Leaderboard Giveaway or Startup Pre-launch campaign.

  • Adds to the element with ID #sharingUrl the unique URL of the participant so they can copy it and share it as they please.

Trigger social actions

Social Action methods can be found the VL.popup object. If you want to create your social buttons, trigger the correct Javascript method as they are used in these HTML tags:

Facebook

<a onclick="VL.popup.share(520, 350)"><i class="fab fa-facebook-f"></i></a>

Reddit

<a onclick="VL.popup.reddit()"><i class="fab fa-reddit-alien"></i></a>

Messenger

<a onclick="VL.popup.messenger()"><i class="fab fa-facebook-messenger"></i></a>

LinkedIn

<a onclick="VL.popup.linkedin()"><i class="fab fa-linkedin-in"></i></a>

WhatsApp

<a onclick="VL.popup.whatsapp()"><i class="fab fa-whatsapp"></i></a>

Invite by email

Use this function to allow your participants to share their unique link via email directly to their friends:

function addEmailButton() {  
    var emailSharingButton = document.createElement("button");  
    emailSharingButton.innerHTML = "Invite others";            
    emailSharingButton.onclick = function() {
      window.open(VL.popup.sharingOptions.mailLink, "_blank")
      VL.popup.email();
  };  
  document.body.appendChild(emailSharingButton);
}

The addEmailButton function creates a button that opens the participant's native email client so they can invite their friends. It also triggers the VL.popup.email(); social action to increase the share counters of the participant.

Participant Rank & Order

The Rank & Order API is supported for the following templates:

  • The Startup Pre-launch
  • The Leaderboard Giveaway

Participant Rank & Suggestion

The rank of a participant is their current position in the leaderboard/waitlist based on their entries to the campaign.

A suggestion is also generated, prompting the participant to invite X people to climb up Y positions.

The VL.loadRankAndSuggestion will query our API, and call the callback with the requested data. It will also load these data to VL.options.lead for ease of use.

VL.loadRankAndSuggestion(VL, (err, {
    rank, entries, suggestion, suggestionText
}) => {
    if (err) console.warn(err);

    console.log("rank - position in the leaderboard/waitlist", rank);
    console.log("number of referrals brought", entries);
    console.log("suggestion data", suggestion);
    console.log("suggestion text", suggestionText);

    // values are also loaded to VL.options.lead
    console.log(VL.options.lead.rank);
    console.log(VL.options.lead.entries);
    console.log(VL.options.lead.suggestion); 
    console.log(VL.options.lead.suggestionText);
});

Participant Order

The order of a participant is the order they joined the campaign. For example if they joined the campaign first, their order will be 1.

Similarly to VL.loadRankAndSuggestion, VL.loadOrder will query our API, and call the callback with the requested data. It will also load these data to VL.options.lead for ease of use.

VL.loadOrder(VL, (err, {
    order
}) => {
    if (err) console.warn(err);

    console.log("participant registration order:", order);

    // loadOrder automatically updates VL.options.lead
    console.log(VL.options.lead.order);
});

Did this page help you?