Static Widget

The Static Widget enables merchants to integrate the Sezzle widget into their website without direct communication with Sezzle’s servers. All widget code, custom configurations, images, and stylesheets are hosted locally within the merchant’s store theme. This approach offers:

Faster Load Times
- Local hosting reduces dependency on external servers.
Greater Control
- Merchants have full authority over the widget’s appearance and behavior, as the Sezzle team cannot modify it.

This local control means merchants are responsible for any updates or changes to the widget.

Installation

Select the implementation that fits your needs:

NPM Package
Code Snippet (Platform Agnostic)
Code Snippet (Shopify)

NPM Implementation

If your website is built with React, please refer to the package and documentation here.

Using npm: npm install @sezzle/sezzle-static-widget@latest Within your product page, add the following code snippet where you want the widget to render, updating the path to node_modules for your file structure:

<script
    type="text/javascript"
    src="../node_modules/@sezzle/sezzle-static-widget/dist/bundle.js"
></script>
<script>
    const renderSezzle = new AwesomeSezzle({
        amount: `${yourPriceVariableHere}`,
    });
    renderSezzle.init();
</script>

Use the Configuration options below to customize the widget appearance as desired.

HTML Implementation

Implementation varies greatly by platform, theme, etc. Below is a general overview of the process. The code snippets below are samples and may need to be modified to fit your site. For Shopify merchants, please proceed to the next section.

Create a new Javascript file within your site’s code where appropriate
Copy and paste this minified code into the newly created file
Import the new file into the page(s) where the Sezzle widget will be added
```
<script src="../scripts/sezzle-static-widget.js"></script>
```
Create a placeholder element where the Sezzle widget should be rendered on the page(s), usually below the price container element
```
<div id="sezzle-widget"></div>
```
Add the following script below the placeholder element, updating the amount value to reflect your price variable which renders the current product price or cart total as applicable
```
<script>
    var renderSezzle = new AwesomeSezzle({
        amount: `${yourPriceVariableHere}`,
    });
    renderSezzle.init();
</script>
```
Preview your changes to confirm the widget is displaying correctly in each of the following scenarios
- Use the Configuration options below to customize the widget appearance as desired:
  - Regular Price
  - Sale Price
  - Variant Selection
  - Desktop
  - Mobile

Shopify Implementation

Log into your Shopify store admin
Click Online Store > Themes
Next to the theme you wish to edit, click Actions, then select Edit Code
Under the Assets folder, click Add a new asset
On the Create a Blank File tab, name the file sezzle-static-widget and select .js as the file type, then click Add Asset
Copy the code from the repository file and paste it into this new file, then click Save

Add the following lines of code wherever the widget should render on the product page within templates/product.liquid or sections/product-template.liquid as applicable

<!-- Sezzle Static Widget -->
<div id="sezzle-widget"></div>
{{ 'sezzle-static-widget.js' | asset_url | script_tag }}
<script>
    var renderSezzle = new AwesomeSezzle({
        amount: "{{ product.selected_or_first_available_variant.price | money }}",
    });
    renderSezzle.init();
    document.onchange = function () {
        var newPrice =
            "{{product.selected_or_first_available_variant.price | money}}";
        renderSezzle.alterPrice(newPrice);
    };
</script>
<!-- End Sezzle Static Widget -->

Add the following lines of code wherever the widget should render on the cart page within templates/cart.liquid or sections/cart-template.liquid as applicable

<!-- Sezzle Static Widget -->
<div id="sezzle-widget"></div>
{{ 'sezzle-static-widget.js' | asset_url | script_tag }}
<script>
    var renderSezzle = new AwesomeSezzle({
        amount: "{{ cart.total_price | money }}",
        alignment: "right",
    });
    renderSezzle.init();
</script>
<!-- End Sezzle Static Widget -->

Customizing the Configuration

Once the widget is rendering, additional configurations can be added to the AwesomeSezzle to change the appearance. Below is an example featuring all the options. However, amount is the only required value.

Template
Example
Options

<script>
    var renderSezzle = new AwesomeSezzle({
        amount: string,
        renderElement: string,
        theme: string,
        modalTheme: string,
        maxWidth: number,
        marginTop: number,
        marginBottom: number,
        marginLeft: number,
        marginRight: number,
        alignment: string,
        alignmentSwitchMinWidth: number,
        alignmentSwitchType: string,
        textColor: string,
        fontFamily: string,
        fontSize: number,
        fontWeight: number,
        widgetType: string,
        fixedHeight: number,
        logoSize: number,
        logoStyle: object,
        language: string,
        parseMode: string,
        merchantLocale: string,
        ineligibleWidgetTemplate: string,
        minPrice: number,
        maxPrice: number,
    });
    renderSezzle.init();
</script>

<script>
    var renderSezzle = new AwesomeSezzle({
        amount: "{{ product.selected_or_first_available_variant.price | money }}",
        renderElement: "new-sezzle-widget-container-id",
        theme: "light",
        modalTheme: "color",
        maxWidth: 400,
        marginTop: 0,
        marginBottom: 0,
        marginLeft: 0,
        marginRight: 0,
        alignment: "left",
        alignmentSwitchMinWidth: 576,
        alignmentSwitchType: "center",
        textColor: "#111",
        fontFamily: "Comfortaa, sans-serif",
        fontSize: 12,
        fontWeight: 400,
        widgetType: "product-page",
        fixedHeight: 0,
        logoSize: 1.0,
        logoStyle: {},
        language: "en",
        parseMode: "default",
        merchantLocale: "North America",
        ineligibleWidgetTemplate:
            "%%logo%% Pay in 4 interest-free payments on purchases $35-$2,500. %%info%%",
        minPrice: 3500, // Amount in cents
        maxPrice: 250000, // Amount in cents
    });
    renderSezzle.init();
