SDKsPLuG SDK

Methods

Our PLuG widget SDK is a powerful tool designed to further enhance our widget on your website or application. With our SDK, you can seamlessly integrate our feature-rich widget by empowering you to create a dynamic and personalized user experience. Let’s get started.

Methods

  • plugSDK.init() Initialize the PLuG chat widget.

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

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

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.

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.

1useEffect(() => {
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}, []);

Shutdown the widget

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.

1await window.plugSDK.shutdown();

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.

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.

Open or close the 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.

1window.plugSDK.toggleWidget(true);
2window.plugSDK.toggleSearchAgent(true);

Take actions from events

This method can be used to listen to events coming from the PLuG widget. The following are the different PAYLOAD_TYPES.

  • ON_PLUG_WIDGET_CLOSED The PLuG widget is closed.

  • ON_PLUG_WIDGET_OPENED The PLuG widget is opened.

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

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

Toggle theme

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.

The method accepts two inputs: light and dark.

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

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

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

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

Looking for something more? Reach out to us through our own PLuG widget in the bottom right of this screen and we would be happy to assist you.