On-Site Messaging Widget

Purpose

Boost conversions and increase average order value by showcasing Sezzle’s financing options to shoppers as they browse your site.

Overview

The Sezzle on-site messaging widget displays available financing options on product and cart pages, encouraging purchases. When a shopper clicks on the widget, an informational modal opens automatically, showing them how Sezzle works — no additional integration is required. The widget and modal are bundled together as a single installation. Follow the installation instructions below to add the widget to your website.

Installation

One-Click Installation: Many leading platforms offer one-click installation with Sezzle. Check for compatibility with your platform.
Manual Installation: If one-click installation is unavailable or incompatible with your theme, refer to the manual installation guide or contact merchantsupport@sezzle.com for assistance.

The following imports the Javascript file required to render the on-site messaging widget, along with any saved account settings. Place this script at the bottom of the code file for the HTML page where the widget is to render.

<script src="https://widget.sezzle.com/v1/javascript/price-widget?uuid={merchant_id}"></script>

Replace {merchant_id} with your 36-character value from your Merchant Dashboard.A pre-populated snippet should be provided in your Sezzle Merchant Dashboard Setup Checklist.

Customization

Sezzle provides extensive configuration options to tailor the on-site messaging widget to your site’s needs. Our engineering team is available to ensure seamless integration with your website’s design and functionality. Contact merchantsupport@sezzle.com for assistance, or follow the next section to configure the widget yourself.

Merchant Configuration

Merchants may opt to manage their configuration internally. If your local configuration is being overridden by a different value, please contact Sezzle Merchant Support to remove the saved override.

The below configuration script must appear in the code before the widget script in the previous section.

`document.sezzleConfig` Options

Template
Example
Options

<script type="text/javascript">
    document.sezzleConfig = {
      configGroups: [
        {
          "targetXPath": string,
          "renderToPath": string,
          "urlMatch": string,
          "theme": string,
          "ignoredPriceElements": [string],
          "ignoredFormattedPriceText": [string],
          "alignment": string,
          "alignmentSwitchMinWidth": number,
          "alignmentSwitchType": string,
          "containerStyle": {
            "property": string,
          },
          "textStyle": {
            "property": string,
          },
          "logoStyle": {
            "property": string,
          },
          "hideClasses": [string],
          "relatedElementActions": [{
            "relatedPath": string,
            "initialAction": function(r,w){}
          }]
        }
      ],
      "language": string,
      "apDualInstall": boolean,
	  "klarnaDualInstall": boolean,
      "minPrice": number,
      "maxPrice": number,
      "observeElements": [
        {
          "eventType": string,
          "element": string
        }
      ]
    }
</script>

<script type="text/javascript">
    document.sezzleConfig = {
      configGroups: [
        {
          "targetXPath": ".price",
          "renderToPath": "..",
          "urlMatch": "product",
          "theme": "auto",
          "ignoredPriceElements": ["DEL","STRIKE"],
          "ignoredFormattedPriceText": ["Subtotal", "Total:", "Sold Out"],
          "alignment": "inherit",
          "alignmentSwitchMinWidth": 0,
          "alignmentSwitchType": "inherit",
          "containerStyle": {
            "marginTop": "0px",
            "marginBottom": "0px",
            "marginRight": "0px",
            "marginLeft": "0px"
          },
          "textStyle": {
            "color": "inherit",
            "fontFamily": "inherit",
            "fontSize": "14px",
            "fontWeight": 500,
            "lineHeight": "13px",
            "maxWidth": "480px"
          },
          "logoStyle": {
            "transform": "scale(1)",
            "transformOrigin": "center",
            "margin": "0px"
          },
          "hideClasses": [],
          "relatedElementActions": [{
            "relatedPath": "..",
            "initialAction": function(r,w){
              if(r.className.indexOf('compare') > -1){
                w.style.display = "none"
              }
            }
          }]
        }
      ],
      "language": document.querySelector("html").lang || "en",
      "apDualInstall": false,
      "klarnaDualInstall": false,
      "minPrice": 0,
      "maxPrice": 250000,
      "observeElements": [
        {
          "eventType": "click",
          "element": ".options-selector"
        }
      ]
    }
</script>

object[]

default:"[{}]"

required

Allows multiple configurations for one store to suit different page types, layouts, or applications. View all available options for customization.

Show child attributes

string

required

ID, class, or path to the element in the webpage where the product price text value will be detected.
To indicate a path, subpaths are separated by ’/’, IDs are preceded by ’#’, classes by ’.’, and tag names are suffixed with index (tagName-Index). Indexes are zero-based.

