Twilio Compliance Embed React SDK

Client-Side Integration

After initializing a ComplianceInquiry using the server-side integration guide, you may render the embedded experience in your website using the TwilioComplianceEmbed React client. The client-side integration is the same process across all supported products such as customer profiles, toll-free verification, etc.

Installation

Install the package in your React project using your preferred package manager:

NPM:

npm install @twilio/twilio-compliance-embed

Yarn:

yarn add @twilio/twilio-compliance-embed

Usage

React

The ComplianceInquiry UI can be embedded into your site with the following code snippet:

import * as React from "react";
import { TwilioComplianceEmbed } from "@twilio/twilio-compliance-embed";

const ComplianceInquiry = () => {
  return (
    <TwilioComplianceEmbed
      inquiryId="<your inquiry id from server-side request>"
      inquirySessionToken="<your inquiry session token from server-side request>"
    />
  );
};

Note: launching the ComplianceInquiry UI may take a few seconds to load & render.

Example with widget padding

import * as React from "react";
import { Spinner } from "@twilio-paste/core/spinner";
import { TwilioComplianceEmbed } from "@twilio/twilio-compliance-embed";

function MyComplianceInquiry() {
  const [data, setData] = React.useState(null);
  const [isLoading, setLoading] = React.useState(true);

  React.useEffect(() => {
    fetch("/my/backend/server/api", {
      method: "get",
    })
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  return !isLoading ? (
    <TwilioComplianceEmbed
      inquiryId={data.inquiry_id}
      sessionToken={data.inquiry_session_token}
      onReady={() => {
        console.log("Ready!");
      }}
      onInquirySubmitted={() => {
        console.log("Registration complete");
      }}
      widgetPadding={{ top: 0, left: 100, right: 100, bottom: 0 }}
    />
  ) : (
    <Spinner decorative={false} title="Loading" />
  );
}

export default MyComplianceInquiry;

Available Properties

| Name | Type | Description | | ------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | inquiryId | (Required) String | A valid inquiryId returned by the server-side initialize call | | inquirySessionToken | (Required) String | A valid inquirySessionToken returned by the server-side initialize call | | onInquirySubmitted | () => void | An event handler that fires when the user has completed the ComplianceInquiry process. This event is fired when the user lands on the last page. | | onCancel | () => void | An event handler that fires when the user has canceled the ComplianceInquiry process | | onError | () => void | An event handler that fires when an unexpected error occurs during the ComplianceInquiry process | | onReady | () => void | An event handler that fires when the ComplianceInquiry UI has finished loading | | widgetPadding | { top?: number; bottom?: number; left?: number; right?: number; } | Allows customizing the internal padding inside the iframe. If this is not passed it will use the default values {top: 74, left: 24, right: 24, bottom: 24} |

Other Frameworks

We do not provide native support for integrations with other frontend frameworks today. However, you’re free to explore its compatibility with your own set-up. See this GitHub repo as an example for how you may integrate the Compliance Embeddable into a web page that is not built on top of React leveraging Twilio CLI and Serverless Toolkit. In addition, you are free to explore integration methods on your own using third-party libraries such as veaury NPM, etc. But please note, Twilio is not responsible for maintaining compatibility with these third-party libraries.

Security

Exchange of all sensitive information such as credentials, permanent resource identifiers, and PII is designed to occur securely between your website, your server and the Twilio API.

1. Your customer initiates the ComplianceInquiry UI in your site.
2. Your server will request the inquiryId & the ephemeral inquirySessionToken from the Twilio API using Twilio’s REST API authentication mechanism (https://www.twilio.com/docs/iam/credentials/api).
3. Your server will return the inquiryId & inquirySessionToken to your website to be passed into the TwilioComplianceEmbed client component.

Note: we recommend enabling CSP (Content Security Policy) as an added layer of security to protect these secrets in the browser.

The TwilioComplianceEmbed client component will launch and securely load the ComplianceInquiry experience automatically.

License

This project is licensed under the MIT License.