If you are using Amazon SES or your own SMTP gateway, you will have to follow these steps to enable your users to unsubscribe from your email notifications:

Download this email unsubscription HTML template file from our Email Unsubscribe page. You can edit and brand this template file if required.

The following is the Javascript code to be embedded on your page:

<div> 
        <h4>I want to unsubscribe from future emails</h4>
        <input type="text" id="email" readonly="readonly" />
        <br/><br/>
        <button onclick="unsubscribe()">Unsubscribe me</button><br/><br/>
        <!-- button onclick="resubscribe()">Resubscribe</button -->
    </div>


   <script> //Javascript
// Should be true only if your server is url encoding the URL on unsubscribe landing page
    var isReEncode = false
    // on  page load, fetch the email id of the user.
    window.onload = function() {
        $WZRK_WR.getEmail(isReEncode);
    };
    // will be called after the email id of the user has been fetched
    function wzrk_email_fetched(emailStr) {
        document.getElementById("email").value = emailStr;
    }
    // will be called after the subscription preferences for the user have been updated
    function wzrk_email_subscription(status) {
        //status 0 : unsubscribed, status 1 : subscribed
        // todo - you can show a success message to the user from here
        var statusLabel = 'subscribed';
        if (status == 0) {
            statusLabel = 'unsubscribed';
        }
        alert("You've been " + statusLabel);
    }
    // call this function to unsubscribe the user
    function unsubscribe(isReEncode) {
        $WZRK_WR.unSubEmail(isReEncode);
    }
    // call this function to resubscribe the user
    function resubscribe(isReEncode) {
        $WZRK_WR.subEmail(isReEncode);
    }
</script>

Subscription Groups

Subscription groups give recipients more control over the emails they want to receive by letting them opt out of messages from a particular group. This helps get the right messages to your recipient's inbox, enhancing your sending reputation.

<div>    
    <h4>I want to unsubscribe from future emails
    </h4>        
    <input type="text" id="email" /> 
    <br/><br/>
    <!-- Displaying unsubscribe groups in the below div once loaded -->
    <div id="unsubscribe-groups" style="display: none"></div>
    <!-- Unsubscribe groups buttont. User will click here and it should call `changeSubscriptionGroups`
        method to send the request to CleverTap. -->
    <button onclick="changeSubscriptionGroups()">Update Subscription Groups</button>    
 </div>  
 <script> 
   window.onload = function() {
        var isReEncode = false //Should be true only if your server is url encoding the URL on unsubscribe landing page     
        var withGroups = true  // Should be true if the unsubscribe groups should be displayed on the landing page.
        $WZRK_WR.getEmail(false, withGroups);
    };
    // will be called after the email id of the user has been fetched
    function wzrk_email_fetched(emailStr, profile) {
        document.getElementById("email").value = emailStr;
        if(!profile || !profile.groups || profile.groups.length === 0) {
            console.log("did not recv groups in callback");
        }
        var subscriptionGroups = profile.groups; // will be recvd only if withGroups passed true above
        $WZRK_WR.setSubscriptionGroups(subscriptionGroups); // Can also be set here and can be retrieved by calling `$WZRK_WR.getSubscriptionGroups` method
         $WZRK_WR.setUpdatedCategoryLong(profile);
        displayGroups()
    }
  function displayGroups() {
    //   Fetching groups
      var subscriptionGroups = $WZRK_WR.getSubscriptionGroups();
    //  Rendering groups in above html div
      var addList = document.getElementById('unsubscribe-groups');
            addList.style.display = 'block';
            for(var i = 0; i < subscriptionGroups.length; i++) {
                var obj = subscriptionGroups[i];
                var checkBox = document.createElement("INPUT");
                var isUnsubscribed = obj.isUnsubscribed
                checkBox.setAttribute("type", "checkbox");
                if(isUnsubscribed){
                    checkBox.setAttribute("checked", true);
                }
                checkBox.setAttribute("name", obj.name)
                checkBox.setAttribute("id", obj.name)
                checkBox.setAttribute("class", "ct-unsub-group-input-item");
                var label = document.createElement("LABEL");
                label.setAttribute("for", obj.name)
                label.innerHTML = "Unsubscribe to " + obj.name 
                addList.appendChild(label);
                addList.appendChild(checkBox);
                addList.append(document.createElement('br'));
            }
  }
// This function is used to send groups updation request. User can directly call
// `$WZRK_WR.changeSubscriptionGroups(isReencode, updatedGroups)` by passing updated groups in format specified.
   function changeSubscriptionGroups(){
    let unsubcribeGroups = [];
        var elements = document.getElementsByClassName(
            "ct-unsub-group-input-item");
        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];
            if(element.name) {
                var data = {name: element.name, isUnsubscribed: element.checked}
                unsubcribeGroups.push(data)
            }
        }
        $WZRK_WR.changeSubscriptionGroups(false, unsubcribeGroups);
     } 
    // will be called after the subscription preferences for the user have been updated
    function wzrk_email_subscription(status) {
        //status 0 : unsubscribed, status 1 : subscribed
        // todo - you can show a success message to the user from here
        var statusLabel = 'subscribed';
        if (status == 0) {
            statusLabel = 'unsubscribed';
        }
        alert("You've been " + statusLabel);
    }
 </script>

Unsubscribe groups are handled in the format as shown below where "name" is for the name of the group and "isUnsubscribed" is for subscription status of the group.

