Msg91 Help Doc
Hello Contact Center
Integrate Communication Channels In Hello
Chat Widget Integration

Chat Widget Integration

How to Set Up the Live Chat Window in Hello

The Live Chat Window in Hello enables direct communication between your customers and your team, right from your website or mobile app. It supports voice calls, video calls, and screen sharing, helping businesses assist users remotely and capture sales leads.


Steps to Create and Integrate the Live Chat Widget

  1. Go to Hello Panel

    • Log in to Hello and open the Hello panel.

  2. Create a Chat Widget

    • Navigate to Manage → All Inboxes.

    • Click “Create Inbox” on the top-right corner.

    • Select “Create Chat Widget.”

  3. Configure Widget Settings

    • Name the widget and add a tagline (visible in the chat window).

    • Assign a team to the widget (the team name will be visible to users).

    • Set up Launch Options:

      • Hide Launcher (if needed).

      • Default Launch Widget (auto-open or manual).

      • Enable form to collect user data (pre-chat form).

    • Click Save.

  4. Integrate the Widget

    • On the top center, click Integration (next to Configuration).

    • Copy the JavaScript code for websites or use the Mobile SDK and add this to the application’s code.

    • Follow the instructions provided to embed and activate the widget.

  5. Test the Widget

    • Perform two-way communication via the live chat window.

    • Test additional features like screen sharing, voice calling, and video calling (refer to dedicated docs for these features).


Test the Live Chat on MSG91’s Website

You can also try the live chat widget in action directly on the MSG91 website before integrating it on your own platform.

Configure the widget level settings and see how to enable voice chat bot in the widget

▶️ Watch the video guide below for complete setup instructions.

Chat Widget Integration
Chat Widget Integration

Click through a step-by-step, interactive demo walkthrough of Msg91, powered by Supademo.

https://app.supademo.com/embed/cmb23lv311wt1ppkp4x26reow?embed_v=2

What is Screen Sharing?

Screen Sharing allows support agents to view and interact with a customer’s browser in real time. It’s designed for collaborative problem-solving, helping customers more effectively by seeing exactly what they see.


Who can initiate a screen sharing session?

Only agents can initiate a session. Once started, the agent can also request remote control access to interact directly with the user's screen (e.g., click buttons, fill forms).


Screenshot 2025-07-16 at 3.16.41 PM.png


Do clients need to approve the session?

Yes. Screen sharing and remote control cannot begin without explicit client approval. This ensures full transparency and puts control in the hands of the customer.


Screenshot 2025-07-16 at 3.16.23 PM.png


Is screen sharing secure?

Absolutely. All screen sharing sessions are encrypted. If you're testing in a local development environment, make sure to use secure tunneling tools like NGROK to expose your

localhost

over HTTPS. This is crucial because most modern browsers block screen sharing on insecure origins.


How do I test screen sharing in development?

Use tools like:

  • NGROK to create a secure HTTPS tunnel to your local app.

  • Ensure your browser is up-to-date and permission settings allow screen access.


What are the main use cases?

Screen sharing is ideal for:

  • Debugging user-specific issues

  • Assisting with complex form filling

  • Onboarding and guided product walkthroughs

  • Live issue resolution during customer support chats


Can clients end screen sharing anytime?

Yes. The customer can end the session or revoke access at any time with a single click. This reinforces their control and security throughout the session.


Screenshot 2025-07-16 at 3.19.18 PM.png
Screen Sharing in Chat Widget
Jul 24, 2025

What are Voice Calls in Hello?

Voice Calls enable real-time audio communication between clients and the assigned agent or support bot. Clients can initiate a call directly from the chat widget whenever verbal support is needed.


Who can initiate a voice call?

Only clients can initiate voice calls. Based on the chat flow, the call is routed to either a live agent or a voice-enabled support bot.


Screenshot 2025-07-16 at 3.56.46 PM.png



Screenshot 2025-07-16 at 3.21.28 PM.png




