React Guide

Install

The React SDK is available via npm:

npm install resubscribe-react-sdk

Setup

Import Resubscribe.

import Resubscribe from 'resubscribe-react-sdk';

Add the component to your tree. It will not render anything until you trigger it.

<main>
    ...
    <Resubscribe.Component />
</main>

When you would like to open up Resubscribe, call openWithConsent, replacing the placeholder values with your own values.

Resubscribe.openWithConsent({
  slug: '{organization-slug}',
  apiKey: '{api-key}',
  aiType: '{ai-type}',
  userId: '{uid}',
  userEmail: '{optionalEmail}',
  colors: {
    primary: 'blue',
    background: '#eee',
    text: '#333',
  },
});

The value of userId MUST be unique. If you do not have a unique user id at the point you want to make this call, we recommend generating a random value prefixed with 'anonymous-' for every user

Configuration

You can pass the following parameters into openWithConsent.

Param name	Description	Default Value
aiType	This value affects how the AI interacts with the user. Options are 'intent' and 'churn'. They are described in the Overview page.	'churn'
apiKey	The secret for authenticating with Resubscribe	Required
cancelButtonText	The text shown to the user on the button for declining to chat	'Not right now'
colors	You can set the values 'primary', 'text', and 'background' on the object passed in here in order to control the appearance of the UI
description	The smaller text shown in the consent dialog before the user chats with our bot	Varies by aiType
onClose	A function which gets called when the user exits the experience, with a parameter of 'cancel-consent' if the user pressed the cancel button in the dialog or 'close' if they pressed the close button in the chat interface
primaryButtonText	The text shown to the user on the button for consenting to chat	'Let's chat!'
slug	The short string identifying your organization	Required
title	The large text titling the consent dialog shown before the user chats with our bot	Varies by aiType
userEmail	A contact email for the user that gets plumbed through to all reports.
userId	A unique identifier for the user in question.	Required

Headless

Resubscribe additionally supports a headless mode if you would like more control over the consent modal. This is not recommended.