React-Drift

React component implementation of Drift Chatbot Widget.

Install

npm install react-driftjs

Usage

import Drift from "react-driftjs";

<Drift appId="xxxxx" />; //get the appId from drift.com

Identify User / Assign Attributes

To identify the user with an ID that is unique in your application, include a userId property with that value. This will trigger the chatbot to use the identify method. If userId is omitted, the component will have the chatbot use the setUserAttributes method.

<Drift
  appId="xxxxx"
  userId="1234"
  attributes={{ email: "user@example.com", company: "Acme Inc" }}
/>

Add Event Handlers

The chatbot widget emits several events. A listing of the events can be found here: https://devdocs.drift.com/docs/drift-events#section-first-interaction To handle the events, assign an array of objects to the eventHandlers property. The event property will match the name of the event emitted by drift. The function property is the function definition of the handler.

<Drift
  appId="xxxxx"
  eventHandlers={[
    { event: "conversation:firstInteraction", function: handleInteraction },
  ]}
/>;

const handleInteraction = function () {
  console.log("User has just interacted with the chatbot");
};

Add Custom Styles

To add custom styling to the root <iframe> element (e.g. to change the position of the chatbot widget) you can assign a style object to the style property. This object will be parsed as a css string and added to a style tag in the head of the document.

<Drift
  appId="xxxxx"
  style={{
    bottom: "100px",
  }}
/>

TypeScript

Includes TypeScript definitions.

About Drift

More information can be found here: https://www.drift.com/

License

MIT