diff --git a/fern/docs/pages/plug-sdk/web/methods.mdx b/fern/docs/pages/plug-sdk/web/methods.mdx index dc61b020..4ade87ca 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. @@ -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. @@ -165,9 +175,17 @@ 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. + +```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). +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) diff --git a/fern/docs/pages/plug-sdk/web/search.mdx b/fern/docs/pages/plug-sdk/web/search.mdx index 692b8f85..e7753154 100644 --- a/fern/docs/pages/plug-sdk/web/search.mdx +++ b/fern/docs/pages/plug-sdk/web/search.mdx @@ -70,3 +70,44 @@ 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 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. 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 it to other keys, or key combinations, or use any other user events based on your application’s needs.