e.g. ‘#ProductSection/.product-price/SPAN-1’ would target the 2nd ‘SPAN’ element contained within elements that contain the ‘product-price’ class which are contained within the element with an ID of ‘ProductSection’.

string

default:".."

Path from targetXPath to the element after which the Sezzle widget should be rendered.
Use ’.’ for sibling placement, ’../’ to move up to parents, and tag-index selectors to move down. Same syntax as targetXPath.

e.g. ’../../BUTTON-0’ would go to the grandparent element of the targetXPath and place the widget after the first button found within that container.

string

Specific word appearing in the URL of pages where the widget config should apply. Typical values are ‘product’ or ‘cart’.

string

default:"auto"

Updates the logo color to coordinate with different background colors. If not specified, the widget will attempt to detect the background color and apply a contrasting logo.Available options: dark, light, black-flat, white-flat.

object

Custom styling to apply to the Sezzle widget container. Accepts CSS in JSON format. Keys must use camelCase, be wrapped in quotes, and separated by commas.

Show child attributes

string

Key should be the CSS property you wish to set, in camelCase, value should be type string

object

Custom styling to apply to the Sezzle text within the widget. Accepts CSS in JSON format. Keys must use camelCase, be wrapped in quotes, and separated by commas.

Show child attributes

string

Key should be the CSS property you wish to set, in camelCase, value should be type string

object

Custom styling to apply to the Sezzle logo within the widget. Accepts CSS in JSON format. Keys must use camelCase, be wrapped in quotes, and separated by commas.

Show child attributes

string

Key should be the CSS property you wish to set, in camelCase, value should be type string

Show child attributes

The path from the targetXPath to the observable element

function

Function receives two parameters. The first is the related element per relatedPath, the second is the widget that corresponds to this targetXPath element. Write a custom function to check condition on relatedPath, then perform an action on widget.

string[]

Direct child elements of targetXPath to be disregarded when detecting the price. Useful for handling variations between sale and regular-priced items.

string[]

default:"['Subtotal','Total:','Sold Out']"

Text strings within targetXPath to be disregarded when detecting the price and rendering the widget.

string[]

XPath of elements that should be hidden when Sezzle’s widget is showing.
Despite the name, this config accepts an array of XPaths.

e.g. [“#viabill-pricetag”,“.afterpay-paragraph”,“QUADPAYWIDGET-0”]

string

default:"auto"

Alignment of the widget relative to the parent element.Available options: left, center, right, auto

number

default:"0"

Screen width in pixels below which the alignment switches to alignmentSwitchType. Common breakpoint: 768px (for handheld vs desktop).

string

default:"auto"

Alignment of the widget to apply when viewport width is narrower than alignmentSwitchMinWidth.Available options: left, center, right, auto

boolean

default:"false"

Afterpay’s logo is appended to widget content. When clicked, the competitor’s modal will display.

boolean

default:"false"

Klarna’s logo is appended to widget content. When clicked, the competitor’s modal will display.

number

default:"0"

Minimum price in cents for which Sezzle can be selected at checkout. If the price at targetXPath is lower than this number, the widget will render with a note stating the minimum eligible price required. This configuration does not prevent a customer from checking out with Sezzle below this price. For more information on setting a gateway minimum, contact your Merchant Success representative or use the Contact Us section of the Sezzle Merchant Dashboard.

number

default:"250000"

Maximum price in cents for which the widget should be rendered. If the price at targetXPath is higher than this number, the widget will not render on the page.

string

default:"document.querySelector('html').lang"

Language in which the widget text should be rendered. If the specified language is not supported, the translation will default to English.Available options: left, center, right, auto

object[]

Can attach event listeners to DOM elements and re-initialize the widget.

Show child attributes

string

The id or class of the element to observe

string

The event type for which to observe, upon which to re-render the widget

Simple Example

Template
Example

<script type="text/javascript">
    document.sezzleConfig = {
        configGroups: [
            {
                targetXPath: string,
            },
        ],
    };
</script>

<script type="text/javascript">
    document.sezzleConfig = {
        configGroups: [
            {
                targetXPath: "#ProductPrice/.money",
            },
        ],
    };
</script>

FAQs

Will the widget impact my site performance?

Does the widget cost extra?

Sezzle

Direct Integration

Virtual Card

Assets

Express Checkout

Mobile SDKs

Other

On-Site Messaging Widget

Purpose

Overview

Installation