Installing the PLuG Widget

Before getting started, you will need the following:

  • Access to your code base
  • Basic understanding of your code base as you need to know where to place the widget code.
  • Access to the Support Settings page in the DevRev app

Note: You can find additional configuration information here


AppToken#

  • The AppToken uniquely identifies your organization.
  • AppToken is sensitive and should not be exposed outside your organization.
  • You can find your AppToken from the Support Settings page within the DevRev app

RevToken#

  • A RevToken is a session token which identifies the RevUser when they interact with the widget.
  • This allows them to see previous conversations and tickets in the PLuG widget and allows you to identify them in the PLuG Inbox.
  • RevToken is generated using the AppToken and RevUser information.
  • RevToken should be generated on your backend since the AppToken needs to be kept hidden.

Frontend Installation: Vanilla Javascript#

  • To initialize the PLuG widget, copy and paste the following code snippet into your application. You can place it before the closing body tag. Ideally, this will be in a common file which is already included in all pages (ex. index.js)
const sessionToken = '<SESSION_TOKEN>'
<script src="https://plug.devrev.ai/{YOUR_ORG_NAME}/widget.js"></script>
<script>
  window.addEventListener('load', function () {
    const widget = new window.Plug({
        auth: {
            sessionToken: sessionToken
        }
     });
  });
</script>
  • Refer to the sections below for obtaining a sessionToken for a RevUser

Backend Installation: Generating the session token#

  • Retrieve your AppToken from the Support Settings page within the DevRev app

  • The example below shows how you could use DevRev's Token API to get a session token for a RevUser by using your DevOrg's AppToken.

  • For optimal security, this call must be made from the server side so that the DevOrg's AppToken is not exposed. This sample code is TypeScript but you can use your preferred language to make this API call.

You must include one of the following attributes email or external_uid for creating the user.

interface User {
  display_name?: string;        // [Optional] Display Name of the user.
  full_name?: string;           // [Optional] Full Name of the user.
  email?: string;               // Email address of the user. This will be used as unique identifier if `external_uid` is not present.
  external_uid?: string;        // The unique ID of the user in your system. If present, this will be preferred over the `email` as unique identifier for the user.
  external_uid_issuer?: string; // [Optional] Unique ID issuer if any.
  external_oid?: string;        // [Optional] Unique ID of the external Org the user belongs to.
  external_oid_issuer?: string; // [Optional] External Org ID issuer.
}

export async function getSessionTokenForRevUser(user: User) {
  // Token endpoint to call for obtaining session token.
  const url = 'https://api.devrev.ai/token';
  // Your Org's Application token which is required for provisioning a RevUser.
  const appToken = '<YOUR_APP_TOKEN>';

  const headers = {
    Authorization: appToken,
  };

  const response = await axios.post(
    url,
    {
      grant_type: 'urn:ietf:params:oauth:grant-type:token-exchange',
      subject_token: JSON.stringify(user),
      subject_token_type: 'urn:devrev:params:oauth:token-type:userinfo',
      requested_token_type: 'urn:devrev:params:oauth:token-type:session',
    },
    { headers },
  );
  const sessionToken = response.data['access_token'];
  return sessionToken;
}