Skip to main content

Widget SDK

Purpose

Increase average order value and boost conversions!

The Sezzle promotional messaging widget conveniently informs shoppers of available financing as they browse. Follow the documentation below to install the Sezzle widget on your product and cart pages.

Many of our top platforms have in-app one-click installation find yours using one of our Plugins. If the one-click installation is not available for your platform or does not appear to be compatible with your theme, you may either follow the manual installation instructions below or reach out to merchantsupport@sezzle.com

Sezzle Configured

We offer a full range of configuration options that we can use to tailor our widget to match your needs. We have a team of engineers who can make our widget seamlessly integrate into your site.

HTML required

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

Replace {merchant_id} with your 36-character value from your Merchant Dashboard

Merchant Configured

warning

Configuration is required prior to invoking the price widget script

Examples

Simple Example

<script type="text/javascript">
document.sezzleConfig = {
"configGroups": [
{
"targetXPath": "YOUR IDENTIFIER HERE"
}
]
}
</script>

Advanced Configurations

<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,
"minPrice": 0,
"maxPrice": 250000,
"observeElements": [
{
"eventType": "click",
"element": ".options-selector"
}
]
}
</script>

document.sezzleConfig

configGroups (required)

Purpose: Allows multiple configurations for one store to suit different page types, layouts, or applications
Type: array of objects
Default: [] Additional Details: View all available options for customization options

apDualInstall (optional)

Purpose: Afterpay's logo is appended to widget content. When clicked, the competitor's modal will display.
Type: boolean
Default: false

minPrice (optional)

Purpose: 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.
Type: number
Default: 0
Additional Details: 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 (optional)

Purpose: 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.
Type: number
Default: 250000

language (optional)

Purpose: Language in which the widget text should be rendered.
Type: string
Options: 'en', 'fr', 'es'
Default: document.querySelector('html').lang
Additional Details: Currently, SezzleJS only supports 'en', 'fr', and 'es'. If the specified language is not supported, the translation will default to English.

observeElements (optional)

Purpose: Can attach event listeners to DOM element and re-initialize widget.
Type: array of objects
Additional Details: Each object should have an 'element' key with a string value containing an id or class & a valid 'eventType' such as 'click'

configGroups Properties

Each object within the configGroups array will accept the following keys, whose purpose and usage is outlined below:

targetXPath (required)

Purpose: ID, class, or path to the element in the webpage where the product price text value will be detected.
Type: string
Default: ''
Additional Details: To indicate a path, all subpaths need to be separated by the '/' character. IDs need to be preceded by a '#' character. Classes needed to be preceded by a '.' character. Tag names need to be followed by the applicable index. The format of a tag name is as follows: tagName-Index (e.g. 'SPAN-2'). The indexes are zero-based, such that the first element of the specified type within the parent element is at index 0.

info

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 (optional)

Purpose: Path from the targetXPath to the element in the webpage after which the Sezzle widget should be rendered.
Type: string
Default: '..'
Additional Details: '.' will place the widget as the next element sibling of the target element. To move the widget to a parent container, use '../' for each parent level. You may then traverse downward using ID, class, tag-index, or pseudo-selectors. As with targetXPath, prepend IDs with '#', classes with '.', and append tag names with the index (tagName-Index). Append pseudo-selectors with '::'. It is recommended to keep the renderToPath as simple as possible to maximize compatibility.

info

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 (optional)

Purpose: Specific word appearing in the url of pages where the widget config should be applied.
Type: string
Default: ''
Additional Details: Typical values are 'product' or 'cart', as applicable

theme (optional)

Purpose: Updates the logo color to coordinate and contrast with different background colors of websites.
Type: string
Options: dark, light, black-flat, white-flat
Default: ''
Additional Details: If theme is not specified, the widget will attempt to detect the background color and apply the appropriate contrasting logo. Use "light" or "black-flat" for light backgrounds, and "dark" or "white-flat" for dark backgrounds.

