The milestone template comes out of the box with a Form Widget that you can embed in your page and be up and running in minutes.

You can easily customize it to your needs through your campaign wizard.

But sometimes that's not enough. You might need a completely different design to better promote your brand or maybe you have a deeper integration in mind.

For cases like these, you can use a bit of javascript to plug in your custom form.

Steps

  1. Add the campaign snippet before the closing body tag

    2. After your form is submitted, run the following:

campaign.identify({
    firstname: "the user's first name",
    lastname: "the user's last name",
    email: "the user's e-mail",
    "extraData": { "internal-ID": "1234", "favourite-colour": "blue" }
}, function() {
    /* optional callback */
});

Notes:

  • The firstname, lastname, email values are taken from your form.
  • firstname and lastname are optional.
  • The extra data are other data you want to capture about the participant. These are only visible on a special campaign export that we provide on demand.

Unfortunately, most CMSs (like Unbounce, Lead Pages, Instapage, Squarespace etc.) don’t allow you to run custom code after form submission so this solution won’t work on these platforms. Most form plugins on WordPress also don’t have this option (if you have found one that does, let us know!).

Sharing the link

Bear in mind that even if you skip using the Form Widget to capture participations for your campaign, you will still need to add it somewhere else on your website as it’s the only widget through which participants can get their unique link and invite others. 

In order to do that, you need to add the campaign snippet and Form Widget on any page you want to redirect them to. If you don't need to redirect them on a separate page then, you don't need to do anything else. As soon as the campaign.identify code runs, participants will get the Sharing State of the Widget and thus, their unique sharing link.

API integration

If you want to register the new participants over the API, use this API call:

POST https://app.viral-loops.com/api/v2/events

 A header Content-Type: application/json is needed.

With request parameters:

{
    "apiToken":"MY_TOKEN",
    "params":{
        "event":"registration",
        "user":{
            "firstname": "the user's firstname",
            "lastname": "the user's lastname",
            "email":"the user's email",
            "extraData": { "internalID": "1234" }
        },
        "referrer":{
            "referralCode": "the referrer's referralCode (if available)"
        },
        "refSource": "the refSource (if available)"
    }
}
  • The apiToken is availabe in the installation step of the campaign wizard.
  • firstname and lastname are optional
  • the referrer and the refSource can be omitted if not available(the user didn’t come from a referral)
  • You can call it after a successful login as well so old users can still join the campaign.
  • The referralCode or the referralEmail of the referrer and the refSource will be available in the query string of your page when a user lands there from a referral invite. You will need to capture them and use them in the above call so the referrer can be properly rewarded.

The response would be:

{
  "referralCode": "rJdfjKY-b",
  "eventId": "evt_ZWE4NmUyMjQzOWRkN2ZjZWQ4ZDA"
}

The referralCode of the new participant will be returned along with the eventId of the transaction.

GDPR consent

If you want to capture GDPR consent as well, use the following:

{

    "apiToken":"MY_TOKEN",

    "params":{

        "event":"registration",

        "user":{

            "firstname": "the user's firstname",

            "lastname": "the user's lastname",

            "email":"the user's email",

            "extraData": { "internalID": "1234" },

            "consents": {

              "2": true // 2 is the ID of the consent.

            }

        },

        "referrer":{

            "referralCode": "the referrer's referralCode (if available)"

        },

        "refSource": "the refSource (if available)"

    }

}

Consent ID

GDPR consents can be added and enabled in the Settings page of the app. The consent ID is displayed here:

Live Example

Check a full example here with the complete code using bootstrap and jQuery.

📄 Note: This article is mainly to be followed for custom built websites and does not apply to landing page platforms with certain limitations/restrictions (e.g. Squarespace, Wix etc.) 

Did this answer your question?