Update methods.mdx

fern/docs/pages/plug-sdk/methods.mdx

@@ -1,28 +1,10 @@
-Our PLuG widget SDK is a powerful tool to further enhance our widget on your website or application. With our SDK, you are empowered to create a dynamic and personalized user experience. Let's get started.
+The PLuG SDK is a robust tool designed to elevate your website or application by enhancing our widget’s capabilities. With our SDK, you can seamlessly integrate our feature-rich widget, creating a dynamic and personalized user experience.
 
 ## Methods
 
-- `plugSDK.init()` Initialize the PLuG chat widget.
+### Initialize SDK
 
-- `plugSDK.initSearchAgent()` Initialize PLuG search agent.
-
-- `plugSDK.shutdown()` End the user session which is currently initialized in PLuG widget. 
-
-- `plugSDK.toggleWidget()` Open/close the chat widget.
-
-- `plugSDK.toggleSearchAgent()` Open/close the search agent.
-
-- `plugSDK.onEvent()` Perform specific actions based on the payload type received from the PLuG widget. 
-
-- `plugSDK.toggleTheme('light/dark')` Toggle PLuG widget theme.
-
-- `plugSDK.toggleWidget(true, 'create_conversation', {startConversationContent: 'Hi',});` Start a conversation.
-
-- `plugSDK.prefillSearchQuery(query:"string")` Prefill the search input of the search agent.
-
-## Initialize chat
-
-Calling the `init()` method initializes the PLuG chat widget on your website. Initializing the PLuG widget is necessary for you to perform any other actions on the PLuG widget SDK.
+To get started with the PLuG SDK on your website, call the `init()` method. This method is essential for enabling the SDK’s functionality, including session recording, the chat widget, and the search agent. Initialization is required before you can perform any other actions using the PLuG SDK.
 
 ```jsx 
 useEffect(() => {
@@ -31,14 +13,31 @@ useEffect(() => {
     });
   }, []);
 ```
