Skip to main content
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 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.
  1. Create a new Javascript file within your site’s code where appropriate
  2. Copy and paste this minified code into the newly created file
  3. Import the new file into the page(s) where the Sezzle widget will be added 
    <script src="../scripts/sezzle-static-widget.js"></script>
  4. 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>
  5. 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>
  6. 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

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

​
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
);