Live chat widget setup

Live chat widget setup

Installation

To get the widget to appear on your web page simply copy and paste the snippet below before the <body/> tag on every page where you want the widget to appear for website visitors.

N.B: Your APP_ID and PUBLIC_KEY are auto-generated after a website live chat channel is created on the Simpu Inbox dashboard

  1. <script src="<https://static.simpu.co/widgets/v1/simpu-widget.js"></script> 
  2. <script> 
  3. var widget = window.Simpu.default.init({ 
  4. app_id: APP_ID, 
  5. public_key: PUBLIC_KEY 
  6. }); 
  7. widget.render(); 
  8. </script>

Configuration

Website visitors & users

The widget can be configured with extra information about users, such as:

  • name: string

  • email: string

  • user_id: string|number

You can get this information from your application and this is used to differentiate between visitors to your application and users of your website.

  1. <script src="<https://static.simpu.co/widgets/v1/simpu-widget.js"></script> 
  2. <script> 
  3. var user_email = "user@example.com"; 
  4. var user_name = "Jean Doe"; 
  5. var user_id = 19; 
  6. var widget = window.Simpu.default.init({ 
  7. app_id: APP_ID, 
  8. public_key: PUBLIC_KEY, 
  9. name: user_name, 
  10. email: user_email, 
  11. user_id: user_id, 
  12. }); 
  13. widget.render(); 
  14. </script>

Hide widget launcher

Hide the default launcher when triggering the widget programmatically with the widget methods.

  1. <script src="<https://static.simpu.co/widgets/v1/simpu-widget.js"></script> 
  2. <script> 
  3. var widget = window.Simpu.default.init({ 
  4. app_id: APP_ID, 
  5. public_key: PUBLIC_KEY, 
  6. hide_launcher: true, 
  7. }); 
  8. widget.render(); 
  9. </script>

hide_launcher is set to false by default and this will forcefully show the launcher icon.

Methods

The following methods allow you to interact with the widget.

render(options)

This method renders the widget with the default launcher. The widget can be rendered on a page without the default launcher by setting the hide_launcher config value as false when initiating the widget.

  1. var widget = window.Simpu.default.init({ 
  2. app_id: APP_ID, 
  3. public_key: PUBLIC_KEY, 
  4. }); 
  5. widget.render();

open(callback?: () => void)

This method opens the widget panel.

  1. var widget = window.Simpu.default.init({ 
  2. app_id: APP_ID, 
  3. public_key: PUBLIC_KEY, 
  4. }); 
  5. widget.open();

You can also pass an optional callback function to the open function to carryout an action after the widget is opened.

  1. widget.open(() => console.log("open"));

close(callback?: () => void)

This method closes the widget panel if it is open. It will not hide the widget launcher.

  1. var widget = window.Simpu.default.init({ 
  2. app_id: APP_ID, 
  3. public_key: PUBLIC_KEY, 
  4. }); 
  5. widget.close();

You can also pass an optional callback function to the close function to carryout an action after the widget is closed.

  1. widget.close(() => console.log("close"));

Hide widget close button

Remove the close button from the widget interface.

  1. var widget = window.Simpu.default.init({ 
  2. app_id: APP_ID, 
  3. public_key: PUBLIC_KEY, 
  4. hide_close_button: true,
  5. });
  6. widget.close();

Example

This example shows open and close the widget programmatically with a button on your web page.

  1. <body> 
  2. <p>Hi.</p> 
  3. <button id="open">open</button> 
  4. <button id="close">close</button> 
  5. <script src="https://static.simpu.co/widgets/v1/simpu-widget.js"></script> <script> 
  6. var widget = window.Simpu.default.init({ 
  7. app_id: APP_ID, 
  8. public_key: PUBLIC_KEY, 
  9. hide_launcher: false, 
  10. }); 
  11. widget.render(); 
  12. document.querySelector("#open").addEventListener("click", () => { widget.open(); 
  13. }); 
  14. document.querySelector("#close").addEventListener("click", () => { widget.close(); 
  15. }); 
  16. </script> 
  17. </body>

    • Related Articles

    • Set up Simpu website Live-chat

      Overview Simpu is a powerful platform that helps you to grow your business by chatting with visitors and customers on your website. You can drive communication from Simpu to receive chats, respond to customers, and loop in your team without leaving ...

    • Set up Simpu website Live-chat

      Overview Simpu is a powerful platform that helps you to grow your business by chatting with visitors and customers on your website. You can drive communication from Simpu to receive chats, respond to customers, and loop in your team without leaving ...

    • Simpu Livechat: Fixing "Cannot read properties of null (reading 'message')" Error by Clearing Local Storage

      Overview If you are encountering the error "Cannot read properties of null (reading 'message')" on the Simpu Livechat, clearing your local storage might help resolve the issue. Follow the step-by-step guide below to clear your local storage and get ...

    • Simpu fundamentals

      Overview Welcome to Simpu 101! This help guide is designed to provide you with all the necessary information and guidance to start with Simpu. Whether you're new to the platform or just looking to improve your knowledge, this guide will walk you ...

    • How to open conversations in external windows

      Overview At times, it can be beneficial to handle multiple conversations simultaneously. Simpu simplifies this process by allowing you to detach entire conversations and open them in separate external windows. This feature enables you to work on ...