</script>

amount

string

required

The target price amount, in dollar format.
Provide the product price variable as a template-literal.
Shopify Liquid Example: '{{ product.selected_or_first_available_variant.price | money }}'

renderElement

string

default:"sezzle-widget"

Provide the ID name or array of ID names that correspond to the widget placeholder elements where the widget should be rendered.

theme

string

default:"light"

Updates the logo color to coordinate and contrast with different background colors of websites. 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.Available options: dark, light, black-flat, white-flat

maxWidth

number

default:"400"

Maximum width of the widget element in pixels. Set to 200 to render the widget nicely on 2 lines, or 120 for 3 lines.

marginTop

number

default:"0"

Amount of space above the widget in pixels.

marginBottom

number

default:"0"

Amount of space below the widget in pixels.

marginLeft

number

default:"0"

Amount of space left of the widget in pixels.

marginRight

number

default:"0"

Amount of space right of the widget in pixels.

alignment

string

default:"left"

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

alignmentSwitchMinWidth

number

default:"760"

Screen width in pixels below which the alignment switches to alignmentSwitchType instead of alignment. The most common breakpoint is 768 (handheld vs desktop). alignmentSwitchMinWidth is typically only necessary when alignment is not set to auto.

alignmentSwitchType

string

default:"auto"

Alignment of the widget relative to the parent element to be applied when the viewport width is narrower than alignmentSwitchMinWidth.Available options: left,center, right, auto.

textColor

string

default:"#111"

Color of the widget text. Accepts all CSS color formats: hex, rgb(), hsl(), etc.

fontFamily

string

default:"inherit"

Font family of the widget text.

fontSize

number

default:"12"

Font size of the widget text in pixels. Enter numbers only — do not include units like px!

fontWeight

number

default:"300"

Boldness of the widget text. 100 is the lightest, 900 is the boldest.

Specifies the page category on which the widget is being rendered. Avaialble options: product-page, product-preview, cart.

fixedHeight

number

default:"0"

Sets the CSS value of fixed-height.

logoSize

number

default:"1.0"

Ratio at which to scale the Sezzle logo. The space the logo occupies between the widget text and the More Info link/icon is determined by the font size.

logoStyle

object

default:"{}"

Custom styling to apply to the Sezzle logo within the widget. The object accepts any CSS styling in JSON format. Keys must be camelCase.

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: en, fr, es, de.

parseMode

string

default:"default"

Allows widget installment price to calculate and format correctly for foreign currencies.Available options: default, comma.

merchantLocale

string

default:"North America"

Allows widget to render the correct program details, depending on if the merchant is enrolled through Sezzle North America or Sezzle Europe.Available options: North America, Europe.

Methods

The following functions are built into the static widget and are ready for use for your widget installation. Simply add the applicable snippet to your webpage code, updating the event listener and variables as necessary.

`alterPrice(newPrice)`

Alters price on widget. Create an event listener after renderSezzle.init() that invokes this function where newPrice is the new price value of the selected variant. Example:

document.onchange = function () {
    var newPrice = "${yourPriceVariableHere}";
    renderSezzle.alterPrice(newPrice);
};

`renderModalByfunction()`

Opens the Sezzle modal by a function. Create an event listener that invokes this function if the event location is other than the info icon.

var clickElement = document.querySelector("#yourClickableElementIdHere");
clickElement.addEventListener("click", function () {
    renderSezzle.renderModalByfunction();
});

`isMobileBrowser()`

Returns true on mobile browser. Use this event to show or hide the widget in different page locations based on device type.

document.onreadystatechange = function () {
    if (renderSezzle.isMobileBrowser()) {
        document.getElementById("sezzle-widget-mobile").style.display = "block";
        document.getElementById("sezzle-widget").style.display = "none";
    } else {
        document.getElementById("sezzle-widget").style.display = "block";
        document.getElementById("sezzle-widget-mobile").style.display = "none";
    }
};

`getElementToRender()`

Returns Element where the widget will be rendered. Create an event listener that invokes this function if the widget should appear when the event occurs.

document.body.insertBefore(
    renderSezzle.getElementToRender(),
    document.getElementById("price").nextElementSibling
);

Sezzle

Direct Integration

Virtual Card

Assets

Express Checkout

Other

Installation

NPM Implementation

HTML Implementation

Shopify Implementation

Customizing the Configuration

Methods

`alterPrice(newPrice)`

`renderModalByfunction()`

`isMobileBrowser()`

`getElementToRender()`

Sezzle

Direct Integration

Virtual Card

Assets

Express Checkout

Other

​Installation

​NPM Implementation

​HTML Implementation

​Shopify Implementation

​Customizing the Configuration

​Methods

​alterPrice(newPrice)

​renderModalByfunction()

​isMobileBrowser()

​getElementToRender()

Installation

NPM Implementation

HTML Implementation

Shopify Implementation

Customizing the Configuration

Methods

`alterPrice(newPrice)`

`renderModalByfunction()`

`isMobileBrowser()`

`getElementToRender()`