-
-<Callout intent="info">
-When React is using `Strict` mode, you might get a warning message from `window.plugSDK.init()` being called multiple times. These errors won't impact the installation and functioning of the widget.
-</Callout>
-
-## Initialize search
-
-Calling the `initSearchAgent()` method initializes the PLuG Search agent on your website. Initializing search is necessary for you to perform any other actions on the PLuG widget SDK.
+The `init()` method can accept multiple inputs, which are explained below:
+
+|Input Parameter   |Description   |Values   |Mandatory   |
+|---|---|---|---|
+|app_id   |This is the unique identifier for your PLuG SDK.    |String   |Yes   |
+|disable_plug_chat_window   |The chat widget is enabled by default. Use this option if you want to disable the chat widget.   |Boolean (True or False)   |No   |
+|session_recording_key   |This key identifies your session recording account and is required to enable the PLuG SDK session recording features.   |String   |No   |
+|enable_session_recording   |This instructs the widget to determine whether to start the session recording.   |Boolean (True or False)   |No   |
+|session_token   |This unique token identifies the user interacting with your app.   |String   |No   |
+|fetchSessionToken   |Request a new session token.   |Function of type `() => Promise<string>`   |No   |
+|primary_text_color   |This determines the launcher color, button text for new tickets and conversations, conversation user text, and more. It should be a valid hex code, such as #f0f0f0.   |String   |No   |
+|session_recording_options   |Options for recording observability sessions.   |To view the values [click here](#Start session recording) |No   |
+|accent_color   |The accent color of the PLuG affects the launcher, new ticket and conversation buttons, conversation user text, and more.   |String   |No   |
+|custom_launcher_selector   |A CSS selector string is used to match the element to which the widget will be attached. You can also set this selector from the PLuG settings on app.devrev.ai. If both sources are set, this value will be considered the definitive source.   |Boolean (True or False)   |No    |
+|spacing   |Padding from the launcher: This padding can also be set in the plug settings on app.devrev.ai. If a value is specified in both places, this value will be considered the definitive source. Bottom: Padding from the bottom of the launcher. Side: Spacing from the sides of the launcher   |object `{bottom: string side: string}`   |No   |
+|theme   |The color scheme for the launcher and widget.   |light or dark   |No   |
+|widget_alignment   |The PLuG widget can be positioned on either the left or right side of the launcher. You can also adjust the widget alignment through the plug settings at app.devrev.ai. If alignment settings are configured in both places, the value from app.devrev.ai will override the launcher setting.   |  |No   |
+
+:::note
+When React is in Strict mode, you may receive a warning about `window.plugSDK.init()` being called multiple times. These warnings do not affect the widget's installation or functionality.
+:::
+
+### Initialize the search agent
+
+Calling the `initSearchAgent()` method sets up the PLuG search agent on your website. This initialization is required before performing any other actions with the PLuG widget SDK.
 
 ```jsx
 useEffect(() => {
@@ -55,54 +54,91 @@ useEffect(() => {
 }, []);
 ```
 
-## Shutdown the widget
+### Shutdown
 
-The `shutdown()` method is helpful when you want to end the user session which is currently initialized in the PLuG widget. You can use this method to clear your users' conversations and tickets when they log out of your application.
+The `shutdown()` method is used to end the current user session in the PLuG widget. It allows you to clear users' conversations and tickets when they log out of your application.
 
 ```jsx
 await window.plugSDK.shutdown();
 ```
+After calling the `shutdown()` method, you can use the `init()` method to reinitialize the PLuG widget on your website if you want to display it again in the logged-out version of your application.
+
+:::note
+Once the `shutdown()` method is called, all other widget functionalities, such as session recording and Nudges, will also be stopped. You will need to reinitialize the widget to reactivate these features.
+:::
+
+### Toggle widget theme
+
+The toggle theme method lets you dynamically adjust the PLuG SDK’s theme, even after the widget has been initialized. This feature allows for real-time theme changes based on your users' preferences.
+
+The method accepts two inputs: `light` and `dark`.
+
+```jsx
+window.plugSDK.toggleTheme('light | dark');
+```
+
+The parameter is optional; calling `toggleTheme()` will switch between the current themes. Specifying a theme as a parameter allows you to toggle directly to that specific theme.
+
+:::note
+
+The theme specified in this method takes precedence over the theme configured in the PLuG settings in your DevRev app.
+
+:::
+
+### 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).
+
+```jsx
+window.plugSDK.trackEvent(event_name, properties)
+```
+
+Sample code:
+
+```jsx
+// Sample code for the trackEvent method:
+var properties = {
+"name" : "John Doe",
+"plan" : "Starter",
+"payment_method" : "Credit Card",
+"expiry_date" : "2024-12-12"
+}
+window.plugSDK.trackEvent("signed_up",properties)
+```
 
-After calling the `shutdown()` method, you can call the `init()` method to reinitialize PLuG widget on your website if you wish to showcase the PLuG widget again in the logged out version of your application. 
+To learn more about tracking events, visit [Track events](/plug-sdk/track-events).
 
-<Callout intent="info">
-Once the `shutdown()` method is called, all the other functionality in the widget such as session recording or Nudges is also be stopped. You need to reinitialize the widget again to have these features active. 
-</Callout>
+### Toggle widget
 
-<iframe src="https://codesandbox.io/embed/shutdown-plug-sdk-sstn8g?fontsize=14&hidenavigation=1&theme=dark"
-      style={{width:'100%', height:'600px', border:'0', borderRadius: '4px', overflow:'hidden',}}
-     title="Toggle_Plug_with_Button"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
+The `toggleWidget` method allows you to control the visibility of the PLuG chat widget.
 
-## Open or close the widget
+Passing input = true opens the chat widget.
 
-To control whether the PLuG widget launcher screen is open, you should use either the `togglewidget()` method with a boolean value or the `toggleSearchAgent()` method, depending on which PLuG instance you are using.
+Passing input = false closes the chat widget.
 
 ```jsx
 window.plugSDK.toggleWidget(true);
-window.plugSDK.toggleSearchAgent(true);
 ```
 
-<iframe src="https://codesandbox.io/embed/toggle-plug-with-button-nnkmk3?fontsize=14&hidenavigation=1&module=%2Fsrc%2FTogglePlug.js&theme=dark&view=preview&hidedevtools=1"
-      style={{width:'100%', height:'600px', border:'0', borderRadius: '4px', overflow:'hidden',}}
-     title="Toggle_Plug_with_Button"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
+### Toggle search agent
 
-## Take actions from events
+The `toggleSearchAgent` method allows you to control the visibility of the search agent.
 
-This method can be used to listen to events coming from the PLuG widget. The following are the different `PAYLOAD_TYPES`.
+If no input is provided, the method toggles the search bar: opening it if it's closed, and closing it if it's open.
 
-- `ON_PLUG_WIDGET_CLOSED` The PLuG widget is closed.
+```jsx
+window.plugSDK.toggleSearchAgent(true);
+```
 
-- `ON_PLUG_WIDGET_OPENED` The PLuG widget is opened.
+### Take action from PLuG chat events
 
-- `ON_PLUG_WIDGET_READY` The PLuG widget is ready.
-- 
-- `ON_PLUG_WIDGET_UNREAD_COUNT_CHANGE` The user receives a new message to their PLuG. You can also listen to the number of unread messages and display that to your user. 
+This method allows you to listen for events from the PLuG widget. Below are the available `PAYLOAD_TYPES`.
+- `ON_PLUG_WIDGET_CLOSED`: Triggered when the PLuG widget is closed.
+- `ON_PLUG_WIDGET_OPENED`: Triggered when the PLuG widget is opened.
+- `ON_PLUG_WIDGET_READY`: Triggered when the PLuG widget is ready.
+- `ON_PLUG_WIDGET_UNREAD_COUNT_CHANGE`: Triggered when the user receives a new message. You can also track the number of unread messages and display them to the user.
+- `ON_CONVERSATION_START`: Indicates that the user has started a new conversation.
+- `ON_SEARCH_AGENT_QUERY`: Indicates that a new search query has been made in the PLuG search agent.
 
 ```jsx
 useEffect(() => {
@@ -114,28 +150,91 @@ useEffect(() => {
 }, []);
 ```
 
-<iframe src="https://codesandbox.io/embed/events-rendered-7rhzj7?fontsize=14&hidenavigation=1&module=%2Fsrc%2FOnEvents.js&theme=dark&view=preview&hidedevtools=1"
-     style={{width:'100%', height:'600px', border:'0', borderRadius: '4px', overflow:'hidden',}}
-     title="Events_Rendered"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-></iframe>
+### Check widget status
+
+Use `isWidgetOpen` method 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.
 
-## Toggle theme
+### Prefill search query in search agent
 
-The toggle theme method allows you to dynamically modify the PLuG SDK's theme, even after initializing the PLuG widget. This functionality enables real-time adjustments to the PLuG widget's theme based on diverse themes preferred by your users.
+Use the `prefillSearchQuery` method to prefill a search query when opening and initializing the search agent.
 
-The method accepts two inputs: `light` and `dark`.
 ```jsx
-window.plugSDK.toggleTheme('light | dark');
+window.plugSDK.prefillSearchQuery("search_query");
+```
+
+### Start session recording
+
+The widget automatically starts session recording upon initialization. You can specify session recording options by passing the following inputs to the initialization method.
+
+```jsx
+PlugStartRecordingOptions {
+	sessionReplay: {
+		maskAllInputs?: boolean;
+		maskInputOptions?: Partial<{
+		  color: boolean;
+		  date: boolean;
+		  'datetime-local': boolean;
+		  email: boolean;
+		  month: boolean;
+		  number: boolean;
+		  range: boolean;
+		  search: boolean;
+		  tel: boolean;
+		  text: boolean;
+		  time: boolean;
+		  url: boolean;
+		  week: boolean;
+		  textarea: boolean;
+		  select: boolean;
+		}>;
+		captureMouseMove?: boolean;
+		captureNetworkLogs?: boolean;
+		captureConsoleLogs?: boolean;
+	}
+}
+```
+
+The following table describes the input values mentioned above:
+
+
+|Option   |Description   |Default   |
+|---|---|---|
+|maskAllInputs   |  |False   |
+|maskInputOptions   |This preference determines whether specific input element types should be masked while capturing the session recording.   |Set to `true` for HTML input elements with `type` set to `email`, `tel`, or `password`. Set to `false` for other HTML input elements. For example, `<input type="email"/>` will be masked, whereas `<input type="text" name="email"/>` will not be masked.|
+|captureMouseMove   |This preference determines whether to track complete mouse movements or only clicks.   |False   |
+|captureNetworkLogs   |This preference determines whether the session should capture network logs or not.   |True   |
+|captureConsoleLogs   |This preference determines whether the session should capture console logs or not.   |True   |
+
+### Add session properties
+
+The `addSessionProperties` method is used to add properties to the session in the form of a key-value map.
+
+```jsx
+window.plugSDK.addSessionProperties({
+	city: 'Bengaluru',
+	region: 'us-east'
+});
+```
+
+### Restart session recording
+
+The `restartSessionRecording` method is used to restart session recording.
+
+```jsx
+window.plugSDK.restartSessionRecording();
 ```
-The parameter is optional; calling `toggleTheme()` toggles the current theme, and specifying a theme as a parameter allows toggling for that specific theme.
 
-## Start conversation
+### Start conversation
 
-This method is utilized to open the PLuG widget with the conversation creation view activated. It essentially replicates the action of clicking the **Send us a message** button, launching the widget directly to the conversation initiation screen.
+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.
 
-The method also accepts an optional input parameter, allowing you to pre-fill a message in the conversation creation screen. This provides your users with a prompt to initiate a conversation with your team.
+This method also accepts an optional input parameter to pre-fill a message on the conversation creation screen, providing your users with a prompt to start a conversation with your team.
 
 ```jsx
 plugSDK.toggleWidget(true, 'create_conversation', {

fern/fern.config.json

@@ -1,4 +1,4 @@
 {
   "organization": "devrev",
-  "version": "0.37.14"
+  "version": "0.41.10"
 }