How to use the ToughClicks JS Library

Adding ToughClicks to your web application is simple. There are 3 primary steps you must follow to ensure a successful integration. During your integration process, if you would like to consult the ToughClicks development team, please send an email to [email protected] with your question. If you'd prefer a synchronous consultation, ask your ToughClicks account manager to schedule a meeting with the development team.

Before you start

See Managing Clients and Managing Packetsfor details on how to acquire a ClientId and PacketId.

For testing purposes, feel free to use the following (we may change/break these at any time):
ClientId: 477951a5-069b-401f-ab7f-32db486d5741
PacketId: 3646a13b-cbd1-482c-9947-460cb74a71f2

1. Add our Library and Instantiate ToughClicks

First, you'll start by adding the ToughClicks JS Library to your webpage.

CDN Installation

<script src="https://cdn.toughclicks.com/lib/{version}/toughclicks.umd.js"></script>

Then, you will instantiate a new instance of the ToughClicks Library.

const { ToughClicks } = window.ToughClicks
const tc = new ToughClicks(clientToken, packetId);

NPM Installation

View Package on NPM

import { ToughClicks, TCDisplayOptions, TCDisplayMethod, TCEventTypes } from '@toughclicks/js-client-sdk';
const TC = new ToughClicks(clientToken, packetId);

Optionally: Include Default CSS

You may want to include our default CSS styles. You can override our CSS entirely if you want. See CSS Customization

<!-- optionally add css -->
<link rel="stylesheet" href="https://cdn.toughclicks.com/lib/<version>/toughclicks.css" />

2. Set your display options

Now that you have an instance of ToughClicks, you will need to tell the library how you want it to behave. To do so, you will pass a DisplayOptions object to TC.setDisplayOptions(options). The setDisplayOptions() function will return true if the options are valid.

We have comprehensive documentation about Customizing The Behavior of the library.

Example:

const options = {
  containerId: "tc-agreements", //required. Div we should inject UI into.
  signerIdSelector: "userEmailInput", //optional. Input field we should monitor for user identifier such as an email input in a sign up form.
  signerId: null, //optional. If you have the user identifier, you can pass it here.
  displayMethod: TCDisplayMethod.individual, //optional. Leave blank to control on Webapp
  shouldOpenModal: false, //optional. Leave blank to control on Webapp
  manualAcceptance: true, //optional. If true, you must call tc.accept() manually.
};
TC.setDisplayOptions(options);

3. Render the checkboxes

Now that you have set your display options, you can now ask ToughClicks to render the acceptance checkboxes. To do so, call:

TC.render();

Recommended Steps

We recommend that you take a few more steps to improve your implementation.

Register Event Listeners - Events & Listeners
Customize the ToughClicks Library - Customizing The Behavior and CSS Customization
Include Custom Data - Custom Data