Installation

This guide is the reference for the TeakOS Widget, which shows Teak's protection offer in your checkout. For a step-by-step walkthrough, start with the TeakOS integration guide.

One protection product per checkout

Offering more than one protection product together isn't available yet. This guide will be updated when it is.

Loader script

Add the loader to the <head> of each page that shows the widget:

<script>
  (function (w, d, c, n, s, p) {
    w[n] = w[n] || function () { (w[n].q = w[n].q || []).push(arguments); };
    w[n].l = +new Date();
    s = d.createElement(c);
    p = d.getElementsByTagName(c)[0];
    s.async = true;
    s.type = 'module';
    s.src = 'https://icw.helloteak.com/teak.js';
    s.onerror = function () {
      // Optional: the widget script couldn't load. Continue checkout without protection.
    };
    p.parentNode.insertBefore(s, p);
  })(window, document, 'script', 'teak');
</script>

The loader defines a global teak function straight away and queues your calls until teak.js has loaded. So you can call teak(...) anywhere after the loader. The script loads asynchronously, so it doesn't slow down your page.

teak.js is served as a JavaScript module and always delivers the current widget version.

Widget elements

Place a <teak-widget> element where the offer should appear. The widget renders inside it.

An element's id sets the product types for items that don't have their own productTypes, so only give it an id that's one of your product types.

At least one <teak-widget> must be on the page when you call configure, or the widget reports an error. The widget waits for the page to finish loading before it looks for the element, so you can call configure from the <head>.

One widget per cart line

To show a separate offer next to each line in a cart, add a <teak-widget> for each line with item-index, the zero-based position of the line in the items you pass to configure:

<teak-widget item-index="0"></teak-widget>
<teak-widget item-index="1"></teak-widget>

Each widget then controls protection for its own line. Without item-index, one widget controls protection for the whole cart.

Content Security Policy

If your site sets a Content Security Policy, allow:

Directive	Value
`script-src`	`https://icw.helloteak.com`
`connect-src`	`https://api.helloteak.com` and, for testing, `https://api.sandbox.helloteak.com`

If the browser console shows requests from the widget being blocked, send the messages to your Teak integration contact.

Next steps

With the widget loaded, configure it:

Check every option and item field in configuration options.
Add the widget to your checkout page and pass in the cart.