Custom Component

FIND-X provides a default UI component that displays a sparkle icon in the bottom-right corner of the screen. You can choose to use this default component or create a custom trigger component.

Configuration

To use a custom component, update the configuration of the ChatBox component as shown below:

<ChatBox
  config={{
    findx_key: process.env.NEXT_PUBLIC_FINDX_KEY!,
    theme: "dark",
    default: false,
  }}
/>

The default property controls the visibility of the default UI component. Setting it to false removes the default trigger from the screen.

Note: You can use both the default UI component and a custom component simultaneously without conflicts.

Implementing a Custom Trigger

Creating a custom trigger involves using the toggleChatBox function to control the chat UI visibility:

"use client"
import { toggleChatBox } from "find-x-ai";

export function CustomChatComponent() {
  return (
    <button onClick={() => toggleChatBox()}>
      Search with FIND-X
    </button>
  );
}

Example implementation:

Prev