What is Remix
Remix is a modern web framework for building web applications based on React.
Install the component library
npm install @inkeep/widgets
Customize your settings
First, create a useInkeepSettings.ts
file that will contain a hook that returns configuration for our Inkeep component(s).
Below is an example with common customizations.
const useInkeepSettings = () => {
const baseSettings = {
apiKey: "YOUR_API_KEY",
integrationId: "YOUR_INTEGRATION_ID",
organizationId: "YOUR_ORGANIZATION_ID",
primaryBrandColor: "#26D6FF",
organizationDisplayName: "Inkeep",
};
const modalSettings = {
};
const searchSettings = {
};
const aiChatSettings = {
botAvatarSrcUrl: "/img/logo.svg",
quickQuestions: [
"Example question 1?",
"Example question 2?",
"Example question 3?",
],
};
return { baseSettings, aiChatSettings, searchSettings, modalSettings };
};
export default useInkeepSettings;
Define the component
Next, create an InkeepChatButton.tsx
file for the Chat Button
component.
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();
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} />;
}
For a full list of customizations, check out the Chat Button documentation.
FAQ
The scripts are loaded asynchronously so they don't affect page performance.