Klaviyo provides out of the box subscribe/unsubscribe pages to get you up and running as quickly as possible. While there are tools to help you edit these pages, there are some limits. 

For example if you want to change the structure of the page, or modify certain parts of the text into a different language, you might not be able to.

To allow you to customize everything, Klaviyo has a “Hosted Pages” feature which allows you to host your very own unsubscribe page. Hosted Pages support using HTML, CSS, Javascript and our special Django templating language, giving you the power to build a completely custom page from scratch.

It can be challenging to build a page if you have limited HTML knowledge from scratch, so we are going to provide some copy and paste snippets of code below and show you exactly how to create your own hosted page.

Accessing Hosted Pages

First off, the Hosted Pages feature is only available to paid verified Klaviyo accounts, please see here on how to activate it if you do not have it already.

To enable hosted pages:

1. Click your organization name in the bottom left corner.
2. Navigate to Settings > Other > Consent pages.
   
3. Select Enable Custom Pages to turn this feature on and add the Hosted Pages tab to your account.

Create an unsubscribe page

Now that you have access, let’s create a new page and call it “unsubscribe”

You should then see something like this

Now go ahead and delete all of that text, and replace it with the code snippet below.

https://gist.github.com/robertboland1/d2055f0f0b8072824ae8f43b5ecf16c6

Click save, and then preview the page. It should look like below

You are now free to modify any of the code on this page. For example, if you wanted to change the unsubscribe button, simply edit the text here at line 143

Adding your logo

You might want to add your logo to the unsubscribe page, to this first we need to upload the logo as an “asset” or if you already have an image hosted you can use this.

Once it’s uploaded as an asset, click on the image and copy the url of it by right clicking and clicking “Copy Image Address”

Now you can change this snippet of code on lines 115 - 118 to remove the comment symbols and add in your image URL

Click save and the preview button once more, and you should have something like below

Activating Your Unsubscribe Page

Once you are happy with your unsubscribe page, you will need to activate it by selecting a “custom page” as your unsubscribe page.

You can do this by navigating to “Preference Pages” and then selecting “use custom page”. Select the new unsubscribe page you created from the popup window.

Remember, you can also have different unsubscribe pages on a list level too, so don’t forget to update your list specific unsubscribe page too.

Custom Unsubscribe Confirmation Page

The process for creating an unsubscribe confirmation page is almost identical. 

Create a new page “unsubscribe confirmation” and replace the code with the below snippet

https://gist.github.com/robertboland1/d60f9b7f97dc16084e8eb47992700fe1

Click, Save and then Preview, you should see something like below

Once you are happy with the confirmation page, there is one last step to complete.

Back in the “unsubscribe” page you made, there is an extra line of code that we need to update. This special line of code tells Klaviyo where to redirect the user after they click “Unsubscribe”

This could be to a certain page on your website, but we want to redirect to the confirmation page you just created.

Preview your confirmation page and copy the URL from your browser

Now back in your unsubscribe page we need to update a line of code with this URL. Replace the text highlighted with the URL you just copied.

Then remove the “<!--” and “-->” symbols to uncomment the code.

You should end up with something like below

Note: Make sure not to remove the ?a={{request.GET.a}} bit from the URL, this is very important!

That’s it! You should now have a template for a custom unsubscribe and unsubscribe confirmation page that you can modify if needed.

Testing

It’s always a good idea to test and make sure everything is working properly. You will need to send a real email in order for our unsubscribe links to generate properly, a test send will not work.

Simply create a list or segment with just your email address, make sure you have updated the lists unsubscribe page to use your custom page, and send yourself an email.

When you click the unsubscribe link, it should pre-populate your email address.

Further resources:

Interested in learning more about hosted pages? We have an advanced article on our developer blog for those comfortable building their own pages from scratch. https://medium.com/klaviyo-developers/solution-recipe-8-how-to-create-a-custom-multilingual-unsubscribe-and-preference-page-in-klaviyo-310137154469