How to create and customize a Klaviyo unsubscribe page

  • 18 July 2022
  • 0 replies
  • 38 views

Userlevel 6
Badge +50

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.

 

Once activated, you will see a link to it in your navigation menu.

DrrCbZ0KyZfy-bkWzdj327rRqr_d9R6KyzM9OXdz418Sr-XbnP9KBhZ_1u3cjmrqOn0GnVnPaXTvdqRuNklZ8gN7XhbQ_1Dh9DFgYGdGytW2dCqaaGuH-7nMVNPgaG9XAIVcO06pndSFVy8l6nc

 

Create an unsubscribe page

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

m2f0sIH26xfcIvRlKRS8-5sHiXsMJMcuM2ye89P_G1IdYM1xW1auE3erf58W_LLTsf_yEmppsK7FE30cDZ6ZbYLJve7i9kJr3Q07U6zbk6D2fSaADBPsDmRPc9Vv4Vp2O7-JD90dKnq_ecjjOxY

You should then see something like this

P0GOC1PA9rhp3m9ONaD2D1SGFWnTi8YMZ6wVnKoMap-FOxA74HIJSqscQSDmCvi42vS5FAf3K1ZxSBTXWHixb6brdXARvHQAAh1H8pP9c6STyrloc8CGSReP4y0q8bzMcX8sXdroOPhU1s1705k

 

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

6ZimghOkreCuUjjX_wuqPmUIAxP5-u-iEddp747lxoc7KqFPi3wvKNX5Im7-78lXGjvlkPX28VGCsEr0Pk7YlY2GdqmIECn0-pYakN47d7aD6dk1v6aQUNejQIwgBRX2VURkWH3BO-4-wJ-nqDw

 

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

gMFmMOKqYPUXNeVJkftlwXjb4S8uCKUWMmWxqzScnP_IPNgt9OMhZmOSVoEsQSxkmS_OoAyA2_OAG_qJKNuHYvDb_b_4oWMImbgApRsODme6gTM1K_0FTpUgT-1DQ_t5qLeZaGhmeD-Ez9QTEfo

 

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.

ZpIPTvelI-422Ho3KXhTnXsa6Mnjde2iQqmno-FBwHuxd2lXRdbf60MNKh_xXgoJle_TAwbwL_Fhmt9J55OKuVvjj83H1okJCZVRYh-gHO--RFFdIBPwFPws2Tby03laqtNvfUvMEBTtBxmY4Hk

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”

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

QtMDz5QZxaoq5JnCe2EiYkPruFtmDZEilYXfgjk2CMY5K4zmTNwUhFLWsyhpvsAaRnfvKEfHRFOqvPlyOjrh6L9h4B9Rlo0uwUuVsus3r8tXYFbI1-Nu7fJSjt3JvTg1WWxGxUGEPK-bTcR2scg

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

V-KWMTGfEZaCU2BKcb9ypm1U25lxBY3XhtC-lSy0OxydGT9RJyWqWgWKQBwBq1iorXuXPFqY0hFVEhExfvd3Jxvc1VqT6Qg8jDJT3-zvovut2RCgiOyrqPq0XJTB4f-ywpz_NipQtnzsqGnZ2wE

 

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.

METZOdmAf64o36K_FPVlTHIcDMXKoV1Zk5yXArarQXMS0_jI3_UCekLfC1NBwqkCLgKD6zGKnX7dG58YECm9MyUPfonNZcnOKLRAx9TRfXum-GOCz2crA8A9AFXy12kMRmTPnOA2iZSEduhw2Ck

 

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

cmneqHGb5tPp406Mfc-wqs7-OnbVHbE7yGZglW2UAOA-HkIjQJtoXvXsAoSHgtR9JDus-AYdTnzJfaRNNmaKTsDX7pcaRfrtT7MgfnMhoFO0KcSjgdN4a-hiGXdMHhgZyk7lOw83CATxCqPkBYw

 

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

vQW5je3M_IaawisOl_cgwTy_UOHOXK0FUsZsB3LhQc5BoM_qyz552NcCeG0mdb126SQBBz6lMjt_6fV5wBUglNMl4vuDXbzg3gXBXptC3ZQKhIXLqDH4zes4jjgS7K1rEqwWeKF11jGLGI4I4nM

 

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.

rj1Q5TzjpLPefM87F2d2G5fdWihEYBO2GTEWSLuGWzRbkX_tzlbT3gkq3ByFUgvBQFdgpLVcMdsk2KcynBt3jbcmz3aVp5vJF-zzHvN-hsfzhvI-bxEdhvUs87XeK_TzellBUcX-PXTeqr7K2iA

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

 

You should end up with something like below

73LYEsLQfIDO-ZDDh5Y9bLi-U8S00p0bbznXkRiwkK7lXCPlaZfyACZgMo7NW_7VLupt7gOZRh6MqprtlOBDwoRFRm2wtOpv0zovZc0D-rz_6jIfHe-Ed9g9H8XVHKfg-5oYtbTRDr4nX3-YCOQ

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.

GgSGoVPAEi70GIpzZ9LurfN9HKWw2Bypv9AaTCv0m1zMCoWlAkslINg7AtJu-j3WTnIzJxBLqP4zrbUMrvJMCfDcToNsNa7jHrhcPUa0J4P3auXJR8_h4UR_kXYFRN8y8vmwjEnwnKQLDgoTWLA

 

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


0 replies

Be the first to reply!

Reply