How To Set Up An Iterable Integration For A Preference Center

If you’re working on a preference center, and you want to connect it to Iterable, follow these instructions.

First, you’ll need to create a new Standard API key in Iterable.

Now head to the Integrations page in Push Planet, and create a new integration.

Select Iterable from the Integration dropdown, and create the integration.

On the next page, enter your API key and save the integration.

Head back to the Integrations page, and choose a list to use with this integration. You may also want to set up some field mapping.

Once that’s done, head back to the Pages page, and open the JS editor for the preference center you’re working on.

Add the following code on both the Desktop and Mobile versions of the page. Before adding the code, be sure to replace the comments in the code that reference your integration ID, user GUID, message types, and / or channels.

The integration ID is the three-digit number to the left of each integration on the Integrations page.

You can find your account GUID by clicking the account name:

The field ID is the ID for each field within Push Planet.


var urlStart = location.protocol + '//jsapi.azurewebsites.net';
var userGuid = ""; //the Long Alphanumeric ID //you can find this under your account section https://prnt.sc/wcbqgb
var integrationId = ""; //the Short Integer ID and this can be found in the integrations page after you create your integration with iterable https://prnt.sc/wcbrxk
var platform = "p";
var responseFormat = "jsonp";

var userListIds = [];
var lists_selected = [];
var lists_unselected = [];

var message_types_selected = [];
var message_types_unselected = [];
var message_types_possible = [];
var message_channelids_unselected = [];

var user = null;
var isNewEmail = false;

//with this function we Populate the integration data on page load for example if you subscribed to a certain message typeID we check the checkboxes that represnts that message typeID
var PopulateIterableUserDataOnPageLoad = function() {
    if (user && user.dataFields) {
        
        //MessageTypes
    //you repeat this line as many as you want make sure you replace the the the message type Id and it field id witht the box filedid
        if (!user.dataFields.unsubscribedMessageTypeIds || !user.dataFields.unsubscribedMessageTypeIds.contains(the message type Id )) document.getElementById('field id').checked = true;
    
    
   
   
   
    if (user.dataFields.emailListIds) {lists_selected = user.dataFields.emailListIds;}
    if (user.dataFields.subscribedMessageTypeIds) {message_types_selected = user.dataFields.subscribedMessageTypeIds;}
    if (user.dataFields.unsubscribedChannelIds) {message_channelids_unselected = user.dataFields.unsubscribedChannelIds;}
    if (user.dataFields.unsubscribedMessageTypeIds) {message_types_unselected = user.dataFields.unsubscribedMessageTypeIds;}

   }
};

var GetIterableUserByEmail = function() {
    var email = getUrlParam('email');
    if (!email) {
        return;
    } else {
        email = decodeURIComponent(email).toLowerCase();
    }

    var finalUrl = urlStart + '/it9nrcf8em5qe7t85c9/v1/iterable/GetUserByEmail?user_guid=' + userGuid + '&integration_id=' + integrationId + '&platform=' + platform + '&format=' + responseFormat + '&email=' + email;

    $.ajax({
        dataType: 'jsonp',
        url: finalUrl,
        success: function(data) {
            if (data && typeof data === 'object' && data !== null && data.hasOwnProperty('success') && data.success) {
                if (data.hasOwnProperty('payload') && data.payload.hasOwnProperty('user') && data.payload.user.hasOwnProperty('email')) {
                    console.log('GetUserByEmail: Found Iterable User ==>');
                    console.log(data);

                    user = data.payload.user;

                    PopulateIterableUserDataOnPageLoad();

                } else {
                    isNewEmail = true;

                    console.log('GetUserByEmail: Invalid Iterable User Payload ==>');
                    console.log(data.payload);
                }
            } else {
                console.log('GetUserByEmail: JSONP ==> failure');
                console.log(data);

            }
        },
        error: function(htmltext, textStatus, errorThrown) {
            console.log('GetUserByEmail: JSONP ==> error');
            console.log(textStatus);
        }
    });
};