Screenshot 2025-07-16 at 3.15.21 PM.png



How do I enable or disable voice calls?

You can control the visibility of the voice call button from the Hello dashboard. Toggling the call setting:

  • Enables voice support and shows the call button in the chat widget.

  • Disables voice support and hides the call button from the client view.

Screenshot 2025-07-16 at 3.01.51 PM.png


Is a secure (HTTPS) environment required?

Yes. Voice calls only work over secure connections:

  • The platform must run on HTTPS.

  • Browsers block audio on insecure origins (e.g., HTTP or

    localhost

    ).

  • If the call connects but there’s no sound, it’s likely due to this restriction.


How can I test voice calls during development?

Use these steps to test voice calls locally:

  • Run your app through a secure tunneling service like NGROK.

  • Make sure the public URL is HTTPS.

  • Allow browser microphone access when prompted.


What happens on a non-HTTPS local server?

Voice calls may appear to connect, but audio will not transmit due to browser security rules. Always test in a secure (HTTPS) environment.


What are the best use cases for voice calls?

Voice support is most effective for:

  • Instant issue resolution

  • Hands-free help

  • Explaining complex workflows quickly

  • Supporting users with accessibility needs


Can clients exit a voice call?

Yes. Clients can end the call at any time.

Voice Calling through Chat Widget
Jul 24, 2025

These are JavaScript functions that allow developers to interact with the Hello chat widget from your website or app. You can send data, track user events, and control the chat widget's visibility—all through these simple commands.

1. chatWidget.modifyCustomData()


What it does: Updates user attributes like name, email, or any other column used in Segmento.

When to use: Perfect for user sign-up, login, profile adn user data update scenarios.

How it works: Send key-value pairs (JSON), where the key is the name of the segmento column name, and the value is the data.

window.chatWidget.modifyCustomData({
  email: "[email protected]",
  firstName: "John",
  membershipLevel: "Premium"
});


2. chatWidget.open()


What it does: Opens the chat widget.

When to use: Use this when you want to open the chat window proactively (e.g., after a user action).

window.chatWidget.open();




3. chatWidget.close()


What it does: Closes the chat window.

When to use: Use this when you no longer need the chat window open (e.g., after form submission or confirmation).

window.chatWidget.close();




4. chat widget.show()


What it does: Makes the chat launcher (bubble or button) visible again.

When to use: If the chat launcher was hidden and you want to make it visible to the user again.

window.chatWidget.show();




5. chatWidget.hide()


What it does: Hides both the chat window and the launcher icon.

When to use: Perfect for distraction-free pages, like logins, checkouts, or thank-you screens.

window.chatWidget.hide();




6. chatWidget.toggleWidget()


What it does: Toggles the chat widget open or closed.

When to use: Use this for custom buttons or in-app elements that let users toggle the chat window.

How it works:

  • If the widget is open, it will close.

  • If the widget is closed, it will open.

window.chatWidget.toggleWidget();




7. chatWidget.addUserEvent()


What it does: Logs a custom user event (e.g., a button click, checkout started) for tracking user activity.

When to use: Great for analytics, tracking user behavior, or creating custom user journeys.

How it works: Send key-value pairs (JSON), where you describe the event and any relevant data.

Note: event_name is custom name for the event, if not passed by default “Activity” will be passed.

window.chatWidget.addUserEvent({
  event_name: "Checkout Started", // custom event name
  cartValue: 1200,
  itemCount: 3
});




8. chatWidget.SendDataToBot()


What it does: Sends custom data to the bot during an active chat session.

When to use: Use this to personalize the bot’s responses based on dynamic user information (e.g., the selected plan or product).

How it works: Send a JSON object with relevant data in variables key that bot can use.

window.chatWidget.SendDataToBot({
  "variables": {
    "selectedProductId": 98765,
    "planType": "Gold"
  }
});
Exposed Widget Functions
Jul 29, 2025