npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@thanksjs/web

v1.1.0

Published

[ThanksJS React-Native](https://www.npmjs.com/package/@thanksjs/react-native-webview) | [ThanksJS React](https://www.npmjs.com/package/@thanksjs/react) | [ThanksJS Web](https://www.npmjs.com/package/@thanksjs/web) | [Integration Examples](https://github.c

Downloads

209

Readme

Thanks JS Adapter

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

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 Thanks Configuration section
});
displayThanksWidget();

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

Parameters

Refer to the full Thanks API configuration documentation for more.

Closing widget by request

To close widget by request, for example in case of navigation call corresponding function

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

closeThanksWidget();

this call is equal to low-level window.__thanks.closeWidget() call.

Advanced usage

In order to improve the efficiency of Thanks Widget extra information should be provided.

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

configureThanksWidget({
  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'],
});

displayThanksWidget();

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