var UpdateUserSubscriptions = function() {
    var email = getUrlParam('email');
    if (!email) {
        return;
    }

    //that block of code detects the user changes and chage the integration accordingly make suer you replce the field Id and it's message type id 
  //you can also repeat this block of code for differant boxes
    if (!document.getElementById('field Id').checked) {
        if (!message_types_unselected.contains(message type id)) {
            message_types_selected.splice(message_types_selected.indexOf(message type id), 1);
            message_types_unselected.push(message type id);
        }
    } else {
        if (!message_types_selected.contains(message type id)) {
            message_types_selected.push(message type id);
            message_types_unselected.splice(message_types_unselected.indexOf(message type id), 1);
        }
    }

    var subscription_json = {
        "email": email,
        "unsubscribedMessageTypeIds": message_types_unselected,
        "unsubscribedChannelIds": message_channelids_unselected,
        "emailListIds": lists_selected,
        "subscribedMessageTypeIds": message_types_selected
    };

    console.log('subscription_json ==>');
    console.log(subscription_json);

    var subscription_json_lz_encoded = LZString.compressToBase64(JSON.stringify(subscription_json));

    var finalUrl = urlStart + '/it9nrcf8em5qe7t85c9/v1/iterable/UpdateUserSubscriptions?user_guid=' + userGuid + '&integration_id=' + integrationId + '&platform=' + platform + '&format=' + responseFormat + '&subscription_json_lz_encoded=' + subscription_json_lz_encoded;

    $.ajax({
        dataType: 'jsonp',
        url: finalUrl,
        success: function(data) {
            if (data && typeof data === 'object' && data !== null && data.hasOwnProperty('success') && data.success) {
                //console.log('GetUserByEmail: JSONP ==> success message ==> ' + data.message);
                if (data.hasOwnProperty('payload')) {
                    console.log('UpdateUserSubscriptions: Found Iterable Payload ==>');
                    console.log(data.payload);
                    //SetThankYouPageDynamicValues();
                    processSubmit("", "form1");
                } else {
                    alert('There was an error updating your subscription preferences.  Please try again in a few minutes.');

                    console.log('UpdateUserSubscriptions: Invalid Iterable Result ==>');
                    console.log(data);
                }
            } else {
                console.log('UpdateUserSubscriptions: JSONP ==> failure');
            }
        },
        error: function(htmltext, textStatus, errorThrown) {
            console.log('UpdateUserSubscriptions: JSONP ==> error');
            console.log(textStatus);
        }
    });
};

var AddOrUpdateIterableUser = function(dataFields) {
    var email = getUrlParam('email');
    if (!email) {
        return;
    }

    var user_json = {
        "email": email,
        "dataFields": dataFields,
    };

  showLoading();
    user = user_json;

    var user_json_lz_encoded = LZString.compressToBase64(JSON.stringify(user_json));

    var finalUrl = urlStart + '/it9nrcf8em5qe7t85c9/v1/iterable/AddOrUpdateUser?user_guid=' + userGuid + '&integration_id=' + integrationId + '&platform=' + platform + '&format=' + responseFormat + '&user_json_lz_encoded=' + user_json_lz_encoded;

    $.ajax({
        dataType: 'jsonp',
        url: finalUrl,
        success: function(data) {
            if (data && typeof data === 'object' && data !== null && data.hasOwnProperty('success') && data.success) {
                //console.log('GetUserByEmail: JSONP ==> success message ==> ' + data.message);
                if (data.hasOwnProperty('payload')) {
                    console.log('AddOrUpdateUser: Found Iterable Payload ==>');
                    console.log(data.payload);

                    UpdateUserSubscriptions();
                } else {
                    alert('There was an error updating your profile.  Please try again in a few minutes.');

                    console.log('AddOrUpdateUser: Invalid Iterable Result ==>');
                    console.log(data);
                }
            } else {
                console.log('AddOrUpdateUser: JSONP ==> failure');
            }
        },
        error: function(htmltext, textStatus, errorThrown) {
            console.log('AddOrUpdateUser: JSONP ==> error');
            console.log(textStatus);
        }
    });
};

//on submit button we check the email exists and we push data to iterable
//fist you need to define this funciton on the page editor and connect it to the submit button https://prnt.sc/wcjli7 
window.onSaveButtonClick = function() {

    var email = getUrlParam('email');
    if (!email) {
        alert('Email is required!');
        return;
    }

  AddOrUpdateIterableUser({});
};

//here we unsub from all message type ID
window.onUnsubscribeClick = function() {
  //we need to uncheck every checkbox we have usinf this code
  //we use every box id with comma seperated for example 
  $("#field1,#field2,#field3,#field4,#field5,#field7").prop("checked", false);

  AddOrUpdateIterableUser({});
};

GetIterableUserByEmail();
Save and publish the code in the JS editor. Your preference center is now ready to go!

If you have any questions about setting this up, send us an email and we’ll be glad to help!