Methods

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 integrate our feature-rich widget, creating a dynamic and personalized user experience.

Initialize 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.

1
useEffect(() => {
2
    window.plugSDK.init({
3
      app_id: <your_unique_app_id>,
4
    });
5
  }, []);

The init() method can accept multiple inputs, which are explained below:

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 the input options: light and dark.

1
window.plugSDK.toggleTheme('light | dark');

Calling toggleTheme() switches between the current themes. Specifying a theme as a parameter allows you to toggle directly to that specific theme.

Toggle widget

The toggleWidget method allows you to control the visibility of the PLuG chat widget.

Passing true opens the chat widget.

Passing false closes the chat widget.

1
window.plugSDK.toggleWidget(true);

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.

• 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.
• ON_OBSERVABILITY_READY: Triggered when the session analytics capabilities of PLuG are initialized.

1
useEffect(() => {
2
  window.plugSDK.onEvent((payload) => {
3
    if (payload.type === PAYLOAD_TYPE) {
4
      //Your logic goes here
5
    }
6
  });
7
}, []);

Check widget status

Use isWidgetOpen to determine whether your chat widget is currently open or closed.

1
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.

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.

1
plugSDK.toggleWidget(true, 'create_conversation', {
2
	startConversationContent: 'Hi',
3
});

Shutdown

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.

1
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.

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.

1
useEffect(() => {
2
  window.plugSDK.init({
3
    app_id: '<your_unique_app_id>',
4
    disable_plug_chat_window: true,
5
});
6
7
  window.plugSDK.onEvent((payload) => {
8
    if (payload.type === 'ON_PLUG_WIDGET_READY') {
9
      window.plugSDK.initSearchAgent();
10
    }
11
  });
12
}, []);

Toggle search agent

The toggleSearchAgent method allows you to control the visibility of the search agent.

If no input is provided, the method toggles the search bar: opening it if it’s closed, and closing it if it’s open.

1
window.plugSDK.toggleSearchAgent(true);

Prefill search query in search agent

Use the prefillSearchQuery method to prefill a search query when opening and initializing the search agent.

1
window.plugSDK.prefillSearchQuery("search_query");

Add session properties

The addSessionProperties method is used to add properties to the session in the form of a key-value map.

1
window.plugSDK.addSessionProperties({
2
	city: 'Bengaluru',
3
	region: 'us-east'
4
});

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.

1
window.plugSDK.trackEvent(event_name, properties)

Sample code:

1
// Sample code for the trackEvent method:
2
var properties = {
3
"name" : "John Doe",
4
"plan" : "Starter",
5
"payment_method" : "Credit Card",
6
"expiry_date" : "2024-12-12"
7
}
8
window.plugSDK.trackEvent("signed_up",properties)

To learn more about tracking events, visit Track events.

Restart session recording

The restartSessionRecording method is used to restart session recording.

1
window.plugSDK.restartSessionRecording();