Add an Embedded AI Chat to your Gatsby app

const baseSettings = {
  apiKey,
  primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
  organizationDisplayName: "Inkeep",
  // ...optional settings
};
 
const modalSettings = {
  // optional settings
};
 
const searchSettings = {
  // optional settings
};
 
const aiChatSettings = {
  // optional settings
  aiAssistantAvatar: "/img/logo.svg", // use your own ai assistant avatar
  exampleQuestions: [
    "Example question 1?",
    "Example question 2?",
    "Example question 3?",
  ],
};

import type {
  InkeepAIChatSettings,
  InkeepSearchSettings,
  InkeepBaseSettings,
  InkeepModalSettings,
} from "@inkeep/cxkit-react";
 
const baseSettings: InkeepBaseSettings = {
  apiKey,
  primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
  organizationDisplayName: "Inkeep",
  // ...optional settings
};
 
const modalSettings: InkeepModalSettings = {
  // optional settings
};
 
const searchSettings: InkeepSearchSettings = {
  // optional settings
};
 
const aiChatSettings: InkeepAIChatSettings = {
  // optional settings
  aiAssistantAvatar: "/img/logo.svg", // use your own ai assistant avatar
  exampleQuestions: [
    "Example question 1?",
    "Example question 2?",
    "Example question 3?",
  ],
};

import * as React from "react";
import { useEffect, useState } from "react";
 
export default function InkeepEmbeddedChat() {
  const [EmbeddedChat, setEmbeddedChat] = useState(null);
 
  // load the library asynchronously
  useEffect(() => {
    const loadEmbeddedChat = async () => {
      try {
        const { InkeepEmbeddedChat } = await import("@inkeep/cxkit-react");
        setEmbeddedChat(() => InkeepEmbeddedChat);
      } catch (error) {
        console.error("Failed to load EmbeddedChat:", error);
      }
    };
 
    loadEmbeddedChat();
  }, []);
 
  const embeddedChatProps = {
    baseSettings,
    aiChatSettings,
  };
 
  return EmbeddedChat && <EmbeddedChat {...embeddedChatProps} />;
}

import * as React from "react";
import { useEffect, useState } from "react";
import type { InkeepChatButtonProps } from "@inkeep/cxkit-react";
 
export default function InkeepEmbeddedChat() {
  const [EmbeddedChat, setEmbeddedChat] = useState(null);
 
  // load the library asynchronously
  useEffect(() => {
    const loadEmbeddedChat = async () => {
      try {
        const { InkeepEmbeddedChat } = await import("@inkeep/cxkit-react");
        setEmbeddedChat(() => InkeepEmbeddedChat);
      } catch (error) {
        console.error("Failed to load EmbeddedChat:", error);
      }
    };
 
    loadEmbeddedChat();
  }, []);
 
  const embeddedChatProps = {
    baseSettings,
    aiChatSettings,
  };
 
  return EmbeddedChat && <EmbeddedChat {...embeddedChatProps} />;
}