All Collections
NovelPass
How to embed your wallet pass link on a Loyalty Page or Customer Portal
How to embed your wallet pass link on a Loyalty Page or Customer Portal
Ismail Pathan avatar
Written by Ismail Pathan
Updated over a week ago

While you're always able to add your general pass install link to your website (www.[yourbrand].novel.com), you have the ability to remove the email authentication step when customers are already logged into their customer account via a small amount of dev work. Doing this allows for a flow similar to Klaviyo where your customer can add your wallet pass via a one click install.

If you run into any issues or have questions, please reach out via the chat bubble and I'd be happy to help!

Here's what you need to do:

  1. Insert the Apple and Google Assets on your webpage (found at the bottom of this article)

  2. Add the HTML attribute data-novel-pass-install to the element you would like to trigger installing the pass. Typically, this would be the Add to Apple Wallet and Add to Google Wallet buttons as is shown in the example below:

    <button data-novel-pass-install> 
    <img src="https://cdn.shopify.com/s/files/1/0079/4289/7737/files/image_33.png?v=1685537112">
    </button>

    <button data-novel-pass-install>
    <img src="https://cdn.shopify.com/s/files/1/0079/4289/7737/files/image_34.png?v=1685537112">
    </button>

How it works:

Our app will hook onto any HTML element that has the data-novel-pass-install HTML attribute.

Once our script is loaded we will add the CSS class _ _novel-pass-install-button-trigger-loaded_ _ to each element with the data-novel-pass-install attribute (and this is also when it becomes clickable)


This CSS class allows your developer to have styling applied while we are loading (such as the HTML element/button being semi-transparent) which may change once our script has loaded and the element becomes clickable.

Assets:


โ€‹

Did this answer your question?