Campaign Hooks

The Javascript API includes hooks - events - that are triggered when something happens. They can be used to implement custom behaviours based on the campaign or the widget loading.

Usage:
campaign.addHook(hookName, callback);

Let's see some examples on how we use them.

Two-Page Setup

If you have a two-page setup then you need to answer the following questions:

• What happens if someone goes to the first landing page again but they have already participated?

• What happens if someone for some reason lands on the second referral-dashboard page but they haven't already participated?

Case 1

Someone lands on the landing page but has already participated and is logged in. They should be redirected to the second page.

To do that, add on the first page the following script:

/* after the campaign boots */
campaign.addHook("boot", function() {
  /* if we have a logged in user */
  if (campaign.user && campaign.user.referralCode) {
      /* user has participated, let's redirect them to the dashboard
      add your page link here, but keep the userCode and autoDetect parameters so the user
      will be correctly identified on the other page as well */
      location.href = "https://mypage.com/referral-dashboard" + "?userCode=" + campaign.user.referralCode + "&autoDetect=1";
  }
});

Case 2

Someone lands on the referral dashboard page but is not logged in.

Just like before, add the following script on the second page - the referral dashboard page - to redirect them back to your landing page:

/* after the campaign boots */
campaign.addHook("boot", function() {
  /* we don't have a user */
  if (!campaign.user || (campaign.user && !campaign.user.referralCode)){
      location.href = "https://myfirstpage.com"
  }
});

Pre-populate the Form Widget

If the user info is already available in your app/website, it's possible to pre-populate them in the Form Widget. That way the user just needs to click the form submission button.

Add this script in the page where the Form Widget is placed:

<script>
var firstname = "my first";
var lastname = "my last";
var email = "[email protected]";

campaign.addHook("widgetsLoad", function() {
  campaign.widgets.getByType("embedForm").forEach(function(widget) {
    widget.execute(function(firstname, lastname, email) {
       let firstNameInput = document.getElementById("firstname");
       firstNameInput.value = firstname;
       firstNameInput.dispatchEvent(new Event("input"));
       let lastNameInput = document.getElementById("lastname");
       lastNameInput.value = lastname;
       lastNameInput.dispatchEvent(new Event("input"));
       let emailInput = document.getElementById("email");
       emailInput.value = email;
       emailInput.dispatchEvent(new Event("input"));
}, [firstname, lastname, email]);
  });
});
</script>

Pre-populate with data from URL Params

If the user info is available in the URL params, you can fetch them and send them to the widget with this script:

<script>
    function getQueryString(field, url) {
        var href = url ? url : window.location.href;
        var reg = new RegExp("[?&]" + field + "=([^&#]*)", "i");
        var string = reg.exec(href);
        return string ? decodeURIComponent(string[1]) : null;
    }

    //replace these with your actual parameter names
    var firstname = getQueryString("firstname");
    var lastname = getQueryString("lastname");
    var email = getQueryString("email");

    campaign.addHook("widgetsLoad", function () {
        campaign.widgets.getByType("embedForm").forEach(function (widget) {
            widget.execute(function (firstname, lastname, email) {
                let firstNameInput = document.getElementById("firstname");
                firstNameInput.value = firstname;
                firstNameInput.dispatchEvent(new Event("input"));
                let lastNameInput = document.getElementById("lastname");
                lastNameInput.value = lastname;
                lastNameInput.dispatchEvent(new Event("input"));
                let emailInput = document.getElementById("email");
                emailInput.value = email;
                emailInput.dispatchEvent(new Event("input"));
            }, [firstname, lastname, email]);
        });
    });
</script>