IntegrationsGatsby
Add AI Chat to your Gatsby app
What is Gatsby
Gatsby is a React-based open source framework for creating websites.
Install the component library
npm install @inkeep/cxkit-react
yarn add @inkeep/cxkit-react
Customize your settings
Define your Inkeep settings.
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?",
],
};
Define the component
Next, create an InkeepChatButton.tsx
file for the Chat Button
component.
import * as React from "react";
import { useEffect, useState } from "react";
export default function InkeepChatButton() {
const [ChatButton, setChatButton] = useState(null);
//...
// load the library asynchronously
useEffect(() => {
const loadChatButton = async () => {
try {
const { InkeepChatButton } = await import("@inkeep/cxkit-react");
setChatButton(() => InkeepChatButton);
} catch (error) {
console.error("Failed to load ChatButton:", error);
}
};
loadChatButton();
}, []);
const chatButtonProps = {
baseSettings,
aiChatSettings,
searchSettings,
modalSettings,
};
return ChatButton && <ChatButton {...chatButtonProps} />;
}
import * as React from "react";
import { useEffect, useState } from "react";
import type { InkeepChatButtonProps } from "@inkeep/cxkit-react";
export default function InkeepChatButton() {
const [ChatButton, setChatButton] =
useState<(e: InkeepChatButtonProps) => JSX.Element>();
//...
// load the library asynchronously
useEffect(() => {
const loadChatButton = async () => {
try {
const { InkeepChatButton } = await import("@inkeep/cxkit-react");
setChatButton(() => InkeepChatButton);
} catch (error) {
console.error("Failed to load ChatButton:", error);
}
};
loadChatButton();
}, []);
const chatButtonProps: InkeepChatButtonProps = {
baseSettings,
aiChatSettings,
searchSettings,
modalSettings,
};
return ChatButton && <ChatButton {...chatButtonProps} />;
}
For a full list of customizations, check out the Chat Button documentation.