Getting Started

To display offers on your webpage you will need:

Your Extend Store ID: This can be found through the Extend Merchant Portal by clicking on the "Settings" navigation tab (direct link) under "Production Credentials"
A product referenceId: This is the unique product identifier that you had specified in your product catalog upload. We will use this identifier to know which warranty offer to display. Generally this is the product SKU or similar, however the choice of product reference ID is up to a merchant to decide. If you are having trouble finding out what your product referenceId is, please file a support request through the Extend Merchant Portal.

Installation

Add the following to your page

<script src="https://sdk.helloextend.com/extend-sdk-client/v1/extend-sdk-client.min.js"></script>
<script>
  Extend.config({ storeId: '<YOUR_EXTEND_STORE_ID>' })
</script>

For more options that can be passed to the Extend.config() function, see the API Reference

Displaying Product Offers and Cart Offers

Place an html element anywhere you would like to see the product or cart page offer with a css selector that you can reference.

<div id="extend-offer"></div>

This element will be used as the container for the displayed warranty offer. If you have specific width or spacing requirements, you can add them directly to this element using css or inline styles.

Initialization

/* PRODUCT PAGE OFFER */
Extend.buttons.render('#extend-offer', {
  referenceId: '<PRODUCT_REFERENCE_ID>',
  price: '<PRODUCT_PRICE>',
  category: '<PRODUCT_CATEGORY>',
})

