Mendable Chat Bubble

Before installation, ensure you've either signed up through our platform or we have provided you with the ANON_KEY. Without the key, you won't be able to setup the chat bubble component.

Mendable Chat Bubble

The Chat Bubble is a component that appears as a floating chat icon, typically pinned to the bottom right of the screen. When clicked, it will open a dialog with Mendable Chat.

Usage

import { MendableChatBubble } from "@mendable/chat"

const style = { darkMode: false, accentColor: "#123456" }

<MendableChatBubble anon_key='YOUR_ANON_KEY' style={style} />

Callback functions

The MendableChatBubble component provides callback functions for tracking events inside the component.

• onMessageForTracking : This function is triggered whenever a message is sent in the component. The function receives the question and the answer as parameters. This can be used for logging or analytics purposes.

Example

import { MendableChatBubble } from "@mendable/chat"


function MySearchComponent() {
  const handleOnMessage = (question, answer) => {
    console.log("User asked:", question);
    console.log("Received answer:", answer);
    // You can add additional tracking or analytics logic here.
  };

  return (
    <MendableChatBubble
      anon_key="YOUR_ANON_KEY"
      onMessageForTracking={handleOnMessage}
    />
  );
}

• onSourceClickedForTracking : This function is triggered whenever a source is clicked in the search results. The function receives the source as a parameter. This can be used for logging or tracking user interactions.

Example

import { MendableChatBubble } from "@mendable/chat"

function handleOnSourceClicked(source) {
  console.log("User clicked on source:", source);
  // Add tracking or logging logic here
}

<MendableChatBubble
  anon_key='YOUR_ANON_KEY'
  onSourceClickedForTracking={handleOnSourceClicked}
/>

Use these functions to gain insights into how users are interacting with the search bar.