PLuG Web SDK.mdx #97
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,124 @@ | ||||||
| Once you have [installed PLuG](./installation), all your users who interact with the widget are created as anonymous users in the DevRev app with a random name since there is no information about the user. | ||||||
|
|
||||||
| For users who are logged into your website, you can identify them in PLuG so they can view their past conversations. Identifying your users also enables more personalized engagement. | ||||||
|
|
||||||
| In this flow, you have to generate a session token for every user who visits your website. The session token identifies the customer when they interact with the widget. The session token is generated using the application access token and customer information. It should be generated on your website's back end since the app token needs to be kept hidden. | ||||||
|
|
||||||
| To identify logged-in users, follow these steps: | ||||||
|
|
||||||
| ## Generate an application access token | ||||||
|
|
||||||
| 1. In DevRev, go to **Settings > Support > PLuG Tokens** through the settings icon on the top-left corner. | ||||||
| 2. Under the **Application access tokens** panel, click **New token** and copy the token that's displayed. | ||||||
|
|
||||||
| <Callout intent="note"> | ||||||
| Ensure you copy your access token, as you will not be able to view it again. | ||||||
| </Callout> | ||||||
|
|
||||||
| ## Generate a session token | ||||||
|
|
||||||
| <Callout intent="note"> | ||||||
| For security reasons, this call should be made from the server side so that your AAT isn't exposed. | ||||||
| </Callout> | ||||||
|
|
||||||
| Using the `rev_info` method, you can generate and recognize a user within the DevRev system by providing relevant user details. This method enables you to convey information systematically, ensuring alignment between your DevRev CRM and the structured data model. For information regarding terminologies, click [here](https://devrev.ai/docs/product/grow). | ||||||
|
|
||||||
| ```bash | ||||||
| curl --location 'https://api.devrev.ai/auth-tokens.create' \ | ||||||
| --header 'accept: application/json, text/plain, */*' \ | ||||||
| --header 'authorization: <AAT>' \ | ||||||
| --header 'content-type: application/json' \ | ||||||
| --data-raw '{ | ||||||
| "rev_info": { | ||||||
| "user_ref": "[email protected]", | ||||||
| "account_ref": "devrev.ai", | ||||||
| "workspace_ref": "devrev-dev", | ||||||
| "user_traits": { | ||||||
| "email": "[email protected]", | ||||||
| "display_name": "Devrev Test USer", | ||||||
| "phone_numbers": ["+911122334455"], | ||||||
| "custom_fields": { | ||||||
| "tnt__<field1_name>": "value 1" | ||||||
| } | ||||||
| }, | ||||||
| "workspace_traits": { | ||||||
| "display_name": "Devrev Dev", | ||||||
| "custom_fields": {} | ||||||
| }, | ||||||
| "account_traits": { | ||||||
| "display_name": "Devrev", | ||||||
| "domains": [ | ||||||
| "devrev.ai" | ||||||
| ], | ||||||
| "phone_numbers": ["+919988998833"], | ||||||
| "custom_fields": { | ||||||
| "tnt__<field2_name>": "value x" | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
| }' | ||||||
|
|
||||||
| ``` | ||||||
|
|
||||||
| <Callout intent="note"> | ||||||
| Ensure that you follow the specified format when providing your phone number. | ||||||
| </Callout> | ||||||
|
|
||||||
| ### Passing custom attributes | ||||||
Atul-Butola marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
|
||||||
| To create custom attributes, see [Object customization](https://devrev.ai/docs/product/object-customization). | ||||||
|
|
||||||
| You can pass the custom attributes that are created as shown below: | ||||||
| ```json | ||||||
|
|
||||||
| "custom_fields": { | ||||||
| "tnt__custom_attribute_name1": <value>, | ||||||
| "tnt__custom_attribute_name2": <value>, | ||||||
| } | ||||||
| ``` | ||||||
|
|
||||||
| You can pass custom traits, as shown above, not only for `users` but also for `workspaces` and `accounts`. | ||||||
|
|
||||||
| If you prefer a two-level structure, where users are directly associated with an account instead of a workspace, you can provide the `user_ref` and details along with the `account_ref` and details. | ||||||
|
|
||||||
| **Attributes for users** | ||||||
|
|
||||||
| |Attributes |Description |Type | | ||||||
| |---|---|---| | ||||||
| |`user_ref` |A unique user reference that the DevRev app uses for identifying your users. This parameter is required. |string | | ||||||
| |`email` |The email address of the customer. It's used for sending email notifications of any support messages. |string | | ||||||
| |`display_name` |The name of the user that's shown on the widget. |string | | ||||||
| |`phone_numbers` |The mobile number of the customer. |array | | ||||||
|
|
||||||
| **Attributes for workspaces** | ||||||
|
|
||||||
| |Attributes |Description |Type | | ||||||
| |---|---|---| | ||||||
| |`workspace_ref` |A unique reference for the user's workspace. If not provided, and an account reference is passed, the user will be directly attached to the account. |string | | ||||||
|
There was a problem hiding this comment. 📝 [EkLine] reported by reviewdog 🐶
Suggested change
|
||||||
| |`display_name` |The name of the user that's shown on the widget. |string | | ||||||
|
|
||||||
| **Attributes for accounts** | ||||||
|
|
||||||
| |Attributes |Description |Type | | ||||||
| |---|---|---| | ||||||
| |`account_ref` |A unique reference for the account. |string | | ||||||
| |`display_name` | The name of the user that's shown on the widget. |string | | ||||||
| |`domains` |The domain names of the accounts that the users belongs to. |array | | ||||||
| | `phone_numbers` |The mobile number of the customer. |array | | ||||||
|
|
||||||
| ## Passing the session token | ||||||
Atul-Butola marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
|
||||||
| While initializing the PLuG widget you pass the session token for DevRev to identify this user and thereby make the widget more customized for the user and their context. | ||||||
|
|
||||||
| ```jsx | ||||||
| // You can generate this session token using the above API in your backend | ||||||
| const sessionToken = '<SESSION_TOKEN>' | ||||||
| <script type="text/javascript" src="https://plug-platform.devrev.ai/static/plug.js"></script> | ||||||
| <script> | ||||||
| (() => { | ||||||
| window.plugSDK.init({ | ||||||
| app_id: '<your_unique_app_id>', | ||||||
| session_token: sessionToken | ||||||
| })})(); | ||||||
| </script> | ||||||
| ``` | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| To get the PLuG search widget to appear on your website and web app, insert the code snippet provided below on every page where you want the widget to appear for website visitors. | ||
|
|
||
| ## Unique app ID | ||
|
There was a problem hiding this comment. Remove this section; it duplicates what's in the Web SDK installation page. |
||
|
|
||
| Ensure to replace the app ID with your app ID which identifies your PLuG search widget. You can access your app ID from your DevRev account by following these steps. | ||
|
|
||
| 1. In DevRev, go to **Settings** > **Support** > **PLuG Settings** through the settings icon in the top-left corner. | ||
| 2. Click **Enable PLuG Widget** if it isn't already enabled. | ||
| 3. Copy your **Unique App ID** from the **Configuration tab**. | ||
|
|
||
| <Tabs> | ||
| <Tab title="Setup"> | ||
| Place the following code in the `<head>` section of your HTML page: | ||
| ```html | ||
| <script | ||
| src="https://plug-platform.devrev.ai/static/plug.js" | ||
| type="text/javascript"> | ||
| </script> | ||
| ``` | ||
|
|
||
| Place the following code in the `<body>` section of your HTML page: | ||
| ```html | ||
| <script> | ||
| window.plugSDK.init({ | ||
| app_id: '<your_unique_app_id>', | ||
| disable_plug_chat_window: true, | ||
| }); | ||
|
|
||
| window.plugSDK.onEvent((payload) => { | ||
| if (payload.type === 'ON_PLUG_WIDGET_READY') { | ||
| window.plugSDK.initSearchAgent(); | ||
| } | ||
| }); | ||
| </script> | ||
| ``` | ||
| </Tab> | ||
| <Tab title="Setup for React"> | ||
| Place this code inside the react component where you want to render the chat widget. Typically you should do it as top level component like `App.js`. | ||
|
|
||
| ```jsx | ||
| useEffect(() => { | ||
| window.plugSDK.init({ | ||
| app_id: '<your_unique_app_id>', | ||
| disable_plug_chat_window: true, | ||
| }); | ||
|
|
||
| window.plugSDK.onEvent((payload) => { | ||
| if (payload.type === 'ON_PLUG_WIDGET_READY') { | ||
| window.plugSDK.initSearchAgent(); | ||
| } | ||
| }); | ||
| }, []); | ||
| ``` | ||
| </Tab> | ||
|
|
||
| </Tabs> | ||
|
|
||
| To toggle `searchAgent`, call the following method on any event required: | ||
| ``` | ||
| window.plugSDK.toggleSearchAgent(); | ||
| ``` | ||
|
|
||
| To prefill search input from outside the window, call the following method: | ||
| ``` | ||
| window.plugSDK.prefillSearchQuery(query:"string") | ||
| ``` | ||
|
|
||
| You should now have PLuG search widget installed on your website. Facing some issues? Reach out to us through our own PLuG chat widget from the bottom right of your screen. | ||
Atul-Butola marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| Once the widget is installed on your website, every user who visits your website is considered an anonymous user. Anonymous users are the users that come to your site and haven't yet logged in or shared any information. | ||
|
|
||
| After integrating the PLuG widget, you can personalize and contextualize customer engagement. Learn how to [identify your customers](./user-identity) and update their information. | ||
Atul-Butola marked this conversation as resolved.
Show resolved
Hide resolved
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| To install the PLuG SDK on your website or web application, insert the code snippet provided below on every page where you want the SDK to be active. Once the SDK is installed, the chat widget appears by default. | ||
|
|
||
| ## Getting your unique app ID | ||
|
|
||
| You can access your app ID from your DevRev account by following these steps: | ||
| 1. In DevRev, go to **Settings > Support > PLuG Settings** via the settings icon in the top-left corner. | ||
|
|
||
| 2. If the PLuG feature is not already enabled, click **Enable PLuG**. | ||
|
|
||
| 3. Under the **Configuration** tab, copy the **Unique App ID**. | ||
|
|
||
| <Tabs> | ||
| <Tab title="Setup"> | ||
| Place the following code in the `<head>` section of your HTML page: | ||
| ```html | ||
| <script | ||
| type="text/javascript" | ||
| src="https://plug-platform.devrev.ai/static/plug.js" | ||
| ></script> | ||
| ``` | ||
|
|
||
| Place the following code in the `<body>` section of your HTML page: | ||
|
|
||
| ```html | ||
| <script> | ||
| window.plugSDK.init({ | ||
| // Please ensure you replace the app_id with your unique app id | ||
| app_id: "<your_unique_app_id>", | ||
| }); | ||
| </script> | ||
| ``` | ||
| </Tab> | ||
| <Tab title="Setup for React"> | ||
| Add the following code to the public/index.html file, inside the `<body>` tag of your HTML page: | ||
|
|
||
| ```jsx | ||
| <script | ||
| type="text/javascript" | ||
| src="https://plug-platform.devrev.ai/static/plug.js" | ||
| ></script>; | ||
| ``` | ||
|
|
||
| Place the following code inside the React component where you want to render the PLuG widget. Typically, this should be done in a top-level component like `App.js`. | ||
|
|
||
| ```jsx | ||
|
|
||
| useEffect(() => { | ||
| window.plugSDK.init({ | ||
| // Please ensure you replace the app_id with your unique app id | ||
| app_id: "<your_unique_app_id>", | ||
| }); | ||
| }, []); | ||
| ``` | ||
| </Tab> | ||
|
|
||
| </Tabs> | ||
|
|
||
| The PLuG widget should now be installed on your website. If you experience any issues, you can reach out to us using our PLuG chat widget in the bottom right corner of your screen. | ||
|
|
||
| After the widget is installed on your website, every visitor is considered an anonymous user. Anonymous users are those who have not yet logged in or shared any personal information. | ||
|
|
||
| After integrating the PLuG widget, you can personalize and contextualize customer engagement. Learn how to [identify your customers](./user-identity) and update their information. | ||
|
|
||
| <Callout intent="note"> | ||
| Once the SDK is installed, the chat widget appears by default. If you are not using the PLuG SDK for support or chat-related flows, you can disable the chat widget by setting the `disable_plug_chat_window` input to `true`. | ||
| </Callout> | ||
|
|
||
| ``` | ||
| <script> | ||
| window.plugSDK.init({ | ||
| app_id: '<your_unique_app_id>', | ||
| disable_plug_chat_window: true, | ||
| }); | ||
| </script> | ||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📝 [EkLine] reported by reviewdog 🐶
Where possible, do not structure sentences in future tense. Use present tense instead. (EK00005)