Skip to content

**WIP** method getSessionDetails() added #194

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
May 20, 2025
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 29 additions & 11 deletions fern/docs/pages/plug-sdk/web/methods.mdx
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [EkLine] reported by reviewdog 🐶

Where possible, do not structure sentences in future tense. Use present tense instead. (EK00005)

|`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. |left or right |

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [EkLine] reported by reviewdog 🐶

Suggestions:

    Where possible, do not structure sentences in future tense. Use present tense instead. (EK00005)

|`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) |

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [EkLine]

Suggestions:

    Where possible, do not structure sentences in future tense. Use present tense instead. (EK00005)

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [EkLine]

Where possible, do not structure sentences in future tense. Use present tense instead. (EK00005)

|`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;}` |

Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand All @@ -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.
Expand Down Expand Up @@ -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.
Expand All @@ -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)
Expand Down
46 changes: 46 additions & 0 deletions fern/docs/pages/plug-sdk/web/search.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,49 @@ 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:

<Tabs>
<Tab title="Setup">
```html
<script>
// Bind Cmd+K (or Ctrl+K) to toggle the search agent
document.addEventListener("keydown", function (event) {
if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
event.preventDefault(); // Prevent default behavior
window.plugSDK.toggleSearchAgent();
}
});
</script>
```
</Tab>

```
</Tab>
<Tab title="Setup for React">

```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);
};
}, []);
```
</Tab>

</Tabs>

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.

38 changes: 38 additions & 0 deletions fern/docs/pages/plug-sdk/web/user-identity.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -120,3 +120,41 @@ const sessionToken = '<SESSION_TOKEN>'
})})();
</script>
```

## Identify users without session token

You can also pass the identifiers in the `plugSDK.init` option without generating the session token.

<Callout intent="note">
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.
</Callout>

```jsx
window.plugSDK.init({
app_id: '<your_unique_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
}
})
```


Loading