/* CART PAGE OFFER */
Extend.buttons.renderSimpleOffer('#extend-offer', {
  referenceId: '<PRODUCT_REFERENCE_ID>',
  price: '<PRODUCT_PRICE>',
  category: '<PRODUCT_CATEGORY>',
  onAddToCart({ plan, product, quantity }) {
    if (plan && product) {
      // a user has selected a plan.  Add warranty to their cart.
    }
})

Note: To query DOM elements, we use the native document.querySelector. For this reason, we recommend using element ids instead of classes for selector references.

Accessing the component instance

It’s possible to have multiple offers displayed on the same page and each might have their own product referenceId, so each rendered component acts independently of each other. The component instance will be tied to the element/selector passed in during the call to Extend.buttons.render and will be used for API calls later in this guide.

To retrieve the component instance:

const component = Extend.buttons.instance('#extend-offer')

Handling product selection changes

If your store has multiple product variants for a single product page (for example, if you have a product that allows a customer to select a color or size option) you’ll need to pass the new product reference id to the SDK when the change occurs. This prevents a customer from accidentally purchasing the wrong warranty for an incorrect product.

Example:

// calls are done through the component instance
const component = Extend.buttons.instance('#extend-offer')

component.setActiveProduct('<DIFFERENT_PRODUCT_REFERENCE_ID>')

Adding a warranty to the cart

Typically you would add the a warranty selection to the cart when they click on “Add to Cart”. You can retrieve the users warranty selection by calling component.getPlanSelection(); and retrieve the currently selected product by calling component.getActiveProduct();.

Example

const component = Extend.buttons.instance('#extend-offer')
const plan = component.getPlanSelection()
const product = component.getActiveProduct()

If a user has selected a warranty option, getPlanSelection will return a Plan object, otherwise it will return null. See the API Reference for details on what is included with the plan object.

Here is an example of how this might look in a basic store.

$('#add-to-cart').on('click', function(e) {
  e.preventDefault()

  /** get the component instance rendered previously */
  const component = Extend.buttons.instance('#extend-offer')

  /** get the users plan selection */
  const plan = component.getPlanSelection()
  const product = component.getActiveProduct()

  if (plan) {
    /**
     * If you are using an ecommerce addon (e.g. Shopify) this is where you
     * would use the respective add-to-cart helper function.
     *
     * For custom integrations, use the plan data to determine which warranty
     * sku to add to the cart and at what price.
     */
    // add plan to cart, then handle form submission
  } else {
    // handle form submission
  }
})

A modal offer can be triggered from anywhere on a page and provides the user with another opportunity to protect their product with a warranty.

Extend.modal.open({
  referenceId: '<PRODUCT_REFERENCE_ID>',
  price: '<PRODUCT_PRICE>',
  category: '<PRODUCT_CATEGORY>',
  /**
   * This callback will be triggered both when a user declines the offer and if
   * they choose a plan.  If a plan is chosen, it will be passed into the
   * callback function, otherwise it will be undefined.
   */
  onClose: function(plan, product) {
    if (plan && product) {
      // a user has selected a plan.  Add it to their cart.
    }
  },
})

Piecing it all together

Combining all of these tools you should now be able to create a complete end-to-end warranty offer solution on your online store.

Full Product Page Example

<html>
  <head></head>
</html>
<form id="product-form" action="/cart/add">
  <div id="extend-offer"></div>
  <button id="add-to-cart" type="submit">Add To Cart</button>
</form>
<script></script>

/** configure */
Extend.config({ storeId: '<EXTEND_STORE_ID>' })

/** initialize offer */
Extend.buttons.render('#extend-offer', {
  referenceId: '<PRODUCT_REFERENCE_ID>',
  price: '<PRODUCT_PRICE>',
  category: '<PRODUCT_CATEGORY>',
})

/** bind to add-to-cart click */
$('#add-to-cart').on('click', function(event) {
  event.preventDefault()

  /** get the component instance rendered previously */
  const component = Extend.buttons.instance('#extend-offer')

  /** get the users plan selection */
  const plan = component.getPlanSelection()

  if (plan) {
    /**
     * Add the warranty to the cart using an AJAX call and then submit the form.
     * Replace this section with your own store specific cart functionality.
     */
    YourAjaxLib.addPlanToCart(plan, function() {
      $('#product-form').submit()
    })
  } else {
    Extend.modal.open({
      referenceId: '<PRODUCT_REFERENCE_ID>',
      price: '<PRODUCT_PRICE>',
      category: '<PRODUCT_CATEGORY>',
      onClose: function(plan, product) {
        if (plan && product) {
          YourAjaxLib.addPlanToCart(plan, product, quantity, function() {
            $('#product-form').submit()
          })
        } else {
          $('#product-form').submit()
        }
      },
    })
  }
})

Full Cart Page Example

<html>
  <head></head>
</html>
<div id="cart-item">
  <h2>Product Title</h2>
  <div id="extend-offer"></div>
</div>
<script></script>

/** configure */
Extend.config({ storeId: '<EXTEND_STORE_ID>' })

/** get quantity from store page if possible */
const quantity = document.querySelector('.storeQuantity')

/** initialize offer */
Extend.buttons.renderSimpleOffer('#extend-offer', {
  referenceId: '<PRODUCT_REFERENCE_ID>',
  price: '<PRODUCT_PRICE>',
  category: '<PRODUCT_CATEGORY>',
  onAddToCart: function({ plan, product }) {
    if (plan && product) {
      // if you can get quantity from store, pass it here.
      // otherwise, quantity defaults to 1
      YourAjaxLib.addPlanToCart(plan, product, quantity)
    }
  },
})

API Reference

Extend.config(config: object)

Extend.config({
  /**
   * Extend store ID
   *
   * @required
   */
  storeId: string,
  /**
   * A list of product reference IDs for the current page.  This will preload
   * the offers for each product to improve performance when switching
   * referenceIds.
   *
   * @optional
   */
  referenceIds: Array<string>,
  /**
   * Optional theme configuration.  A theme passed in as an argument will
   * override any theme retrieved from the Extend Merchant Portal configuration
   * and will fallback to a default theme if neither are present.
   *
   * @optional
   */
  theme: {
    primaryColor: string
  },
  /**
   * If you are using our demo environment, set this to "demo".
   *
   * @optional
   *
   */
   environment: "demo" | "production"

   /**
    * @optional
    * region: set optional region parameter to restrict offers to a specific region.
    */
   region: string

   /**
    * @optional
    * locale: set optional locale parameter to determine the language to be used for UI components.
    * If locale is not passed then it will default to customer's browser language settings.
    * If translation is not available for set locale then default language used is en-US.
    * Locale value should match the IETF language tags that are made up of ISO 639 standards for representing 
    * language names and ISO 3166-1 standards for representing country codes.
    */
    locale: string

})

Extend.buttons.render(selector: string, options: object)

Extend.buttons.render('#offer-container', {
  /** @required */
  referenceId: string,
  /** @optional */
  price: number,
  /** @optional */
  category: string,
  /** @optional */
  theme: {
    primaryColor: string,
  },
})

Extend.buttons.renderSimpleOffer(selector: string, options: object)

Extend.buttons.renderSimpleOffer('#offer-container', {
  /** @required */
  referenceId: string,
  /** @optional */
  price: number,
  /** @optional */
  category: string,
  onAddToCart?({ plan: PlanSelection, product: ActiveProduct, quantity?: number }): void | Promise<void>,
  /** @optional */
  theme: {
    primaryColor: string
  }
})

Extend.buttons.instance(selector: string): ButtonsComponent

const component = Extend.buttons.instance('#offer-container')

ButtonsComponent#getActiveProduct(): ActiveProduct | null

// usage
const product = component.getActiveProduct()

// product object structure
interface ActiveProduct {
  /**
   * The referenceId of the active product
   * @example "sku-12345"
   */
  id: string
  /**
   * The name of the active product
   * @example "XBox One X"
   */
  name: string
}

ButtonsComponent#setActiveProduct(referenceId: string | number)

component.setActiveProduct('item-12345')

ButtonsComponent#getPlanSelection(): PlanSelection | null

// usage
const plan = component.getPlanSelection()

// plan object structure
interface PlanSelection {
  /**
   * The unique plan identifier for this plan
   * @example "10001-misc-elec-adh-replace-1y"
   */
  planId: string
  /**
   * The price of the warranty plan in cents (e.g. 10000 for $100.00)
   * @example 10000
   */
  price: number
  /**
   * The coverage term length in months
   * @example 36
   */
  term: number
}

Extend.modal.open(options: object)

Extend.modal.open({
  /** @required */
  referenceId: string,
  /** @optional */
  price: number,
  /** @optional */
  category: string,
  /** @optional */
  theme: {
    primaryColor: string,
  },
  /**
   * If a user made a warranty selection, the "plan" and "product" will be
   * passed to this callback function.  If the user declines the offer, "plan"
   * and "product" will be undefined.  See above for data structure for
   * "PlanSelection" and "ActiveProduct" arguments.
   *
   * This callback function is where you should handle adding the warranty to
   * the users cart, submitting your product form, etc.
   */
  onClose(plan?: PlanSelection, product?: ActiveProduct) {},
})

Shipping Protection

To display shipping protection offers on your webpage you will need:

Install the Extend SDK: If your store has not previously integrated with Extend (i.e. for product protection) then you will need to follow the steps found in the Installation section of this document. It will walk you through how to install the SDK on your web-store and how to initialize the SDK with store details.
Provide the contents of the cart: To create a shipping protection offer, the SDK will need an up-to-date list of products that can be found in the customer's cart. The interface to send a list of products to the SDK is documented below (see: interface ShippingOffersItem ). Please be sure to excude any Extend Plan line items found in the cart.

Displaying Extend Shipping Protection Offers

Place the following html element where you would like to see the Shipping Protection offer placed on the webpage with a css selector that you can reference.

<div id="extend-shipping-offer"></div>

This element will be used as the container for displaying shipping protection offer. If you have specific width or spacing requirements, you can add them directly to this element using css or inline styles.

Shipping Protection Component

The Shipping Protection offer will render according to one of the following configurations:

Extend Choice (Opt Out) - The Shipping Protection offer is checked and added to the cart by default. The customer must elect to uncheck the checkbox in order to exclude it from their purchase.
Extend Choice (Opt In) - The Shipping Protection offer is unchecked and is not added to the cart by default. The customer must elect to check the checkbox in order to include Extend Shipping Protection in their purchase.
Extend Complete - The Shipping Protection offer is added to the cart by default. The customer will not be able to exclude it from their purchase.

If you are unsure of which configuration your webstore is using please reach out to your Extend Merchant Success Manager.

Initialization

Place the following code snippet in your integration and implement callback functions to be able to add, remove and update Extend Shipping Protection in the customer’s cart:

  Extend.shippingProtection.render(
  {
    selector: '#extend-shipping-offer',
    items: ShippingOffersItem[],
    isShippingProtectionInCart,
    onEnable: function(quote){
       console.log('call back to add SP plan to cart', quote)
    },
    onDisable: function(quote){
  	   console.log('call back to remove sp plan from cart', quote)
    },
    onUpdate: function(quote){
      console.log('call back to update sp plan in cart', quote)
    },
    convertQuoteToFormattedDisplayPrice: function(quote){
      console.log('call back to convert a USD quote premium to the end user\'s display currency')
      return 'MXN$123.45'
    }
  }
)

interface ShippingOffersItem {
    referenceId: string
    quantity: number
    purchasePrice: number
    productName: string
    category?:string
    shippable?:boolean

}

interface ShippingOffersQuote {
  id: string
  premium: number
  currency: string
  excludedProducts?: string[]
}

Note: To query DOM elements, we use the native document.querySelector. For this reason, we recommend using element ID instead of classes for selector references.

Extend.shippingProtection.render Interface Reference

selector: This is the ID of the HTML div you added (referenced above) on the cart template page
items: This is an mapping of all the items in the cart except Extend items. You will need to parse the cart object and map it to the Extend cart item format. Interface ShippingOfferItem is the Extend Cart item format.
isShippingProtectionInCart: This takes in a boolean to determine if the shipping protection is in the cart already. This property will be used to properly display the checkbox as checked or unchecked.
onEnable: This is a callback function. Pass a callback to be executed when the customer checks the checkbox to include Shipping Protection in their order. This will also return a quote of type ShippingOffersQuote to be used for the callbacks. The quote returned is valid for the current items in the Cart.
onDisable: This is a callback function. Pass a callback to be executed when the customer unchecks the checkbox to exclude Shipping Protection from their order. This will also return a quote of type ShippingOffersQuote to be used for the callbacks. The quote returned is valid for the current items in the Shopping Cart.
onUpdate: This is a callback function. Pass a callback to be executed when Shipping Protection offer changes (i.e. quantity is updated, items are removed, etc.). A Shipping Protection offer may change when `Extend.shippingProtection.update()` is called or `Extend.shippingProtection.render()` is called.
convertQuoteToFormattedDisplayPrice: This is a callback function. Pass a callback to be utilized by the render function to convert the quote premium to a formatted, localized display price. An example of this is to set this to the `convertQuoteToFormattedDisplayPrice` property of the `ExtendShopify` object. That function is purpose-built to be used here to convert the quote premium to a formatted display price using Shopify's calculation behind the scenes.

Updating Shipping Quote

Call Extend.shippingProtection.update anytime there are changes to the cart. This includes anytime a product quantity is changed or if a product is removed/added while on the cart page. This may invoke the onUpdate callback function that was passed into the Extend.shippingProtection.render() method if there was any change in Shipping Protection Offer.

  Extend.shippingProtection.update({items:ShippingOffersItem[],isShippingProtectionInCart:boolean})

items - Mapping of all the items in the cart except Extend Items. You will need to parse the cart object and map it to the Extend cart item format in order to display the updated Shipping Protection offer.
isShippingProtectionInCart - This takes in a boolean to determine if the shipping protection is in the cart already. This property will be used to trigger onUpdate callback. Please send in the correct value by evaluating the cart object.

Caching user selection

Whenever a customer interacts with the Shipping Protection checkbox their selection will be saved to the user configuration in the session storage of their browser. This can be used along with merchant attachBehavior to determine whether the Extend Shipping Protection line item will be added to the cart or not.

interface ShippingProtectionUserConfig {
  isUserOptOut: boolean
}
setSPUserConfig(options:ShippingProtectionUserConfig)
getSPUserConfig():ShippingProtectionUserConfig

Merchants have the option to set loyaltyStatus for loyalty customers. Loyalty status will be passed in while retrieving shipping-offer quote.

interface ShippingProtectionUserLoyaltyStatus {
  loyaltyStatus?: string
}
setSPUserLoyaltyStatus(options:ShippingProtectionUserLoyaltyStatus)
getSPUserLoyaltyStatus():ShippingProtectionUserLoyaltyStatus

Removing the Extend Shipping Protection Component

Call Extend.ShippingProtection.destroy to remove the Shipping Protection container from the DOM and unmount the iframe.

Extend Analytics

The Extend SDK uses event trackers to capture the purchasing behavior of customers as they interact with Extend protection plans and their associated products. This information is used to provide metrics and analytics about the performance of Extend within a merchant’s store.

The following outlines the different methods the Extend SDK uses to capture those analytics. Each section includes a description of what the method does, when it should be invoked, and what parameters to provide it, as well as best practices for website integration.

Installation

If Extend SDK is not already installed on your store then follow the steps found in the Installation section of this document.

Browser Support

The Extend Analytics SDK currently supports the latest versions of the following browsers:

Chrome
Firefox
Safari
Edge

API Reference

Debug Mode

The Extend SDK has a debug feature that is useful for the testing the integration of the SDK in your store. This will help you determine if you are correctly integrating with the methods in the SDK.

Debug mode can be activated in the SDK by passing in debug: true to the Extend.config method. When debug mode is activated, all tracking activity will not be sent to our analytics platform. All methods will log an error to the browser’s console if the methods are configured incorrectly, such as missing required arguments, incorrect quantity values, etc.

Please be sure to disable debug mode in production in order for the events to be sent to our analytics platform.

Extend.trackOfferViewed

Extend.trackOfferViewed takes in your product’s productId and an OfferType. This method should be called whenever an Extend warranty offer is rendered on the screen to a user. This function will be called from Offers Buttons and Offer Modals.

Extend.trackOfferViewed({
  productId: '<PRODUCT_REFERENCE_ID>',
  offerType,
})

Interface

interface TrackOfferViewed {
  productId: string
  offerType: OfferType
}

Attributes

Attribute	Data type	Description
productId required	string	the ID of the product associated with the warranty being viewed
offerType required	OfferType	see OfferType

Extend.trackProductAddedToCart

Extend.trackProductAddedToCart takes in your product’s productId and the number of units the customer wishes to add to the cart, as productQuantity. This method should be called when a user adds a product to the cart.

Extend.trackProductAddedToCart({
  productid: '<PRODUCT_REFERENCE_ID>',
  productQuantity: '<PRODUCT_QUANTITY>',
})

Interface

interface TrackProductAdded {
  productId: string
  productQuantity: number
}

Attributes

Attribute	Data type	Description
productId required	string	The ID of the product in your store. Should match the `referenceId` used in the Create Product request to Extend
productQuantity required	number	The initial amount of units the customer added to the cart

Extend.trackOfferAddedToCart

Extend.trackOfferAddedToCart takes in your product’s productId and the productQuantity, along with the Extend warranty’s planId and offerType. This method is used to track when a customer has added an Extend warranty to the cart. Invoke this method when a customer adds an Extend warranty to the cart for a specific product.

Extend.trackOfferAddedToCart({
  productId: '<PRODUCT_REFERENCE_ID>',
  productQuantity: '<PRODUCT_QUANTITY>',
  planId: '<EXTEND_WARRANTY_PLAN_ID>',
  offerType: `OfferType`,
})

Interface

interface TrackOfferAddedToCart {
  productId: string
  productQuantity: number
  planId: string
  offerType: OfferType
}

Attributes

Attribute	Data type	Description
productId required	string	The ID of the product associated with the warranty that was added to the cart. The product ID should match the `referenceId` used in the Create Product request to Extend
productQuantity required	number	The quantity of the associated product that was added to the cart
planId required	string	The `id` property on the Extend warranty product returned from the Get Offers request
offerType required	OfferType	Information regarding where in the website the user selected the warranty offer. See OfferType

Extend.trackOfferRemovedFromCart

Extend.trackOfferRemovedFromCart takes the planId of the Extend warranty, and the associated productId of the product the warranty would have covered. This method is used to track when a customer has removed an Extend warranty from the cart. Invoke this method when a customer removes an Extend warranty from the cart for a specific product.

Extend.trackOfferRemovedFromCart({
  productId: '<PRODUCT_REFERENCE_ID>',
  planId: '<EXTEND_WARRANTY_PLAN_ID>',
})

Interface

interface TrackOfferRemovedFromCart {
  productId: string
  planId: string
}

Attributes

Attribute	Data type	Description
productId required	string	The ID of the product associated with the warranty that was added to the cart. The product ID should match the `referenceId` used in the Create Product request to Extend
planId required	string	The `id` property on the Extend warranty product returned from the Get Offers request

Extend.trackOfferUpdated

Extend.trackOfferUpdated takes the planId of the Extend warranty, and the associated productId of the product the warranty covers, as well as an update object containing the set of updates to apply to the warranty offer. This method is used to track when a customer increments or decrements the quantity of a warranty that has already been added to the cart. If the quantity of the warranty is updated to 0, then a Extend.trackOfferRemoved event is called, and further updates to this planId/productId will result in a no-op until it is re-added via Extend.trackOfferAddedToCart.

Extend.trackOfferUpdated({
  productId: '<PRODUCT_REFERENCE_ID>',
  planId: '<EXTEND_WARRANTY_PLAN_ID>',
  updates: {
    warrantyQuantity: '<NEW_WARRANTY_QUANTITY>',
    productQuantity: '<NEW_PRODUCT_QUANTITY>',
  },
})

Interface

interface TrackOfferUpdatedEvent {
  productId: string
  planId: string
  updates: {
    warrantyQuantity?: number
    productQuantity?: number
  }
}

Attributes

Attribute	Data type	Description
productId required	string	The ID of the product associated with the warranty that was added to the cart. The product ID should match the `referenceId` used in the Create Product request to Extend
planId required	string	The `id` property on the Extend warranty product returned from the Get Offers request
updates required	Object	The set of updates to apply to the offer. Currently, either `warrantyQuantity` or `productQuantity` are values available to be updated.

Extend.trackProductRemovedFromCart

Extend.trackProductRemovedFromCart takes the productId of the product being removed from the cart. This method is used to track when a customer removes a product from the cart that does not have a warranty offer associated with it.

Extend.trackProductRemovedFromCart({
  productId: '<PRODUCT_REFERENCE_ID>',
})

Interface

interface TrackProductRemovedEvent {
  productId: string
}

Attributes

Attribute	Data type	Description
productId required	string	The ID of the product associated with the warranty that was added to the cart. The product ID should match the `referenceId` used in the Create Product request to Extend

Extend.trackProductUpdated

Extend.trackProductUpdated takes the productId of the product being updated, as well as an updates object containing the set of updates to apply to the product. This method is used to track when a customer increments or decrements the quantity of a product that has already been added to the cart. The product being updated must not be associated with a warranty offer. For updating products associated with a warranty offer, see Extend.trackOfferUpdated

If the productQuantity passed into this method is 0, then Extend.trackProductRemovedFromCart is implicitly called. The product will no longer be considered tracked. and must be re-added using Extend.trackProductAddedToCart.

Extend.trackProductUpdated({
  productId: '<PRODUCT_REFERENCE_ID>',
  updates: {
    productQuantity: '<NEW_PRODUCT_QUANTITY>',
  },
})

Interface

interface TrackProductUpdatedEvent {
  productId: string
  updates: {
    productQuantity: number
  }
}

Attributes

Attribute	Data type	Description
productId required	string	The ID of the product associated with the warranty that was added to the cart. The product ID should match the `referenceId` used in the Create Product request to Extend
updates required	Object	The set of updates to apply to the product. Currently, updating the `productQuantity` is the only available option.

Extend.trackCartCheckout

Extend.trackCartCheckout captures the resulting set of products and warranties that were tracked in a user’s session (via trackOfferAddedToCart, trackProductAddedToCart, etc.). This method should be called whenever a customer completes a purchase. This will help track the products and Extend warranty offers sold for your store, and optionally, the total cart revenue of the items at checkout.

Note: The Analytics SDK leverages the tracked products and items in localStorage to determine what values were purchased at checkout. These values are removed from localStorages once this method is called after the user checks out.

Extend.trackCartCheckout({
  cartTotal: '<CART_TOTAL>',
})

Attributes

Attribute	Data type	Description
cartTotal optional	number	The total amount of revenue (implicitly represented as USD), of the cart at the time of checkout.

Extend.trackLinkClicked

Extend.trackLinkClicked captures customer interactions with “Learn More” and “?” buttons and “See Plan Details” links. This method is used to record details when a customer opens the learn-more modal or navigates to Extend’s plan details page.

Extend.trackLinkClicked({
  linkEvent: 'LinkEvent',
  productId: '<PRODUCT_REFERENCE_ID>',
  linkType: 'LinkType',
})

Interface

interface TrackLinkClicked {
  linkEvent: LinkEvent
  productId: string
  linkType: LinkType
}

Attributes

Attribute	Data type	Description
linkEvent required	LinkEvent	Information about what link was clicked. See LinkEvent
productId required	string	The ID of the product associated with the warranty that was added to the cart. The product ID should match the `referenceId` used in the Create Product request to Extend
linkType required	LinkType	Information about where on the website a link was clicked. See LinkType

Extend.trackSPOfferAddedToCart

Extend.trackSPOfferAddedToCart takes in array of items in user’s cart items, shipping protection quote quote and an optional message message. This method should be called whenever shipping protection offer is added to cart. In case of supported e-commerce platforms, this method will be called automatically when the user adds a shipping protection offer to the cart. Supported e-commerce platforms are: Shopify, and BigCommerce.

Interface

Extend.trackSPOfferAddedToCart({
  items: Array<ShippingOffersItem>,
  quote: ShippingOffersQuote,
  message: string,
});

Attributes

Attribute	Data type	Description
items required	Array	Information about list of products added to user’s cart ShippingOffersItem
quote required	ShippingOffersQuote or null	Information about the shipping offers quote served by the Extend for current list of products in the user’s cart ShippingOffersQuote.
message	string	Optional message that can be captured in tracking. It can be used later for filtering tracking data.

Extend.trackSPOfferRemovedFromCart

Extend.trackSPOfferRemovedFromCart takes in array of items in user’s cart items, shipping protection quote quote and an optional message message. This method should be called whenever shipping protectio offers is removed from cart. In case of supported e-commerce platforms, this method will be called automatically when the user adds a shipping protection offer to the cart. Supported e-commerce platforms are: Shopify, and BigCommerce.

Extend.trackSPOfferRemovedFromCart({
  items: Array<ShippingOffersItem>,
  quote: ShippingOffersQuote,
  message: string,
});

Attributes

Attribute	Data type	Description
items required	Array	Information about list of products added to user’s cart ShippingOffersItem
quote required	ShippingOffersQuote or null	Information about the shipping offers quote served by the Extend for current list of products in the user’s cart. ShippingOffersQuote
message	string	Optional message that can be captured in tracking. It can be used later for filtering tracking data.

Extend.trackSPOfferUpdatedInCart

Extend.trackSPOfferUpdatedInCart takes in array of items in user’s cart items, shipping protection quote quote, old quote id oldQuoteId, old premium oldPremium and an optional message message. This method should be called whenever shipping protection offers is updated in cart. Shipping Protection offer will be update whenever there is change in the cart. In case of supported e-commerce platforms, this method will be called automatically when the user adds a shipping protection offer to the cart. Supported e-commerce platforms are: Shopify, and BigCommerce.

Extend.trackSPOfferUpdatedInCart({
  items: Array<ShippingOffersItem>,
  quote: ShippingOffersQuote,
  message: string,
  oldQuoteId: string,
  oldPremium: string,
});

Attributes

Attribute	Data type	Description
items required	Array	Information about list of products added to user’s cart ShippingOffersItem
quote required	ShippingOffersQuote or null	Information about the shipping offers quote served by the Extend for current list of products in the user’s cart.
oldQuoteId required	string	The ID of the shipping offers quote that was previously served by the Extend for old list of products in the user’s cart. ShippingOffersQuote
oldPremium	string	The premium of the shipping offers quote that was previously served by the Extend for old list of products in the user’s cart.
message	string	Optional message that can be captured in tracking. It can be used later for filtering tracking data.

Shared Interface and Type Glossary

`OfferType`

Interface

interface OfferType {
  area: OfferTypeArea
  component: OfferTypeComponent
}

Attributes

Attribute	Data type	Description
area required	OfferTypeArea	Predefined string indicating where the offer was rendered
component required	OfferTypeComponent	Predefined string indicating which offer type was rendered

`OfferTypeArea`

Type

type OfferTypeArea =
  | 'product_page'
  | 'product_modal'
  | 'collection'
  | 'cart_page'
  | 'post_purchase_modal'

`OfferTypeComponent`

Type

type OfferTypeComponent = 'buttons' | 'modal'

`LinkEvent`

Type

type LinkEvent = 'learn_more_clicked' | 'plan_details_clicked'

`LinkType`

Interface

interface LinkType {
  area: LinkTypeArea
  component: LinkTypeComponent
}

Attributes

Attribute	Data type	Description
area required	LinkTypeArea	Predefined string indicating where the link was clicked
component required	LinkTypeComponent	Predefined string indicating which link type was clicked

`LinkTypeArea`

Type

type LinkTypeArea =
  | 'product_page'
  | 'cart_page'
  | 'learn_more_modal'
  | 'offer_modal'
  | 'simple_offer_modal'
  | 'post_purchase_modal'

`LinkTypeComponent`

Type

type LinkTypeComponent = 'learn_more_info_icon' | 'learn_more_info_link' | 'see_plan_details_link'

`ShippingOffersItem`

Interface

interface ShippingOffersItem {
  referenceId: string
  quantity: number
  purchasePrice: number
  productName: string
}

`ShippingOffersQuote`

Interface

interface ShippingOffersQuote {
  id: string
  premium: number
  currency: string
  excludedProducts?: string[]
}

Getting Started

Installation

Displaying Product Offers and Cart Offers

Initialization

Accessing the component instance

Handling product selection changes

Adding a warranty to the cart

Displaying a Modal Offer

Opening the modal offer

Piecing it all together

API Reference

Extend.config(config: object)

Extend.buttons.render(selector: string, options: object)

Extend.buttons.renderSimpleOffer(selector: string, options: object)

Extend.buttons.instance(selector: string): ButtonsComponent

ButtonsComponent#getActiveProduct(): ActiveProduct | null

ButtonsComponent#setActiveProduct(referenceId: string | number)

ButtonsComponent#getPlanSelection(): PlanSelection | null

Extend.modal.open(options: object)

Shipping Protection

Displaying Extend Shipping Protection Offers

Shipping Protection Component

Initialization

Extend.shippingProtection.render Interface Reference

Updating Shipping Quote

Caching user selection

Removing the Extend Shipping Protection Component

Extend Analytics

Table of Contents:

Installation

Browser Support

API Reference

Debug Mode

Extend.trackOfferViewed

Interface

Attributes

Extend.trackProductAddedToCart

Interface

Attributes

Extend.trackOfferAddedToCart

Interface

Attributes

Extend.trackOfferRemovedFromCart

Interface

Attributes

Extend.trackOfferUpdated

Interface

Attributes

Extend.trackProductRemovedFromCart

Interface

Attributes

Extend.trackProductUpdated

Interface

Attributes

Extend.trackCartCheckout

Attributes

Extend.trackLinkClicked

Interface

Attributes

Extend.trackSPOfferAddedToCart

Interface

Attributes

Extend.trackSPOfferRemovedFromCart

Attributes

Extend.trackSPOfferUpdatedInCart

Attributes

Shared Interface and Type Glossary

OfferType

Interface

Attributes

OfferTypeArea

Type

OfferTypeComponent

Type

LinkEvent

Type

LinkType

Interface

Attributes

LinkTypeArea

`OfferType`

`OfferTypeArea`

`OfferTypeComponent`

`LinkEvent`

`LinkType`

`LinkTypeArea`

`LinkTypeComponent`

`ShippingOffersItem`

`ShippingOffersQuote`