Skip to content

Commit a2ad9c0

Browse files
Atul-Butolabc-devrev
Atul-Butola
and
bc-devrev
authored
PLuG Web SDK.mdx (#97)
* Create web-sdk-install.mdx ISS-94327 * Create identify-web-user.mdx * Create search-install.mdx * Update public.yml * Update public.yml * Update public.yml * Update public.yml * Update public.yml * Update web-sdk-install.mdx * Update public.yml * Update web-sdk-install.mdx * Update identify-web-user.mdx * Update search-install.mdx * Update public.yml * Update public.yml * Update public.yml * Update public.yml * Update web-sdk-install.mdx * Update public.yml * Update public.yml * Update identify-web-user.mdx * Update public.yml * Update search-install.mdx * Update track-events.mdx * Apply suggestions from code review Co-authored-by: Ben Colborn <[email protected]> * Update identify-web-user.mdx * Update search-install.mdx * Update public.yml * Update web-sdk-install.mdx * Update identify-web-user.mdx * Apply suggestions from code review Co-authored-by: Ben Colborn <[email protected]> --------- Co-authored-by: Ben Colborn <[email protected]>
1 parent ead3e62 commit a2ad9c0

File tree

5 files changed

+284
-4
lines changed

5 files changed

+284
-4
lines changed

‎fern/docs/pages/plug-sdk/identify-web-user.mdx

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
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.
2+
3+
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.
4+
5+
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.
6+
7+
To identify logged-in users, follow these steps:
8+
9+
## Generate an application access token
10+
11+
1. In DevRev, go to **Settings > Support > PLuG Tokens** through the settings icon on the top-left corner.
12+
2. Under the **Application access tokens** panel, click **New token** and copy the token that's displayed.
13+
14+
<Callout intent="note">
15+
Ensure you copy your access token, as you will not be able to view it again.
16+
</Callout>
17+
18+
## Generate a session token
19+
20+
<Callout intent="note">
21+
For security reasons, this call should be made from the server side so that your AAT isn't exposed.
22+
</Callout>
23+
24+
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).
25+
26+
```bash
27+
curl --location 'https://api.devrev.ai/auth-tokens.create' \
28+
--header 'accept: application/json, text/plain, */*' \
29+
--header 'authorization: <AAT>' \
30+
--header 'content-type: application/json' \
31+
--data-raw '{
32+
"rev_info": {
33+
"user_ref": "[email protected]",
34+
"account_ref": "devrev.ai",
35+
"workspace_ref": "devrev-dev",
36+
"user_traits": {
37+
"email": "[email protected]",
38+
"display_name": "Devrev Test USer",
39+
"phone_numbers": ["+911122334455"],
40+
"custom_fields": {
41+
"tnt__<field1_name>": "value 1"
42+
}
43+
},
44+
"workspace_traits": {
45+
"display_name": "Devrev Dev",
46+
"custom_fields": {}
47+
},
48+
"account_traits": {
49+
"display_name": "Devrev",
50+
"domains": [
51+
"devrev.ai"
52+
],
53+
"phone_numbers": ["+919988998833"],
54+
"custom_fields": {
55+
"tnt__<field2_name>": "value x"
56+
}
57+
}
58+
}
59+
}'
60+
61+
```
62+
63+
<Callout intent="note">
64+
Ensure that you follow the specified format when providing your phone number.
65+
</Callout>
66+
67+
## Pass custom attributes
68+
69+
To create custom attributes, see [Object customization](https://devrev.ai/docs/product/object-customization).
70+
71+
You can pass the custom attributes that are created as shown below:
72+
```json
73+
74+
"custom_fields": {
75+
"tnt__custom_attribute_name1": <value>,
76+
"tnt__custom_attribute_name2": <value>,
77+
}
78+
```
79+
80+
You can pass custom traits, as shown above, not only for `users` but also for `workspaces` and `accounts`.
81+
82+
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.
83+
84+
**Attributes for users**
85+
86+
|Attributes |Description |Type |
87+
|---|---|---|
88+
|`user_ref` |A unique user reference that the DevRev app uses for identifying your users. This parameter is required. |string |
89+
|`email` |The email address of the customer. It's used for sending email notifications of any support messages. |string |
90+
|`display_name` |The name of the user that's shown on the widget. |string |
91+
|`phone_numbers` |The mobile number of the customer. |array |
92+
93+
**Attributes for workspaces**
94+
95+
|Attributes |Description |Type |
96+
|---|---|---|
97+
|`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 |
98+
|`display_name` |The name of the user that's shown on the widget. |string |
99+
100+
**Attributes for accounts**
101+
102+
|Attributes |Description |Type |
103+
|---|---|---|
104+
|`account_ref` |A unique reference for the account. |string |
105+
|`display_name` | The name of the user that's shown on the widget. |string |
106+
|`domains` |The domain names of the accounts that the users belongs to. |array |
107+
| `phone_numbers` |The mobile number of the customer. |array |
108+
109+
## Pass the session token
110+
111+
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.
112+
113+
```jsx
114+
// You can generate this session token using the above API in your backend
115+
const sessionToken = '<SESSION_TOKEN>'
116+
<script type="text/javascript" src="https://plug-platform.devrev.ai/static/plug.js"></script>
117+
<script>
118+
(() => {
119+
window.plugSDK.init({
120+
app_id: '<your_unique_app_id>',
121+
session_token: sessionToken
122+
})})();
123+
</script>
124+
```

‎fern/docs/pages/plug-sdk/search-install.mdx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
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.
2+
3+
## Unique app ID
4+
5+
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.
6+
7+
1. In DevRev, go to **Settings** > **Support** > **PLuG Settings** through the settings icon in the top-left corner.
8+
2. Click **Enable PLuG Widget** if it isn't already enabled.
9+
3. Copy your **Unique App ID** from the **Configuration tab**.
10+
11+
<Tabs>
12+
<Tab title="Setup">
13+
Place the following code in the `<head>` section of your HTML page:
14+
```html
15+
<script
16+
src="https://plug-platform.devrev.ai/static/plug.js"
17+
type="text/javascript">
18+
</script>
19+
```
20+
21+
Place the following code in the `<body>` section of your HTML page:
22+
```html
23+
<script>
24+
window.plugSDK.init({
25+
app_id: '<your_unique_app_id>',
26+
disable_plug_chat_window: true,
27+
});
28+
29+
window.plugSDK.onEvent((payload) => {
30+
if (payload.type === 'ON_PLUG_WIDGET_READY') {
31+
window.plugSDK.initSearchAgent();
32+
}
33+
});
34+
</script>
35+
```
36+
</Tab>
37+
<Tab title="Setup for React">
38+
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`.
39+
40+
```jsx
41+
useEffect(() => {
42+
window.plugSDK.init({
43+
app_id: '<your_unique_app_id>',
44+
disable_plug_chat_window: true,
45+
});
46+
47+
window.plugSDK.onEvent((payload) => {
48+
if (payload.type === 'ON_PLUG_WIDGET_READY') {
49+
window.plugSDK.initSearchAgent();
50+
}
51+
});
52+
}, []);
53+
```
54+
</Tab>
55+
56+
</Tabs>
57+
58+
To toggle `searchAgent`, call the following method on any event required:
59+
```
60+
window.plugSDK.toggleSearchAgent();
61+
```
62+
63+
To prefill search input from outside the window, call the following method:
64+
```
65+
window.plugSDK.prefillSearchQuery(query:"string")
66+
```
67+
68+
You should now have the 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.
69+
70+
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.
71+
72+
After integrating the PLuG widget, you can personalize and contextualize customer engagement. Learn how to [identify your customers](./user-identity) and update their information.

‎fern/docs/pages/plug-sdk/track-events.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ Utilize the PLuG SDK for effective tracking of user interactions. This feature e
22

33
## How to track user events using PLuG
44

5-
To track user events through PLuG, employ the `trackEvent` method provided by the PLuG SDK, which automatically associates the event with the currently active user profile within the widget. To learn more about user identification in the PLuG widget, see [Identify your users with PLuG](https://docs.devrev.ai/plug/users-identify).
5+
To track user events through PLuG, employ the `trackEvent` method provided by the PLuG SDK, which automatically associates the event with the currently active user profile within the widget. To learn more about user identification in the PLuG widget, see [Identify your users with PLuG](./user-identity).
66

77
```
88
window.plugSDK.trackEvent(event_name, properties)
@@ -32,4 +32,4 @@ window.plugSDK.trackEvent("signed_up",properties)
3232

3333
**PLuG user context**: For each shared event, PLuG automatically includes user context properties. These properties encompass details such as event time, user browser information, locale, device specifications, timezone, operating system version, and the page URL from which the event originated.
3434

35-
**Viewing user events**: To review all events performed by a user, navigate to the user profile within your DevRev app and click on the "Usage" tab. The events displayed in the user profile are updated every 24 hours.
35+
**Viewing user events**: Go to the user profile and click the **Usage** tab. This data is refreshed every 24 hours. Events can also be viewed directly within user sessions, where the data is updated instantaneously.

‎fern/docs/pages/plug-sdk/web-sdk-install.mdx

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
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.
2+
3+
## Getting your unique app ID
4+
5+
You can access your app ID from your DevRev account by following these steps:
6+
1. In DevRev, go to **Settings > Support > PLuG Settings** via the settings icon in the top-left corner.
7+
8+
2. If the PLuG feature is not already enabled, click **Enable PLuG**.
9+
10+
3. Under the **Configuration** tab, copy the **Unique App ID**.
11+
12+
<Tabs>
13+
<Tab title="Setup">
14+
Place the following code in the `<head>` section of your HTML page:
15+
```html
16+
<script
17+
type="text/javascript"
18+
src="https://plug-platform.devrev.ai/static/plug.js"
19+
></script>
20+
```
21+
22+
Place the following code in the `<body>` section of your HTML page:
23+
24+
```html
25+
<script>
26+
window.plugSDK.init({
27+
// Please ensure you replace the app_id with your unique app id
28+
app_id: "<your_unique_app_id>",
29+
});
30+
</script>
31+
```
32+
</Tab>
33+
<Tab title="Setup for React">
34+
Add the following code to the public/index.html file, inside the `<body>` tag of your HTML page:
35+
36+
```jsx
37+
<script
38+
type="text/javascript"
39+
src="https://plug-platform.devrev.ai/static/plug.js"
40+
></script>;
41+
```
42+
43+
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`.
44+
45+
```jsx
46+
47+
useEffect(() => {
48+
window.plugSDK.init({
49+
// Please ensure you replace the app_id with your unique app id
50+
app_id: "<your_unique_app_id>",
51+
});
52+
}, []);
53+
```
54+
</Tab>
55+
56+
</Tabs>
57+
58+
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.
59+
60+
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.
61+
62+
After integrating the PLuG widget, you can personalize and contextualize customer engagement. Learn how to [identify your customers](./user-identity) and update their information.
63+
64+
<Callout intent="note">
65+
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`.
66+
</Callout>
67+
68+
```
69+
<script>
70+
window.plugSDK.init({
71+
app_id: '<your_unique_app_id>',
72+
disable_plug_chat_window: true,
73+
});
74+
</script>
75+
```

‎fern/versions/public.yml

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,15 +80,24 @@ navigation:
8080
- page: Integrate PLuG with your iOS app
8181
slug: install-ios
8282
path: ../docs/pages/plug-sdk/install-ios.mdx
83+
- page: Install the Web SDK
84+
slug: installation
85+
path: ../docs/pages/plug-sdk/web-sdk-install.mdx
86+
- page: Install PLuG search
87+
slug: install-search
88+
path: ../docs/pages/plug-sdk/search-install.mdx
89+
- page: Identify your users with PLuG
90+
slug: user-identity
91+
path: ../docs/pages/plug-sdk/identify-web-user.mdx
8392
- page: Track events
8493
slug: track-events
8594
path: ../docs/pages/plug-sdk/track-events.mdx
8695
- page: Methods
8796
slug: methods
8897
path: ../docs/pages/plug-sdk/methods.mdx
89-
- page: Customization
98+
- page: Custom implementation of PLuG widget
9099
slug: customize
91-
path: ../docs/pages/plug-sdk/customize.mdx
100+
path: ../docs/pages/plug-sdk/customize.mdx
92101
- section: Snap-in development
93102
slug: snapin-development
94103
contents:

0 commit comments

Comments
 (0)