> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sezzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Static On-Site Messaging Widget

The Static On-Site Messaging Widget enables merchants to integrate the Sezzle promotional 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.

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

## Installation

Select the implementation that fits your needs:

* [NPM Package](#npm-implementation)
* [Code Snippet (Platform Agnostic)](#html-implementation)
* [Code Snippet (Shopify)](#shopify-implementation)

### NPM Implementation

<Note>
  If your website is built with React, please refer to the package and documentation [here](https://www.npmjs.com/package/@sezzle/sezzle-react-widget).
</Note>

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:

```html theme={"system"}
<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 on-site messaging widget appearance as desired.

### HTML Implementation

<Note>
  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.
</Note>

1. Create a new Javascript file within your site's code where appropriate
2. Copy and paste [this minified code](https://github.com/sezzle/static-widgets/blob/production/dist/bundle.js) into the newly created file
3. Import the new file into the page(s) where the Sezzle widget will be added

   ```html theme={"system"}
   <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

   ```html theme={"system"}
   <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

   ```html theme={"system"}
   <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](https://github.com/sezzle/static-widgets/blob/production/dist/bundle.js) 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

   ```html theme={"system"}
   <!-- 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 On-Site Messaging 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

   ```html theme={"system"}
   <!-- Sezzle Static On-Site Messaging 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 On-Site Messaging Widget -->
   ```

## Customizing the Configuration

Once the on-site messaging 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.

<Tabs>
  <Tab title="Template">
    ```html expandable theme={"system"}
    <script>
        var renderSezzle = new AwesomeSezzle({
            amount: string,
            renderElement: string,
            numberOfPayments: number,
            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>
    ```
  </Tab>

  <Tab title="Example">
    ```html theme={"system"}
    <script>
        var renderSezzle = new AwesomeSezzle({
            amount: "{{ product.selected_or_first_available_variant.price | money }}",
            renderElement: "new-sezzle-widget-container-id",
            numberOfPayments: 5,
            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>
    ```
  </Tab>

  <Tab title="Options">
    <ParamField body="amount" type="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 }}'`
    </ParamField>

    <ParamField body="renderElement" default="sezzle-widget" type="string">
      Provide the ID name or array of ID names that correspond to the widget placeholder elements where the widget should be rendered.
    </ParamField>

    <ParamField body="numberOfPayments" default="5" type="number">
      Number of installments by which the shopper will pay the total, calculates installment amount. Pay-in-4 and Pay-in-5 are both available at checkout. Pay-in-5 modal reflects both plans, whereas Pay-in-4 modal will only reflect 4 installments.

      Available options: 4, 5
    </ParamField>

    <ParamField body="theme" default="light" type="string">
      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`
    </ParamField>

    <ParamField body="maxWidth" default="400" type="number">
      Maximum width of the widget element in pixels. Set to 200 to render the
      widget nicely on 2 lines, or 120 for 3 lines.
    </ParamField>

    <ParamField body="marginTop" default="0" type="number">
      Amount of space above the widget in pixels.
    </ParamField>

    <ParamField body="marginBottom" default="0" type="number">
      Amount of space below the widget in pixels.
    </ParamField>

    <ParamField body="marginLeft" default="0" type="number">
      Amount of space left of the widget in pixels.
    </ParamField>

    <ParamField body="marginRight" default="0" type="number">
      Amount of space right of the widget in pixels.
    </ParamField>

    <ParamField body="alignment" default="left" type="string">
      Alignment of the widget relative to the parent element.

      Available options: `left`,`center`, `right`, `auto`.
    </ParamField>

    <ParamField body="alignmentSwitchMinWidth" default="760" type="number">
      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`.
    </ParamField>

    <ParamField body="alignmentSwitchType" default="auto" type="string">
      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`.
    </ParamField>

    <ParamField body="textColor" default="#111" type="string">
      Color of the widget text. Accepts all CSS color formats: hex, rgb(), hsl(),
      etc.
    </ParamField>

    <ParamField body="fontFamily" default="inherit" type="string">
      Font family of the widget text.
    </ParamField>

    <ParamField body="fontSize" default="12" type="number">
      Font size of the widget text in pixels. Enter numbers only — do not include
      units like `px`!
    </ParamField>

    <ParamField body="fontWeight" default="300" type="number">
      Boldness of the widget text. 100 is the lightest, 900 is the boldest.
    </ParamField>

    <ParamField body="widgetType" default="product-page" type="string">
      Specifies the page category on which the widget is being rendered.
      Avaialble options: `product-page`, `product-preview`, `cart`.
    </ParamField>

    <ParamField body="fixedHeight" default="0" type="number">
      Sets the CSS value of fixed-height.
    </ParamField>

    <ParamField body="logoSize" default="1.0" type="number">
      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.
    </ParamField>

    <ParamField body="logoStyle" default="{}" type="object">
      Custom styling to apply to the Sezzle logo within the widget. The object
      accepts any CSS styling in JSON format. Keys must be camelCase.
    </ParamField>

    <ParamField body="language" default="document.querySelector('html').lang" type="string">
      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`.
    </ParamField>

    <ParamField body="parseMode" default="default" type="string">
      Allows widget installment price to calculate and format correctly for
      foreign currencies.

      Available options: `default`, `comma`.
    </ParamField>

    <ParamField body="merchantLocale" default="North America" type="string">
      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`.
    </ParamField>
  </Tab>
</Tabs>

## Methods

The following functions are built into the static on-site messaging widget and are ready for use for your on-site messaging 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:

```javascript theme={"system"}
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.

```javascript theme={"system"}
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.

```javascript theme={"system"}
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.

```javascript theme={"system"}
document.body.insertBefore(
    renderSezzle.getElementToRender(),
    document.getElementById("price").nextElementSibling
);
```