containerStyle (optional)

Purpose: Custom styling to apply to the Sezzle widget container.
Type: object
Default:
Additional Details: The object will accept any CSS styling in JSON format. Keys must be surrounded by '', given in camelCase instead of kebob-case, and separated from the following key by a comma instead of a semi-colon.

textStyle (optional)

Purpose: Custom styling to apply to the Sezzle text within the widget.
Type: object
Default:
Additional Details: The object will accept any CSS styling in JSON format. Keys must be surrounded by '', given in camelCase instead of kebob-case, and separated from the following key by a comma instead of a semi-colon.

logoStyle (optional)

Purpose: Custom styling to apply to the Sezzle logo within the widget.
Type: object
Default:
Additional Details: The object will accept any CSS styling in JSON format. Keys must be surrounded by '', given in camelCase instead of kebob-case, and separated from the following key by a comma instead of a semi-colon.

relatedElementActions (optional)

Purpose: Functions related to Sezzle widget. Listen for changes on the webpage after the Sezzle widget loads.
Type: array of objects
Default: []
Additional Details: Each object in the array has three available keys: relatedPath, which targets an element in relation to the targetXPath (in the same manner as renderToPath); action; and initialAction, with preset params corresponding to the relatedPath element and the current widget which performs the provided function as the widget is rendering

ignoredPriceElements (optional)

Purpose: Direct child elements of targetXPath to be disregarded when detecting the price and rendering the widget.
Type: array of strings
Default: []
Additional Details: ignoredPriceElements can be used to solve targetXPath variations between sale and regular-priced items. In this case, targetXPath should point to the parent element surrounding the old and the new prices, then ignoredPriceElements will specify the old/compare-at price element. As with targetXPath, prepend IDs with '#', classes with '.', and append tag names with the index (tagName-Index).

ignoredFormattedPriceText (optional)

Purpose: Text strings within the targetXPath to be disregarded when detecting the price and rendering the widget.
Type: array of strings
Default: ['Subtotal', 'Total:', 'Sold Out']

hideClasses (optional)

Purpose: XPath of elements that should be hidden when Sezzle's widget is showing. This is useful for hiding a product similar to Sezzle that is not available in a country where Sezzle is.
Type: array of strings
Default: []
Additional Details: Despite what the name suggests, this config option accepts an array of xpaths. As with targetXPath, prepend IDs with '#', classes with '.', and append tag names with the index (tagName-Index).

info

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

alignment (optional)

Purpose: Alignment of the widget relative to the parent element.
Type: string
Options: left, center, right, auto
Default: 'auto'

alignmentSwitchMinWidth (optional)

Purpose: Screen width in pixels below which the alignment switches to alignmentSwitchType instead of alignment.
Type: number
Default: 0
Additional Details: The most common breakpoint is 768 (handheld vs desktop). alignmentSwitchMinWidth is typically only necessary when alignment is not auto.

alignmentSwitchType (optional)

Purpose: Alignment of the widget relative to the parent element to be applied when the viewport width is narrower than alignmentSwitchMinWidth.
Type: string
Options: left, center, right, auto
Default: 'auto'

Uploading the Widgets

After building the config, it is time to upload the widgets to your webpages! The SDK needs to be called in the HTML of the webpage for the widgets to be rendered. Place the config and the widget script at the bottom of the code file for the HTML page, and you should be all set!

A pre-populated snippet should be provided in your Sezzle Merchant Dashboard Setup Checklist.

When using this snippet to add the widget script to your site, you must replace {merchant_id} with the 36-character Sezzle Merchant ID found in the Business Settings of your Sezzle Merchant Dashboard for the applicable store. Please do not re-use IDs across multiple URLs.

caution

The script with the applicable merchant ID must be included after document.sezzleConfig is defined.

HTML Needed

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

Replace {merchant_id} with your 36-character value from your Merchant Dashboard