JavaScript/TypeScript

The @thanksjs/web package and its configureThanksWidget, displayThanksWidget, and closeThanksWidget functions still use the Thanks name. You don't need to change your integration.

Installation

yarn add @thanksjs/web

Usage

import { configureThanksWidget, displayThanksWidget } from '@thanksjs/web';

/// somewhere in your code
configureThanksWidget({
  partnerId: 'your partner id',
  // other available props, see Configuration Parameters
});
displayThanksWidget();

Everything ships with TypeScript types.

Parameters

Refer to the full
configuration parameters documentation.

Closing the widget on request

To close the widget on request, for example when the user navigates away, call the corresponding function:

import { closeThanksWidget } from '@thanksjs/web';

closeThanksWidget();

This call is equivalent to the low-level window.__thanks.closeWidget() call.

Advanced usage

To improve the performance of your experience, provide extra information.

The important parts are:

Providing a customer email. Only a sha256 hash is transferred during the widget lifecycle. No sensitive
information leaves your application without your permission.
Giving permission to send personal information to improve the efficiency of communications
- subject and info can be used to decide what information to send
  - subject can be relevance, notification, or autofill
- info.token is a unique identifier for the request and can be used to trace PII flow further in our systems
keywords, categories, and items are used to fine-tune the ads displayed

Example

configureThanksWidget({
  partnerId: 'your partner id',
  // information for the first screen
  statusText: 'Your order has been confirmed',
  emailHash: { sha256: customersEmailHash },
  // or
  email: customerEmail,
  onPersonalInformationRequest: (subject, info) => {
    return {
      email,
      firstName: 'TestUser',
    };
  },

  onDisplay: () => {
    console.log('widget displayed');
  },
  onClose: () => {
    console.log('widget closed');
  },

  keywords: ['violet', 'roses', 'blueberry'],
  items: [
    {
      name: 'Flatwhite',
      value: 4.0,
      currency: 'AUD',
      quantity: 2,
      type: 'coffee',
      category: 'drinks',
      subcategory: 'australian-coffee',
    },
  ],
  categories: ['lifestyle'],
});

displayThanksWidget();