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. 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 [email protected] 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 [email protected] 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>

configGroups

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

targetXPath

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’.

renderToPath

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.

urlMatch

string

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

theme

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.

containerStyle

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

someCSSProperty

string

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

textStyle

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

someCSSProperty

string

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

logoStyle

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

someCSSProperty

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

initialAction

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.

ignoredPriceElements

string[]

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

ignoredFormattedPriceText

string[]

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

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

hideClasses

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”]

alignment

string

default:"auto"

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

alignmentSwitchMinWidth

number

default:"0"

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

alignmentSwitchType

string

default:"auto"

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

apDualInstall

boolean

default:"false"

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

klarnaDualInstall

boolean

default:"false"

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

minPrice

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.

maxPrice

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.

language

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

observeElements

object[]

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

Show child attributes

element

string

The id or class of the element to observe

eventType

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

Other

On-Site Messaging Widget

Purpose

Overview

Installation