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);
Hook Name | Runs When |
---|---|
boot | The campaign is available |
ready | The campaign is available |
widgetLoad | The widget with id widgetId is loaded |
widgetsLoad | Every widget in the page is loaded |
formSubmit | The identify method has run and any client integration is completed |
stageChange | The widget state changes, eg from the Form State to the Sharing State |
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>
Updated 28 days ago