Implementing Offers Messaging


Custom Message HTML Tag <paze-message>

Paze provides the <paze-message> custom HTML element to render offer messaging configured for a merchant as part of Paze-specific offer campaigns. Refer to the UX Guidelines for up-to-date UX representation.

Once the Paze JavaScript SDK is loaded and the initialize() function has been called, the SDK will replace the <paze-message> tag with the configured offer message, if one exists. If no active message is configured, the tag will not be displayed.

Custom messaging will only be displayed when there is written agreement. The Merchant and Paze Merchant Team will work together to define and approve display language.

<paze-message> Attributes


message-id string Optional

The Paze-generated identifier used when multiple messages are configured (for example, A/B testing or campaign variations). Most merchants will not need to provide this attribute unless explicitly instructed by Paze.

Example: Any v4 UUID: [JR6], [JR7], [JR8], [RG9]


message-placement string Optional (default value: checkout)

Controls which configured message is selected for this element.
One of:

  • checkout
  • productPage
  • checkoutMobile
  • productPageMobile
  • cartPage
  • cartPageMobile

Example: checkout


theme dark|light Optional (default value: light)

Controls visual styling

Example: light


size small|medium|large Optional (default value: medium)

Controls visual styling.

Example: medium


<paze-message> Code Sample

Below is a basic example of the <paze-message> element included on a page where the Paze SDK has been initialized:

<paze-message
  message-id="1"  
  message-placement="checkout"  
  theme="light"  
  size="medium">
</paze-message>