{
var groupsExample = [
{name: "group1", isUnsubscribed: false}, 
{name: "group2", isUnsubscribed: true}
]
}

Ensure that the original JavaScript functions are retained.

Host that file on a publicly accessible server. The extension of the file could be anything, including PHP if you want to incorporate some of your backend logic.
Integrate the CleverTap JavaScript (JS) embed code, which is optimized for integration on both desktop and mobile websites. Replace CLEVERTAP_ACCOUNT_ID with your actual Account ID in the JS.
To enable the CleverTap region, add a region element to the clevertap object as shown in the following code (second line):

// Copy and paste the below code snippet inside the <head></head> section of your website

<script type="text/javascript">
     var clevertap = {event:[], profile:[],region : 'in1', account:[], onUserLogin:[], notifications:[]};
 // replace with the CLEVERTAP_ACCOUNT_ID with the actual ACCOUNT ID value from your Dashboard -> Settings page
 clevertap.account.push({"id": "CLEVERTAP_ACCOUNT_ID"});
 (function () {
		 var wzrk = document.createElement('script');
		 wzrk.type = 'text/javascript';
		 wzrk.async = true;
     wzrk.src = 'https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js';		 
     var s = document.getElementsByTagName('script')[0];
		 s.parentNode.insertBefore(wzrk, s);
  })();
</script>

<script type="text/javascript">
     var clevertap = {event:[], profile:[], region : 'sg1', account:[], onUserLogin:[], notifications:[],privacy:[]};
 clevertap.account.push({"id": "CLEVERTAP_ACCOUNT_ID"});
 (function () {
 var wzrk = document.createElement('script');
 wzrk.type = 'text/javascript';
 wzrk.async = true;
 wzrk.src = 'https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js'; 
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(wzrk, s);
  })();
</script>

<script type="text/javascript">
     var clevertap = {event:[], profile:[], region : 'us1', account:[], onUserLogin:[], notifications:[], privacy:[]};
 clevertap.account.push({"id": "CLEVERTAP_ACCOUNT_ID"});
 (function () {
 var wzrk = document.createElement('script');
 wzrk.type = 'text/javascript';
 wzrk.async = true;
 wzrk.src = 'https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js'; 
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(wzrk, s);
  })();
</script>

<script type="text/javascript">
     var clevertap = {event:[], profile:[], region : 'aps3', account:[], onUserLogin:[], notifications:[], privacy:[]};
 clevertap.account.push({"id": "CLEVERTAP_ACCOUNT_ID"});
 (function () {
 var wzrk = document.createElement('script');
 wzrk.type = 'text/javascript';
 wzrk.async = true;
 wzrk.src = 'https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js'; 
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(wzrk, s);
  })();
</script>

<script type="text/javascript">
     var clevertap = {event:[], profile:[], region : 'mec1', account:[], onUserLogin:[], notifications:[], privacy:[]};
 clevertap.account.push({"id": "CLEVERTAP_ACCOUNT_ID"});
 (function () {
 var wzrk = document.createElement('script');
 wzrk.type = 'text/javascript';
 wzrk.async = true;
 wzrk.src = 'https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js'; 
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(wzrk, s);
  })();
</script>

<script type="text/javascript">
       var clevertap = {event:[], profile:[], region : 'eu1', account:[], onUserLogin:[], notifications:[], privacy:[]};
 clevertap.account.push({"id": "CLEVERTAP_ACCOUNT_ID"});
 (function () {
 var wzrk = document.createElement('script');
 wzrk.type = 'text/javascript';
 wzrk.async = true;
 wzrk.src = 'https://d2r1yp2w7bby2u.cloudfront.net/js/clevertap.min.js'; 
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(wzrk, s);
  })();
</script>

📘
Note
Check that you have defined the correct region for your account. For more information on defining a region, see configuring a region.

Set up an email provider. To do so:
a. Navigate to Settings > Channels > Email from the CleverTap dashboard.
b. Click +Provider.
c. Select Amazon SES/SMTP.
When you are composing the email in the body, put the unsubscribe link as shown below. CleverTap replaces *|UNSUBSCRIBE|* with the actual URL of the unsubscribe page at the time of sending out the email.

<a href="*|UNSUBSCRIBE|*">Unsubscribe</a>

Unsubscription Flow

When an email notification campaign is sent out, CleverTap will automatically replace the *|UNSUBSCRIBE|* link in the body of the email with the location of your page.
When a user clicks on the unsubscribe link in your email, the user will be taken to the unsubscribe page.
After the body loads, call the $WZRK_WR.getEmail() method, which calls the wzrk_email_fetched(emailStr) method on that page when the email is fetched from the server.
Call the unsubscribe() method when the user confirms they want to unsubscribe.
You can call the resubscribe() method when the user wants to resubscribe to the email (this is only valid if the user first unsubscribed and is still on that page from the earlier link).

Troubleshooting

The unsubscription link will not work for test emails sent from the notification creation page.
Make sure that when a user lands on the unsubscription page, the URL has these parameters:

e: This contains some metadata about the user.
wzrk_ex: This is a CleverTap internal parameter.

The subscription is in effect at the account level. It means all the users linked to the email address are unsubscribed.

Handling Unsubscribes

Subscription Groups

📘
Note

Unsubscription Flow

Troubleshooting

Subscription Groups

📘Note

Unsubscription Flow

Troubleshooting

📘
Note