Create custom unsubscribe page

Introduction

Exponea has its own unsubscribe page with a custom link for each customer. Customers can subscribe to and unsubscribe from different campaign groups. However, it is also possible to mimic the unsubscribe functionality on your own domain with your own style. You will have to create a new page, where you will be able to customize the HTML and personalize it with Exponea using the guide below.

Functionality

It is necessary for each sent email to contain a valid link to an unsubscribe page. In order to display exactly what should be displayed to each customer, an Exponea HTML feature can be used.

Our HTML campaign feature lets you write or copy & paste HTML code. This HTML code will be shown on any webpage of your choice, where a short code snippet is located – in this case the unsubscribe page. This snippet is located under the HTML modifying window.

Snímka

Thanks to this snippet, Jinja documentation can be used to personalize HTML for each customer according to their attributes, metrics etc. You only need to select the attribute to be used and then put it into your code.

Snímka-1

If the ‘exponea.showHtml’ function is used, JavaScript will automatically show the attribute on the webpage where you put it. In this case, we want to use the ‘exponea.getHtml’ function which only gets attribute information from Exponea and you can continue working with it. In this case you need to:


Create and Execute a scenario

Create a Scenario triggered daily and on every ‘session_start’ for customers with ’email has value’

Snímka

In HTML unsubscribe page action, the following HTML is the one we want to set for each customer:

{
  "email": {{ customer.email | json }},
  "unsubscribed_from": {{ customer.unsubscribed_from | json }}
}

Create your custom unsubscribe page

You can use (and modify) the following example for your unsubscribe page:

Note: when sending email, you need to enable transfer identity to your custom unsubscribe page.

<html>
<title>Customized unsubscribe page</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script>!function(i,t){function e(e){return function(){var n=arguments;if("initialize"==e&&n&&n[0].modify&&n[0].modify.overlay&&"loading"==t.readyState){var a="__inf__overlay__";t.write('<div id="'+a+'" style="position:absolute;background:#fff;left:0;top:0;width:100%;height:100%;z-index:1000000"></div>'),setTimeout(function(){var e=t.getElementById(a);e&&t.body.removeChild(e),i.exponea.__=!0},n[0].modify.delay||500)}this._.push([e,arguments])}}if(!i.exponea){var n,a,o="initialize identify update track trackLink trackEnhancedEcommerce getHtml showHtml showBanner showForm ping getAbTest getRecommendation".split(" "),r=t.createElement("script"),d="https:"===t.location.protocol?"https:":"http:";for(i.exponea={_:[]},a=0;a<o.length;a++)n=o[a],i.exponea[n]=e(n);r.type="text/javascript",r.async=!0,r.src=d+"//devapi.infinario.com/js/exponea.min.js",t.getElementsByTagName("head")[0].appendChild(r)}}(window,document);</script>
<script type="text/javascript">
exponea.initialize({
        "token": "YOUR TOKEN",
        "track": { "visits": true }
});
exponea.getHtml("Unsubscribe page", function(data) {
    if(!data) {
        // print error if data is empty
        // this usually happens when customer is not identified or has not set HTML in scenario
        $('#communication_groups').text("Error: Could not load settings");
        return;
    }

    // try parse current settings
    var settings = JSON.parse(data);
    // clear loading text
    $('#communication_groups').text("");

    // print email for which we are showing the message
    $('#user_id').text(settings.email);
    
    // init unsubscribed if null
    if(!settings.unsubscribed_from) {
        settings.unsubscribed_from = [];
    }
       
    // declare all communication groups here:
    var communication_groups = ["Newsletter", "Special offers", "Onboarding and howtos"];

    // iterate over all groups and print a checkbox
    for(var key in communication_groups) {
        var group = communication_groups[key];
        var form_item = $('<div>'
            + '<label for="group_'+group+'">'+group+':</label>'
            + '<input type="checkbox" id="group_'+group+'" name="'+group+'" value="'+group+'" />'
            + '</div>');
        if(settings.unsubscribed_from.indexOf(group) == -1) {
            var checkbox = form_item.find('input[name="'+group+'"]');
            checkbox.attr("checked", "checked");
        }
        $('#communication_groups').append(form_item);
    }
    $('#btn_subscriptions_update').click(function(evt) {
        var all_checkboxes = $('#communication_groups input[type="checkbox"]');
        var customer_attributes = { unsubscribed_from: [] };
        var event_properties = { new_unsubscribed: [], unsubscribed_from_all: false, new_subscribed: [] };
        $.each(all_checkboxes, function(index, checkbox) {
            var group = checkbox.name;
            var inOldUnsubscribed = settings.unsubscribed_from.indexOf(group) >= 0;
            if(!checkbox.checked) { // customer wants to unsubscribe from current group
                customer_attributes.unsubscribed_from.push(group);
                if(!inOldUnsubscribed) {
                    // old settings did not contain this group
                    event_properties.new_unsubscribed.push(group);
                }
            } else { // customer wants to subscribe
                if(inOldUnsubscribed) {
                    // old settings contained this group
                    event_properties.new_subscribed.push(group);
                    customer_attributes.unsubscribed = false;
                }
            }
        });
        // track event subscriptions_changed
        exponea.track("subscriptions_changed", event_properties);
        // update customer's attributes
        exponea.update(customer_attributes);
    });
    $('#btn_unsubscribe_all').click(function(evt) {
        exponea.track("subscriptions_changed", { unsubscribed_from_all: true });
        exponea.update({ unsubscribed_from: communication_groups });
    });
});
</script>
<body>
    <form method="GET">
        <h1>Email Subscriptions for <span id="user_id"></span></h1>
        <h2>You are subscribed to these Communication groups:</h2>
        <div id="communication_groups">Loading settings ...        
        </div>
        <input id="btn_subscriptions_update" name="subscriptions_update" type="submit" value="Update subscription settings" />
        <input id="btn_unsubscribe_all" name="unsubscibe_all" type="submit" value="Unsubscribe from all" />
    </form>
</body>

</html>