CleverTapWebsiteExample/email_unsubscribe.html at master · parthdani/CleverTapWebsiteExample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

<!-- saved from url=(0055)http://static.clevertap.com/docs/email-unsubscribe.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Unsubscribe from email</title>

    <script type="text/javascript">
     var clevertap = {event:[], profile:[], account:[], onUserLogin:[], notifications:[], privacy:[]};
 // replace with the CLEVERTAP_ACCOUNT_ID with the actual ACCOUNT ID value from your Dashboard -> Settings page
clevertap.account.push({"id": "4R6-8Z4-965Z"});
clevertap.privacy.push({optOut: false}); //set the flag to true, if the user of the device opts out of sharing their data
clevertap.privacy.push({useIP: false}); //set the flag to true, if the user agrees to share their IP data
 (function () {
         var wzrk = document.createElement('script');
         wzrk.type = 'text/javascript';
         wzrk.async = true;
         wzrk.src = ('https:' == document.location.protocol ? 'https://d2r1yp2w7bby2u.cloudfront.net' : 'http://static.clevertap.com') + '/js/a.js';
         var s = document.getElementsByTagName('script')[0];
         s.parentNode.insertBefore(wzrk, s);
  })();
</script>


</head>

<body data-new-gr-c-s-check-loaded="14.984.0" data-gr-ext-installed="">


    <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>


<input type="hidden" id="hippowiz-ass-injected" value="true"><input type="hidden" id="hvmessage-toextension-listener" value="none"></body></html>