Guides
Start typing to search…

JavaScript Reference

Thanks Script

The Thanks script needs to be placed on the checkout confirmation page in order to allow the Thanks widget to appear for customers. This can be done via a tag manager like GTM if you have one in place or directly on the page.

Pop-up

For the highest revenue opportunity we recommended making use of the Thanks pop-up.

<html>
  <div id="thanks-widget"></div>
  <script>
  __thanks = {
    partnerId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    statusText: "Your order is confirmed!",
    email: "[email protected]",
    enabledPersonalInformationSubjects: {
      relevance: true,
      autofill: true,
      notification: true
    },
    onPersonalInformationRequest: (subject, { token }) => {
      return {
        email: "[email protected]",
        firstName: "Emma",
        lastName: "Jackson",
        phoneNumber: "+12025550125",
        dateOfBirth: "2000-09-15",
        age: 25,
        gender: "female"
      }
    },
    customerLocation: {
      country: 'US',
			postcode: '90210'
    },
    keywords: ["apple", "banana", "orange"],
		categories: ["food", "fruits"],
    items: [{
      name: 'Apple',
      category: 'fruit',
      value: 10,
      currency: 'USD',
			quantity: 10
		}]
  };
  </script>
  <script src="https://thanks.is/v1/widget.js" defer></script>
</html>

Embedded

You can also use the embedded form of the Thanks widget by including the embeddedInto parameter:

<html>
  <style>
    #thanks-widget {
      width:100%;
      height: 120px;
    }
  </style>
  <div id="thanks-widget" />
  <script>
    __thanks = {
      partnerId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
      statusText: "Your order is confirmed!",
      embeddedInto: () => document.getElementById('thanks-widget'),
      email: "[email protected]",
			enabledPersonalInformationSubjects: {
        relevance: true,
        autofill: true,
        notification: true
      },
      onPersonalInformationRequest: (subject, { token }) => {
        return {
          email: "[email protected]",
          firstName: "Emma",
          lastName: "Jackson",
          phoneNumber: "+12025550125",
          dateOfBirth: "2000-09-15",
          age: 25,
          gender: "female"
        }
      },
      customerLocation: {
        country: 'US',
        postcode: '90210'
      },
      keywords: ["apple", "banana", "orange"],
      categories: ["food", "fruits"],
      items: [{
        name: 'Apple',
        category: 'fruit',
        value: 10,
        currency: 'USD',
        quantity: 10
      }]
    }
  </script>
</html>

Note: this CSS is currently recommended, however the embed will likely evolve over time and the recommended styling may update to reflect different placements on a page. If you have any requests or recommendations (such as a new desired sizing) please let us know !

Embed Slots

Some of our embedded variations utilise "slots" to support different shapes and sizes of HTML embed elements. The current slot sizes are:

  • 300X250 - Square (300 x 250)
  • 300X600 - Skyscraper (300 x 600)
  • 460X94 - Horizontal (460 x 94)
  • 728X90 - Leaderboard (728 x 90)
  • 970X90 - S Leaderboard (970 x 90)
  • 360X144 - Responsive, dynamic width
  • 320X100 - Responsive, dynamic width
  • 970X250 - S Leaderboard (970 x 250)
  • 128px, dynamic width (used for mobile sizes)

Other sizes may be available, please contact us if you don't see your desired size.

The slots are not currently dynamic or interchangeable, that is, the same embed cannot be converted between slots at runtime. Each desired slot would have to be instantiated on the page before the Thanks javascript loads in.

Configuration Reference

See Configuration parameters

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

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. Thanks will request personal information via the onPersonalInformationRequest function with subject and info arguments. 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 configuration - nothing will happen. The process of capturing PII information is always in the Partners hands.

Updated 11 days ago