@thanksjs/react

Thanks JS React adapter

ThanksJS React-Native | ThanksJS React | ThanksJS Web | Integration Examples

Installation

yarn add @thanksjs/react

Usage

import { ThanksWidget } from '@thanksjs/react';

/// somewhere in your code
<ThanksWidget partnerId="{your partner id}" />;

To close Widget just unmount <ThanksWidget/>.

It's all comes with TypeScript support, dont worry.

Parameters

Refer to the full Thanks API configuration documentation for more.

Advanced usage

The important parts are:

• providing a customer email. Strictly sha256 hash will be transferred during the widget lifecycle. No sensitive information leaves your application without your permission.
• giving permission to send Personal Information to improve efficiency of communications
  • subject and info can be used to decide what information to send
    • subject can be notification or autofill of visible UI elements
  • info.token is a unique identifier for the request and can be used to trace PII flow further in our systems
• keywords, category and items are used to fine-tune ads to display

Example

<ThanksWidget
  partnerId="{your partner id}"
  // information for the first scren
  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']}
/>

Managing Personal Information

By default, Thanks Widget does not send any personal information. The email specified in configuration is always converted into sha256 emailHash before being sent to server. All other extended information provided is used only to improve the efficiency of the widget and is not stored unless user performs an action. In such case the information will kept until the action is settled, but no longer than 60 days.

However, there are situations when we need Partner to provide Personal Information:

• to improve our communications and send email notification to the user following their actions
• prefill a form with user's data to ease their interactions

In both case we are going to call onPersonalInformationRequest function with subject and info arguments. Depending on request you may decide to return some information, or return nothing.

onPersonalInformationRequest: (subject: 'notification' | 'autofill', info) => {
  return {
    email,
    firstName: 'TestUser',
  };
};

• subject of type notification will be used to send email notification to the user about the action just taken, for example coupon code they just claimed
• subject of type autofill will be used to prefill a form with user's data, making the subscription process friction less

In case of onPersonalInformationRequest is not defined, but email is provided as a part of configuraiton - nothing will happen. The process of capturing PII information is always in the Partners hands.

💡It's not always known upfront if PII is required, so onPersonalInformationRequest will be called more often than PII information is being "consumed". In case it was not required, the information will be discarded.

Using PII information for Promotions

While not every Ad requires PII, some Ads can have a "Promotion" attached to them, for example "Subscribe to XYZ newsletter to enter the draw". In case of user action PII information might not be used by a particular Ad, but will be used by Promotion to keep track of participation. The information will be redacted after the Promotion ends.

License

MIT