PLuG Web SDK.mdx

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

@@ -0,0 +1,125 @@
+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
+
+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:
+```bash
+
+"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**
+
+| Config option  | Type   | Required | Description                                                                                            |
+| -------------- | ------ | -------- | ------------------------------------------------------------------------------------------------------ |
+| `user_ref`     | string | Yes      | A unique user reference that the DevRev app uses for identifying your users.                           |
+| `email`        | string | No       | The email address of the customer. It's used for sending email notifications of any support messages. |
+| `display_name` | string | No       | The name of the user that's shown on the widget.                                                 |
+| `phone_numbers` | array | No        | The mobile number of the customer.                                                                         |
+
+**Attributes for workspaces**
+
+| Config option  | Type   | Required | Description                                                                                            |
+| -------------- | ------ | -------- | ------------------------------------------------------------------------------------------------------ |
+|`workspace_ref` | string | No       | 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.|
+| `display_name` | string | No       | The name of the user that's shown on the widget.                                                 |
+
+**Attributes for accounts**
+
+| Config option  | Type   | Required | Description                                                                                            |
+| -------------- | ------ | -------- | ------------------------------------------------------------------------------------------------------ |
+| `account_ref`  | string | No       | A unique reference for the account.                            |
+| `display_name` | string | No       | The name of the user that's shown on the widget.                                                 |
+| `domains`       | array | No       | The domain names of the accounts that the users belongs to.                                          |
+| `phone_numbers` | array | No        | The mobile number of the customer.                                                                         |
+
+## Passing the session token 
+
+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>
+```

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

@@ -0,0 +1,71 @@
+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
+
+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**.
+
+## 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>
+```
+
+## 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();
+  }
+});
+ }, []);
+```
+
+
+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.
+
+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.

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

@@ -2,7 +2,7 @@ Utilize the PLuG SDK for effective tracking of user interactions. This feature e
 
 ## How to track user events using PLuG
 
-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).
+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).
 
 ```
 window.plugSDK.trackEvent(event_name, properties)
@@ -32,4 +32,4 @@ window.plugSDK.trackEvent("signed_up",properties)
 
 **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.
 
-**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.
+**Viewing user events**: Navigate to the user profile and click on 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

@@ -0,0 +1,73 @@
+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.
+
+## 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 your **Unique App ID**.
+
+### 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>
+```
+
+### 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>",
+  });
+}, []);
+```
+
+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>
+```

fern/versions/public.yml

@@ -80,15 +80,24 @@ navigation:
           - page: Integrate PLuG with your iOS app
             slug: install-ios
             path: ../docs/pages/plug-sdk/install-ios.mdx
+          - page: Installing the Web SDK
+            slug: installation
+            path: ../docs/pages/plug-sdk/web-sdk-install.mdx
+          - page: Identify your users with PLuG
+            slug: user-identity
+            path: ../docs/pages/plug-sdk/identify-web-user.mdx
+          - page: Install PLuG search
+            slug: install-search
+            path: ../docs/pages/plug-sdk/search-install.mdx
           - page: Track events
             slug: track-events
             path: ../docs/pages/plug-sdk/track-events.mdx
           - page: Methods
             slug: methods
             path: ../docs/pages/plug-sdk/methods.mdx
-          - page: Customization
+          - page: Custom implementation of PLuG widget
             slug: customize
-            path: ../docs/pages/plug-sdk/customize.mdx
+            path: ../docs/pages/plug-sdk/customize.mdx  
   - section: Snap-in development
     slug: snapin-development
     contents: