Chat Button

import { useTheme } from "nextra-theme-docs";

const useInkeepSettings = () => {
  const { resolvedTheme } = useTheme();

  const baseSettings = {
    apiKey: "YOUR_API_KEY",
    integrationId: "YOUR_INTEGRATION_ID",
    organizationId: "YOUR_ORGANIZATION_ID",
    primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
    organizationDisplayName: "Inkeep",
    // ...optional settings
    theme: {
      colorMode: {
        forcedColorMode: resolvedTheme, // to sync dark mode with the widget
      },
    },
  };

  const modalSettings = {
    // optional settings
  };

  const searchSettings = {
    // optional settings
  };

  const aiChatSettings = {
    // optional settings
    botAvatarSrcUrl: "/img/logo.svg", // use your own bot avatar
    quickQuestions: [
      "Example question 1?",
      "Example question 2?",
      "Example question 3?",
    ],
  };

  return { baseSettings, aiChatSettings, searchSettings, modalSettings };
};

export default useInkeepSettings;

import { useEffect, useState } from "react";
import useInkeepSettings from "../utils/useInkeepSettings";

export default function InkeepChatButton() {
  const [ChatButton, setChatButton] = useState(null);

  const { baseSettings, aiChatSettings, searchSettings, modalSettings } =
    useInkeepSettings();

  // load the library asynchronously
  useEffect(() => {
    const loadChatButton = async () => {
      try {
        const { InkeepChatButton } = await import("@inkeep/widgets");
        setChatButton(() => InkeepChatButton);
      } catch (error) {
        console.error("Failed to load ChatButton:", error);
      }
    };

    loadChatButton();
  }, []);

  const chatButtonProps = {
    baseSettings,
    aiChatSettings,
    searchSettings,
    modalSettings,
  };

  return ChatButton && <ChatButton {...chatButtonProps} />;
}