React

Scenario

In some cases, based on end-user location/preferences you may want to disable some analytics/cookies. In order to achieve this, you need to modify these widget configuration properties:

Property	Type	Description
optOutAnalyticalCookies	`boolean`	Option to disable cookies used for tracking a user's Inkeep usage behavior across multiple browser sessions. Only same-domain cookies are used. Default: `false`.
optOutAllAnalytics	`boolean`	Option to disable all usage analytics, even anonymous ones like clicking on a source. Default: `false`.
optOutFunctionalCookies	`boolean`	Option to disable cookies that are used for functionality like remembering whether the user was last using `AI chat` or `Search` modes. Default: `false`.
remoteErrorLogsLevel	`RemoteErrorLogsLevel`	The level of remote error logging for Inkeep's monitoring service. Default: `RemoteErrorLogsLevel.IdentifiableErrors`.

In the example below we have a single checkbox where the user can opt out of all analytics. This pattern can be used more granularly to map your own customer preference system to ours.

Note

By default, Inkeep does not collect IP addresses, device IDs, or other device-based information from components of the Inkeep uikit library.

Example

Parent component:

import { ChangeEvent, useState } from "react";
import InkeepChatButton from "./components/InkeepChatButton";
import { RemoteErrorLogsLevel } from "@inkeep/uikit";
 
function ParentComponent() {
  const [optOutAnalytics, setOptOutAnalytics] = useState(false);
 
  const handleChangeCheckbox = (e: ChangeEvent<HTMLInputElement>) => {
    setOptOutAnalytics(e.target.checked);
  };
 
  return (
    <>
      <InkeepChatButton
        inkeepPrivacyProperties={{
          optOutAnalyticalCookies: optOutAnalytics,
          optOutAllAnalytics: optOutAnalytics,
          optOutFunctionalCookies: optOutAnalytics,
          remoteErrorLogsLevel: optOutAnalytics
            ? RemoteErrorLogsLevel.None
            : RemoteErrorLogsLevel.IdentifiableErrors,
        }}
      />
      {/* ... */}
      <input
        type="checkbox"
        checked={optOutAnalytics}
        id="optOutAnalytics"
        onChange={handleChangeCheckbox}
      />
      <label htmlFor="optOutAnalytics">Opt out of all analytics</label>
      {/* ... */}
    </>
  );
}
 
export default ParentComponent;

Widget component:

import {
  type InkeepChatButtonProps,
  type InkeepBaseSettings,
  type RemoteErrorLogsLevel,
} from "@inkeep/uikit";
import { memo, useEffect, useState } from "react";
 
const baseSettings: InkeepBaseSettings = {
  apiKey: process.env.INKEEP_API_KEY!,
  integrationId: process.env.INKEEP_INTEGRATION_ID!,
  organizationId: process.env.INKEEP_ORGANIZATION_ID!,
  organizationDisplayName: "Inkeep",
  primaryBrandColor: "#26D6FF",
};
 
interface InkeepPrivacyProperties {
  optOutAnalyticalCookies: boolean;
  optOutAllAnalytics: boolean;
  optOutFunctionalCookies: boolean;
  remoteErrorLogsLevel: RemoteErrorLogsLevel;
}
 
interface IProps {
  inkeepPrivacyProperties: InkeepPrivacyProperties;
}
 
function InkeepChatButton({ inkeepPrivacyProperties }: IProps) {
  const [ChatButton, setChatButton] =
    useState<React.FC<InkeepChatButtonProps>>();
 
  useEffect(() => {
    const loadChatButton = async () => {
      try {
        const { InkeepChatButton } = await import("@inkeep/uikit");
        setChatButton(() => InkeepChatButton);
      } catch (error) {
        console.error("Failed to load ChatButton:", error);
      }
    };
 
    loadChatButton();
  }, []);
 
  const chatButtonProps: InkeepChatButtonProps = {
    baseSettings: {
      ...baseSettings,
      ...inkeepPrivacyProperties,
    },
    aiChatSettings: {
      // optional settings
    },
    searchSettings: {
      // optional settings
    },
    modalSettings: {
      // optional settings
    },
  };
 
  return ChatButton ? <ChatButton {...chatButtonProps} /> : <></>;
}
 
// use memo to avoid component re-rendering
export default memo(InkeepChatButton);

Scenario

Example

On this page