Thanks JS React adapter

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

Installation

``bash
yarn add @thanksjs/react
`

Usage

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

/// somewhere in your code
;
`

To close Widget just unmount .

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

Parameters

Refer to the full
Thanks API configuration documentation for more.

$3

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

`tsx
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.

`tsx
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.

$3

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