From 6f458b8f8c31194e45b44d57c21a0fc6b7f61685 Mon Sep 17 00:00:00 2001 From: shalomgk <159108271+shalomgk@users.noreply.github.com> Date: Thu, 3 Apr 2025 14:30:30 +0530 Subject: [PATCH 01/13] method getSessionDetails() added --- fern/docs/pages/plug-sdk/web/methods.mdx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/fern/docs/pages/plug-sdk/web/methods.mdx b/fern/docs/pages/plug-sdk/web/methods.mdx index dc61b020..3e0b05e1 100644 --- a/fern/docs/pages/plug-sdk/web/methods.mdx +++ b/fern/docs/pages/plug-sdk/web/methods.mdx @@ -165,6 +165,14 @@ window.plugSDK.addSessionProperties({ }); ``` +## Get session details + +You can use the getSessionDetails method to fetch the session id and tab id of an currently ongoing session.These details can then be passed across different domains to maintain the journey as a single, continuous session. + +```jsx +const { sessionId, tabId } = window.plugSDK.getSessionDetails(); +``` + ## Track events To track user events using PLuG, utilize the `trackEvent` method available in the PLuG SDK. This method automatically links the event to the active user profile within the widget. For more details on user identification within the PLuG widget, refer to [Identify your users with PLuG](https://devrev.ai/docs/plug/identify-web-user). From 1daabd8b7cbcdc892ee0363ffdad4ab656bc7260 Mon Sep 17 00:00:00 2001 From: shalomgk <159108271+shalomgk@users.noreply.github.com> Date: Thu, 3 Apr 2025 14:40:14 +0530 Subject: [PATCH 02/13] add isSearchAgentOpen method --- fern/docs/pages/plug-sdk/web/methods.mdx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/fern/docs/pages/plug-sdk/web/methods.mdx b/fern/docs/pages/plug-sdk/web/methods.mdx index 3e0b05e1..afaa5bc0 100644 --- a/fern/docs/pages/plug-sdk/web/methods.mdx +++ b/fern/docs/pages/plug-sdk/web/methods.mdx @@ -146,6 +146,16 @@ If no input is provided, the method toggles the search bar: opening it if it's c window.plugSDK.toggleSearchAgent(true); ``` +## Check Search Agent status + +Use isSearchAgentOpen to determine whether the search agent is currently open or closed. + +```jsx +window.plugSDK.isSearchAgentOpen +``` + +This returns true if the search agent is open and false if it is closed. + ## Prefill search query in search agent Use the `prefillSearchQuery` method to prefill a search query when opening and initializing the search agent. From f41ff975b953f1fe88ce886ed31486a4681c3736 Mon Sep 17 00:00:00 2001 From: shalomgk <159108271+shalomgk@users.noreply.github.com> Date: Thu, 3 Apr 2025 14:54:46 +0530 Subject: [PATCH 03/13] minor updates --- fern/docs/pages/plug-sdk/web/methods.mdx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/fern/docs/pages/plug-sdk/web/methods.mdx b/fern/docs/pages/plug-sdk/web/methods.mdx index afaa5bc0..c9f72619 100644 --- a/fern/docs/pages/plug-sdk/web/methods.mdx +++ b/fern/docs/pages/plug-sdk/web/methods.mdx @@ -61,6 +61,16 @@ Passing `false` closes the chat widget. window.plugSDK.toggleWidget(true); ``` +## Check widget status + +Use `isWidgetOpen` to determine whether your chat widget is currently open or closed. + +```jsx +window.plugSDK.isWidgetOpen +``` + +This returns true if the chat widget is open and false if it is closed. + ## Take action from PLuG chat events This method allows you to listen for events from the PLuG widget. Below are the available values for `PAYLOAD_TYPE`. @@ -82,16 +92,6 @@ useEffect(() => { }, []); ``` -## Check widget status - -Use `isWidgetOpen` to determine whether your chat widget is currently open or closed. - -```jsx -window.plugSDK.isWidgetOpen -``` - -This returns true if the chat widget is open and false if it is closed. - ## Start conversation The `startConversationContent` method opens the PLuG widget directly to the conversation creation view. It replicates the action of clicking the **Send us a message** button, launching the widget to the conversation initiation screen. @@ -177,7 +177,7 @@ window.plugSDK.addSessionProperties({ ## Get session details -You can use the getSessionDetails method to fetch the session id and tab id of an currently ongoing session.These details can then be passed across different domains to maintain the journey as a single, continuous session. +You can use the `getSessionDetails` method to fetch the session id and tab id of an currently ongoing session.These details can then be passed across different domains to maintain the journey as a single, continuous session. ```jsx const { sessionId, tabId } = window.plugSDK.getSessionDetails(); From ce6ea403f71294d03d2287ed01d13d259d1033f1 Mon Sep 17 00:00:00 2001 From: shalomgk <159108271+shalomgk@users.noreply.github.com> Date: Thu, 3 Apr 2025 21:46:14 +0530 Subject: [PATCH 04/13] Fixed user identity link --- fern/docs/pages/plug-sdk/web/methods.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/fern/docs/pages/plug-sdk/web/methods.mdx b/fern/docs/pages/plug-sdk/web/methods.mdx index c9f72619..cfe6b6f4 100644 --- a/fern/docs/pages/plug-sdk/web/methods.mdx +++ b/fern/docs/pages/plug-sdk/web/methods.mdx @@ -69,7 +69,7 @@ Use `isWidgetOpen` to determine whether your chat widget is currently open or cl window.plugSDK.isWidgetOpen ``` -This returns true if the chat widget is open and false if it is closed. +This returns `true` if the chat widget is open and `false` if it is closed. ## Take action from PLuG chat events @@ -148,7 +148,7 @@ window.plugSDK.toggleSearchAgent(true); ## Check Search Agent status -Use isSearchAgentOpen to determine whether the search agent is currently open or closed. +Use `isSearchAgentOpen` to determine whether the search agent is currently open or closed. ```jsx window.plugSDK.isSearchAgentOpen @@ -177,7 +177,7 @@ window.plugSDK.addSessionProperties({ ## Get session details -You can use the `getSessionDetails` method to fetch the session id and tab id of an currently ongoing session.These details can then be passed across different domains to maintain the journey as a single, continuous session. +You can use the `getSessionDetails` method to fetch the session id and tab id of currently ongoing session. These details can then be passed across different domains to maintain the journey as a single, continuous session. ```jsx const { sessionId, tabId } = window.plugSDK.getSessionDetails(); @@ -185,7 +185,7 @@ const { sessionId, tabId } = window.plugSDK.getSessionDetails(); ## Track events -To track user events using PLuG, utilize the `trackEvent` method available in the PLuG SDK. This method automatically links the event to the active user profile within the widget. For more details on user identification within the PLuG widget, refer to [Identify your users with PLuG](https://devrev.ai/docs/plug/identify-web-user). +To track user events using PLuG, utilize the `trackEvent` method available in the PLuG SDK. This method automatically links the event to the active user profile within the widget. For more details on user identification within the PLuG widget, refer to [Identify your users with PLuG](./user-identity). ```jsx window.plugSDK.trackEvent(event_name, properties) From e1497a69e74c3e577d08f0556677dd3c0b828fb1 Mon Sep 17 00:00:00 2001 From: shalomgk <159108271+shalomgk@users.noreply.github.com> Date: Fri, 4 Apr 2025 10:33:07 +0530 Subject: [PATCH 05/13] Update user-identity.mdx set identifier without session token --- .../docs/pages/plug-sdk/web/user-identity.mdx | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/fern/docs/pages/plug-sdk/web/user-identity.mdx b/fern/docs/pages/plug-sdk/web/user-identity.mdx index 22ab62cb..bde179d0 100644 --- a/fern/docs/pages/plug-sdk/web/user-identity.mdx +++ b/fern/docs/pages/plug-sdk/web/user-identity.mdx @@ -120,3 +120,41 @@ const sessionToken = '' })})(); ``` + +## Identify users without session token + +You can also pass the identifiers in the `plugSDK.init` option without generating the session token. + + +The frontend method, by its nature, is not secure as the data is transmitted through the client side. We recommend using the session token method to securely identify users. + + +```jsx +window.plugSDK.init({ + app_id: '', + identity: { + user_ref: string; + user_traits?: { + custom_fields?: object; + display_name?: string; + email?: string; + phone_numbers?: string[]; + }; + }) +``` + +You can add or update the data in `user_traits` by using the `updateIdentity` method on the PLuG SDK. Attached is a sample code snippet for the same. + +```jsx +window.plugSDK.updateIdentity({ + user_traits?: { + custom_fields?: object; + display_name?: string; + email?: string; + phone_numbers?: string[]; + }; +}) + +``` + + From 5d7980f28602146976b16c13c2831c25e5b37d20 Mon Sep 17 00:00:00 2001 From: shalomgk <159108271+shalomgk@users.noreply.github.com> Date: Fri, 4 Apr 2025 11:23:15 +0530 Subject: [PATCH 06/13] Update search.mdx add bind hotkey example --- fern/docs/pages/plug-sdk/web/search.mdx | 44 +++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/fern/docs/pages/plug-sdk/web/search.mdx b/fern/docs/pages/plug-sdk/web/search.mdx index 692b8f85..6c46e003 100644 --- a/fern/docs/pages/plug-sdk/web/search.mdx +++ b/fern/docs/pages/plug-sdk/web/search.mdx @@ -70,3 +70,47 @@ You should now have the PLuG search widget installed on your website. Facing som 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. + +## Bind hotkey to toggleSearchAgent + +You can bind the `toggleSearchAgent` method to a hotkey, such as `Cmd + K` (or `Ctrl + K` for Windows), to toggle the search agent quickly. Here's an example implementation: + + + + ```html + + + ``` + + + + ```jsx + useEffect(() => { + const handleKeyDown = (event) => { + if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k'){ + event.preventDefault(); // Prevent default behavior + window.plugSDK.toggleSearchAgent(); + } + }; + // Attach the event listener + document.addEventListener('keydown', handleKeyDown); + // Clean up the event listener on unmount + return () => { + document.removeEventListener('keydown', handleKeyDown); + }; + }, []); + ``` + + + + +You can modify the keydown event listener to bind other key or keys combinations, or any other user event based on your application's needs. + From f15a88509d0ef36a1a767faf3705f36315717df9 Mon Sep 17 00:00:00 2001 From: shalomgk <159108271+shalomgk@users.noreply.github.com> Date: Fri, 11 Apr 2025 10:51:13 +0530 Subject: [PATCH 07/13] Update search.mdx --- fern/docs/pages/plug-sdk/web/search.mdx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/fern/docs/pages/plug-sdk/web/search.mdx b/fern/docs/pages/plug-sdk/web/search.mdx index 6c46e003..84c55183 100644 --- a/fern/docs/pages/plug-sdk/web/search.mdx +++ b/fern/docs/pages/plug-sdk/web/search.mdx @@ -71,22 +71,24 @@ Once the widget is installed on your website, every user who visits your website After integrating the PLuG widget, you can personalize and contextualize customer engagement. Learn how to [identify your customers](./user-identity) and update their information. -## Bind hotkey to toggleSearchAgent +## Bind a hotkey to toggle search agent -You can bind the `toggleSearchAgent` method to a hotkey, such as `Cmd + K` (or `Ctrl + K` for Windows), to toggle the search agent quickly. Here's an example implementation: +You can bind the `toggleSearchAgent` method to a hotkey, such as `Cmd + K` (or `Ctrl + K` for Windows), to toggle the search agent. Here's an example implementation: ```html + ``` + ``` @@ -94,19 +96,19 @@ You can bind the `toggleSearchAgent` method to a hotkey, such as `Cmd + K` (or ` ```jsx useEffect(() => { - const handleKeyDown = (event) => { - if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k'){ + const handleKeyDown = event => { + if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") { event.preventDefault(); // Prevent default behavior window.plugSDK.toggleSearchAgent(); } }; // Attach the event listener - document.addEventListener('keydown', handleKeyDown); + document.addEventListener("keydown", handleKeyDown); // Clean up the event listener on unmount return () => { - document.removeEventListener('keydown', handleKeyDown); + document.removeEventListener("keydown", handleKeyDown); }; - }, []); + }, []); ``` From 433a286293e973774bdaafda9983c8e33906c717 Mon Sep 17 00:00:00 2001 From: shalomgk <159108271+shalomgk@users.noreply.github.com> Date: Fri, 11 Apr 2025 11:00:34 +0530 Subject: [PATCH 08/13] Update user-identity.mdx --- .../docs/pages/plug-sdk/web/user-identity.mdx | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/fern/docs/pages/plug-sdk/web/user-identity.mdx b/fern/docs/pages/plug-sdk/web/user-identity.mdx index bde179d0..f8de7a78 100644 --- a/fern/docs/pages/plug-sdk/web/user-identity.mdx +++ b/fern/docs/pages/plug-sdk/web/user-identity.mdx @@ -126,35 +126,35 @@ const sessionToken = '' You can also pass the identifiers in the `plugSDK.init` option without generating the session token. -The frontend method, by its nature, is not secure as the data is transmitted through the client side. We recommend using the session token method to securely identify users. +The frontend method, by its nature, is not secure as the data is transmitted through the client side. It is recommended to use the session token method to securely identify users. ```jsx window.plugSDK.init({ - app_id: '', - identity: { - user_ref: string; - user_traits?: { - custom_fields?: object; - display_name?: string; - email?: string; - phone_numbers?: string[]; - }; - }) + app_id: '', + identity: { + user_ref: string; + user_traits?: { // optional + custom_fields?: object; // optional + display_name?: string; // optional + email?: string; // optional + phone_numbers?: string[]; // optional + } + } +}) ``` You can add or update the data in `user_traits` by using the `updateIdentity` method on the PLuG SDK. Attached is a sample code snippet for the same. ```jsx window.plugSDK.updateIdentity({ - user_traits?: { - custom_fields?: object; - display_name?: string; - email?: string; - phone_numbers?: string[]; - }; + user_traits: { + custom_fields?: object; // optional + display_name?: string; // optional + email?: string; // optional + phone_numbers?: string[]; // optional + } }) - ``` From 5d8addc7601badba013015d0ec77c65fd670e9d0 Mon Sep 17 00:00:00 2001 From: shalomgk <159108271+shalomgk@users.noreply.github.com> Date: Tue, 15 Apr 2025 19:05:23 +0530 Subject: [PATCH 09/13] Update method descriptions for consistency --- fern/docs/pages/plug-sdk/web/methods.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/fern/docs/pages/plug-sdk/web/methods.mdx b/fern/docs/pages/plug-sdk/web/methods.mdx index cfe6b6f4..4ade87ca 100644 --- a/fern/docs/pages/plug-sdk/web/methods.mdx +++ b/fern/docs/pages/plug-sdk/web/methods.mdx @@ -154,7 +154,7 @@ Use `isSearchAgentOpen` to determine whether the search agent is currently open window.plugSDK.isSearchAgentOpen ``` -This returns true if the search agent is open and false if it is closed. +This returns `true` if the search agent is open and `false` if it is closed. ## Prefill search query in search agent @@ -177,7 +177,7 @@ window.plugSDK.addSessionProperties({ ## Get session details -You can use the `getSessionDetails` method to fetch the session id and tab id of currently ongoing session. These details can then be passed across different domains to maintain the journey as a single, continuous session. +You can use the `getSessionDetails` method to fetch the session ID and tab ID of currently ongoing session. These details can then be passed across different domains to maintain the journey as a single, continuous session. ```jsx const { sessionId, tabId } = window.plugSDK.getSessionDetails(); From c470226b28aed1e2fb2c269c84eee9b7492f8654 Mon Sep 17 00:00:00 2001 From: Atul-Butola Date: Wed, 16 Apr 2025 17:38:41 +0530 Subject: [PATCH 10/13] Update search.mdx --- fern/docs/pages/plug-sdk/web/search.mdx | 30 +++++++++++-------------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/fern/docs/pages/plug-sdk/web/search.mdx b/fern/docs/pages/plug-sdk/web/search.mdx index 84c55183..5df86661 100644 --- a/fern/docs/pages/plug-sdk/web/search.mdx +++ b/fern/docs/pages/plug-sdk/web/search.mdx @@ -90,28 +90,24 @@ You can bind the `toggleSearchAgent` method to a hotkey, such as `Cmd + K` (or ` ``` - ``` - - ```jsx useEffect(() => { - const handleKeyDown = event => { - if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") { - event.preventDefault(); // Prevent default behavior - window.plugSDK.toggleSearchAgent(); - } - }; - // Attach the event listener - document.addEventListener("keydown", handleKeyDown); - // Clean up the event listener on unmount - return () => { - document.removeEventListener("keydown", handleKeyDown); - }; - }, []); + const handleKeyDown = event => { + if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") { + event.preventDefault(); // Prevent default behavior + window.plugSDK.toggleSearchAgent(); + } + }; + // Attach the event listener + document.addEventListener("keydown", handleKeyDown); + // Clean up the event listener on unmount + return () => { + document.removeEventListener("keydown", handleKeyDown); + }; + }, []); ``` - You can modify the keydown event listener to bind other key or keys combinations, or any other user event based on your application's needs. From 7abec7be7cde555b301a06dbc78ca08a1c0eee82 Mon Sep 17 00:00:00 2001 From: shalomgk Date: Mon, 5 May 2025 15:46:33 +0530 Subject: [PATCH 11/13] Update user-identity.mdx --- fern/docs/pages/plug-sdk/web/user-identity.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fern/docs/pages/plug-sdk/web/user-identity.mdx b/fern/docs/pages/plug-sdk/web/user-identity.mdx index f8de7a78..9d070017 100644 --- a/fern/docs/pages/plug-sdk/web/user-identity.mdx +++ b/fern/docs/pages/plug-sdk/web/user-identity.mdx @@ -126,7 +126,7 @@ const sessionToken = '' You can also pass the identifiers in the `plugSDK.init` option without generating the session token. -The frontend method, by its nature, is not secure as the data is transmitted through the client side. It is recommended to use the session token method to securely identify users. +This frontend user identification, by its nature, is not secure as the data is transmitted through the client side. It is recommended to use the session token method to securely identify users. ```jsx From 2508efaae14b40b0d6cea7b60beb6b6ac3801b00 Mon Sep 17 00:00:00 2001 From: shalomgk Date: Mon, 5 May 2025 15:47:36 +0530 Subject: [PATCH 12/13] Update search.mdx --- fern/docs/pages/plug-sdk/web/search.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/fern/docs/pages/plug-sdk/web/search.mdx b/fern/docs/pages/plug-sdk/web/search.mdx index 5df86661..e7753154 100644 --- a/fern/docs/pages/plug-sdk/web/search.mdx +++ b/fern/docs/pages/plug-sdk/web/search.mdx @@ -110,5 +110,4 @@ You can bind the `toggleSearchAgent` method to a hotkey, such as `Cmd + K` (or ` -You can modify the keydown event listener to bind other key or keys combinations, or any other user event based on your application's needs. - +You can modify the keydown event listener to bind it to other keys, or key combinations, or use any other user events based on your application’s needs. From 2099d322272c9467a8f9df2f13a8fce2c4f39dc9 Mon Sep 17 00:00:00 2001 From: shalomgk Date: Tue, 20 May 2025 10:46:54 +0530 Subject: [PATCH 13/13] Update user-identity.mdx Remove frontend id method --- .../docs/pages/plug-sdk/web/user-identity.mdx | 38 ------------------- 1 file changed, 38 deletions(-) diff --git a/fern/docs/pages/plug-sdk/web/user-identity.mdx b/fern/docs/pages/plug-sdk/web/user-identity.mdx index 9d070017..22ab62cb 100644 --- a/fern/docs/pages/plug-sdk/web/user-identity.mdx +++ b/fern/docs/pages/plug-sdk/web/user-identity.mdx @@ -120,41 +120,3 @@ const sessionToken = '' })})(); ``` - -## Identify users without session token - -You can also pass the identifiers in the `plugSDK.init` option without generating the session token. - - -This frontend user identification, by its nature, is not secure as the data is transmitted through the client side. It is recommended to use the session token method to securely identify users. - - -```jsx -window.plugSDK.init({ - app_id: '', - identity: { - user_ref: string; - user_traits?: { // optional - custom_fields?: object; // optional - display_name?: string; // optional - email?: string; // optional - phone_numbers?: string[]; // optional - } - } -}) -``` - -You can add or update the data in `user_traits` by using the `updateIdentity` method on the PLuG SDK. Attached is a sample code snippet for the same. - -```jsx -window.plugSDK.updateIdentity({ - user_traits: { - custom_fields?: object; // optional - display_name?: string; // optional - email?: string; // optional - phone_numbers?: string[]; // optional - } -}) -``` - -