Integration Guide

This part of the documentation will guide you through the steps of embedding the Ingrid Upsell widget.

  1. Embed the widget script in the HEAD section:
<script src=""></script>

In staging/testing environment use this link:

  1. Create an empty placeholder in the desired place of your webpage:
<div id="ingrid-upsell-widget"></div>
  1. Initialize the widget:
const widget = new ingrid.upsell("ingrid-upsell-widget", {
auth_token: "ingrid-http-auth-token:aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee",
country: "SE",
locales: ["sv-SE"],
cart: {
currency: "SEK",
total_value: 1000,
vouchers: ["promo_voucher"],
items: [
name: "Keyboard",
sku: "107346",

The parameters have the following meaning:

  1. Update the cart along the user journey to recompute free delivery options:

Use the widget.updateCart that accepts same parameters as outlined in the point above.

  1. Listen to events from widget in real-time:
widget.addListener("free_delivery_reached", () => console.log("Free delivery!"));

Following events are availabled:


You can find your token in Ingrid Merchant Platform. After logging into the platform click the info icon in the top right corner of the site.

Ingrid Upsell widget token


It is possible to customize the behaviour of the upsell widget in Ingrid Merchant Platform.

Models & Types Reference


  "auth_token": string
  "cart": CartState
  "locales": []string
  "country": string


  "currency": string,
  "attributes": string[]
  "items": CartItem[],
  "total_value": number,
  "vouchers": string[]


  "attributes": string[],
  "name": string,
  "price": number,
  "quantity": number,
  "sku": string

Last updated: Fri, May 17, 06:15 AM