Create a Custom Unsubscribe or Manage Preferences Page

Overview

Note

To build a custom unsubscribe or manage preferences page, you'll need to use our Hosted Pages feature. This is available to our customers on the Growth or Professional Plan. To request access to this feature, please email success@klaviyo.com.

Klaviyo's hosted pages can be used to design a custom unsubscribe page and/or manage preferences center. With this feature, you can build more sophisticated forms to collect extensive information about your subscribers for segmenting and targeting purposes. 

Hosted pages give you a blank slate and allow you to custom code your own forms. We then make it easy to use these custom pages in Klaviyo by hosting them for you and providing ways to swap out our default pages for your customized ones.

Create a Custom Unsubscribe or Manage Preferences Page

To create a custom unsubscribe or manage preferences page, navigate to the Hosted Pages tab in your account. If you don't see this tab, email success@klaviyo.com to have this enabled. Once inside the Hosted Pages tab, go to Pages and click Add a New Page. Name this unsubscribe.tmpl. You will be able to use this for both your unsubscribe page and manage preferences page, but you can create more than one page if you'd like.

You can then design an HTML page that includes the fields and features of your choice. Example fields that can be inserted for a custom unsubscribe page:

Choices for email frequency:

  • An option to unsubscribe
  • An option to receive all email
  • Frequency options for daily, weekly, monthly, etc. newsletters

Information that could be used to target and segment, e.g.:

  • A checkbox for whether or not the user wants sale announcements
  • A checkbox for whether or not the user wants product announcements
  • A checkbox for whether or not the user wants blog updates
  • Other lists the user may want to join

To get started, here is a basic HTML template that includes:

  • The email frequency hidden field
  • Radio buttons with values for daily, weekly, and monthly frequencies
  • Radio button with the value of "$unsubscribe" which, when the form is submitted, will unsubscribe that user
  • Submit button to submit the form to Klaviyo

You can use this code in your unsubscribe.tmpl to get a fully functional, unstyled unsubscribe page:

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <meta content="width=device-width, maximum-scale=1.0, initial-scale=1.0" name="viewport" />
 </head>
 <body>
    <div>
      <h3>My Subscriptions</h3>
      <p>Before you unsubscribe, here are a list of options to recieve e-mail at a different volume than normal.</p>
    <div>
    <form action="" method="POST">
       <input type="hidden" name="$fields" value="EmailFrequency" />
       <input checked="checked" id="email_frequency_daily" name="EmailFrequency" type="radio" value="Daily"/>
       <label for="email_frequency_daily"><span></span>I would like to recieve email daily.</label><br />
       <input id="email_frequency_weekly" name="EmailFrequency" type="radio" value="Weekly" />
       <label for="email_frequency_weekly"><span></span>I would like weekly updates.</label><br />
       <input id="regular" name="EmailFrequency" type="radio" value="All" />
       <label for="regular"><span></span>I want to receive all emails.</label><br />
       <input id="email_frequency_unsubscribe" name="EmailFrequency" type="radio" value="$unsubscribe" /> 
       <label for="email_frequency_unsubscribe"><span></span>I would like to unsubscribe from emails completely</label><br />
       <button type="submit">Update Preferences</button>
   </form>
   </div>
   </div>
 </body>
</html>

Set a Form's Redirect After Submission (Optional)

By default, after a form is submitted successfully, the user will be redirected. If they've requested to unsubscribe, the user will be sent to the global "Unsubscribe Confirmation" page in your Klaviyo account. If they've updated their profile (or done anything that's not an unsubscribe request), the user will be sent to the global "Preferences Confirmation" page.

If you want to customize where someone is redirected to, you can add a hidden input to your form with the name of the field being the redirect type, and the value of the field being the URL you want to redirect users to. The two field names are:

  • $unsubscribed_url: custom URL to redirect to after someone unsubscribes
  • $updated_profile_url: custom URL to redirect to after someone updates their profile

Using the Custom Unsubscribe Page

For each Klaviyo list that you want to use a custom unsubscribe or manage preferences page for, you'll have to configure the list to use your custom page instead of the default. Additionally, if you would like to use a custom for flow emails campaigns sent to a segment, you will have to switch your default email forms unsubscribe/preferences pages to use your custom pages instead of the default:

  • Any email that's sent to a specific list will use the opt-in related forms customized for that list
  • Any email that is NOT sent to a specific list -- i.e. behavior-triggered flow emails or campaigns sent to a segment -- your default email forms will be used

If you want to use a custom unsubscribe and/or preferences page for every email sent, you will want to follow these steps for every list as well as your default email forms.

  1. Navigate to a list you want to connect to your custom pages
  2. Click Subscribe Pages > View All Pages to get a list of all opt-in related pages you can modify
  3. Under the "Unsubscribe" and "Preferences" pages, you will see a Use Custom Page option

    2017-05-22_10-38-32.png
  4. When you click this, a dialog window will appear. Select your custom page file and click Save Settings.

In your emails, use should still use the standard Klaviyo unsubscribe and manage preferences tags. These tags will populate as links in your live emails, and will automatically bring recipients to your custom pages if you've configured them correctly.

Adding Custom Assets to Hosted Pages

If you want to use your own CSS file, image, or other custom assets on your hosted page, upload them into your Klaviyo account and reference them in the source code of the page.

Use the following tag to reference an asset you've uploaded to your Klaviyo account: {% asset_url 'myCustomStyles.css' %}

hosted_pages.png

FAQ about Hosted Pages

Do I need to add any JavaScript to my page for this form to submit properly?
Since your custom forms will be contained inside of a hosted page, you don't have to add any extra JavaScript or an action URL to the <form> to make it submit properly. As long as a hosted page is visited from an email sent via Klaviyo, it will automatically tie back to the correct contact.

Does this page have to be in HTML?
This page must be in HTML. You can include additional images, stylesheets, etc., either by linking to them or by adding a folder of included files. 

Can Klaviyo help me build a custom page?
Klaviyo does not currently offer services to help build out custom code, nor do we provide support for custom code troubleshooting. The Hosted Pages feature is meant to provide a blank slate for developers or code savvy marketers.

Was this article helpful?
0 out of 2 found this helpful