Exposed Widget Functions

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"
  }
});