Integrate Messages

Add messaging

Paze provides a custom HTML element, <paze-message>, that you can place anywhere in your page layout.

Once the Paze JavaScript SDK is loaded and initialized, the SDK will replace this element with an active offer message (if one exists).

No additional API calls or page-specific logic are required.

`<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> web component. This should be included on pages where the Paze SDK has been initialized.

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <div>
      <paze-message
        message-id="1"
        message-placement="checkout"
        theme="light"
        size="medium">
      </paze-message>
    </div>
    <script
      src="https://checkout.wallet.cat.earlywarning.io/web/resources/js/digitalw allet-sdk.js"
      type="text/javascript">
    </script>
    <script>
      let digitalWalletAdaptor = window.DIGITAL_WALLET_SDK;
    </script>
  </body>
</html>

Add messaging

<paze-message> Attributes

<paze-message> Code Sample

`<paze-message>` Attributes

`<paze-message>` Code Sample