Salesforce Marketing Cloud

Custom Unsubscribe Cloud Page in Salesforce Marketing Cloud

While receiving emails, you must have checked the Unsubscribe link in the emails that redirect you to a page where you opt-out from receiving emails from the person/company.

In Salesforce Marketing Cloud, we also have an Unsubscribe page that Marketing Cloud provides us with standard functionality and UI. But, thanks to Landing pages, we can customize our Unsubscribe page by creating a total custom Unsubscribe page using a cloud page.

Navigate to Web Studio > Cloud Page > Create a Collection > Create a Landing page

You can select code view or design view as per your choice.

Our cloud page will have two pages, on the first one we have the option to select to Unsubscribe and after submitting, subscribers will be redirected to the next page.

First Page:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Opt Out</title>
        <link rel="stylesheet" href="https://pub.s11.exacttarget.com/3yg2cjewde5" type="text/css">
    </head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(document).ready(function () { });
            function myFunction() {
            var checkBox = document.getElementById("myCheck");
            if (checkBox.checked == true){}
            else {
                event.preventDefault();
                alert("Please confirm for Unsubscribe");
            }
        }
    </script> 
<body>
    <form method="post" action="https://pub.s11.exacttarget.com/uq5rjteeig4?jobid=%%jobid%%&amp;listid=%%listid%%">
        <div class="center">
            <img class="image" src="https://image.s11.sfmc-content.com/lib/fe3815717564047b7c1270/m/1/15dd9635-fdd0-478b-9c36-fa14172427f7.jpg" alt="Algoworks">
        </div>
        <h1 class="center">We're sorry to see you go!</h1><br/>
        <div class="center">
            <p id="paragraph">Please check the checkbox and Submit it if you want to Unsubscribe from our emails</p>
        </div>
        <br/><br/>
        <div class="center">
            <input type="checkbox" id="myCheck">&nbsp;Unsubscribe<br><br>
            <input type="submit" class="button" value="unsubscribe" onclick="myFunction()">
            <input type="hidden" id="SubKey" name="SubKey" value="%%_subscriberkey%%">
        </div>
    </form>
</body>
</html>

dont miss out iconDon't forget to check out: Salesforce Marketing Cloud Connect: View Full Resolution Emails in Sales or Service Cloud

Second Page:

%%[
set @SubKey= requestparameter("SubKey")*/
set @jid= requestparameter("jobid")
set @listid= requestparameter("listid")
Set @lue = CreateObject("ExecuteRequest")
SetObjectProperty(@lue,"Name","LogUnsubEvent")
Set @lue_prop = CreateObject("APIProperty")                 
SetObjectProperty(@lue_prop, "Name", "SubscriberKey")
SetObjectProperty(@lue_prop, "Value", @SubKey)
AddObjectArrayItem(@lue, "Parameters", @lue_prop)
Set @lue_prop = CreateObject("APIProperty")
SetObjectProperty(@lue_prop, "Name", "JobID")
SetObjectProperty(@lue_prop, "Value", @jid)
AddObjectArrayItem(@lue, "Parameters", @lue_prop)
Set @lue_prop = CreateObject("APIProperty")
SetObjectProperty(@lue_prop, "Name", "ListID")
SetObjectProperty(@lue_prop, "Value", @listid)
AddObjectArrayItem(@lue, "Parameters", @lue_prop)
set @lue_prop = CreateObject("APIProperty")
SetObjectProperty(@lue_prop, "Name", "Reason")
SetObjectProperty(@lue_prop, "Value", @reason)
AddObjectArrayItem(@lue, "Parameters", @lue_prop)
Set @lue_statusCode = InvokeExecute(@lue, @overallStatus, @requestId)
Set @Response = Row(@lue_statusCode, 1)
Set @Status = Field(@Response,"StatusMessage")
Set @Error = Field(@Response,"ErrorCode")
]%%
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Processing Page</title>
        <link rel="stylesheet" href="https://pub.s11.exacttarget.com/3yg2cjewde5" type="text/css">
        <style>
            body {
                background: #1F222E;
            }
        </style>
    </head>
    <body>
        <div>
            <h1 class="center" style="color:#ffffff; text-align:center">You are successfully unsubscribed.</h1>
        <div>
    </body>
</html>

I have attached a CSS stylesheet with the cloud page as well by creating a code resource in the same collection.

CSS:

@charset "UTF-8";
/* CSS Document */
body{
    background-color: #1F222E;
    font-family:Open Sans, Arial, Sans;
}
.center{
    text-align:center;
    color:#fff;
}
.image{
    max-height: 300px;
    disply: block;
    margin-left:auto;
    Margin-right:auto;
    text-align:center;
}
.button{
    padding:20px;
    border-radius:5px;
    background-color: #f89904;
    border-color: #f89904;
    color:#fff;
    font-weight:bold;
    text-transform:uppercase;
    font-size:16px;
}
.button:hover{
    padding:20px;
    border-radius:5px;
    background-color: #ffc56a;
    border-color: #f89904;
    color:#E2E2E2;
    font-weight:bold;
    text-transform:uppercase;
    font-size:16px;
}
.button:active{
    padding:20px;
    border-radius:5px;
    background-color: #1F222E;
    border-color: #f89904;
    color:#E2E2E2;
    font-weight:bold;
    text-transform:uppercase;
    font-size:16px;
}
#paragraph{
    max-wdith:75%;
    padding-left:15%;
    padding-right:15%;
    margin-left:auto;
    margin-right:auto;
}

dont miss out iconCheck out another amazing blog by Udit here: Salesforce Marketing Cloud Automation Studio and Its Activities

After Saving and Publishing the page, you will now be able to use it in the content builder within templates and the Subscriber who is going to redirected to this Landing page will get Unsubscribed successfully from the respective Business Unit.

Responses

Popular Salesforce Blogs