Quick Start

Getting started with Next.js is very similar to any React application. The only key difference is you want to load the widget client side as the widget relies on serveral browser APIs. Below is a quick example of adding the Chat Button to a Next.js application.

import type {
  InkeepChatButtonProps,
  InkeepWidgetBaseSettings,
} from "@inkeep/widgets";

const InkeepChatButton: any = dynamic(
  () => import("@inkeep/widgets").then((mod) => mod.InkeepChatButton),
  { ssr: false }
);

const baseSettings: InkeepWidgetBaseSettings = {
  apiKey: process.env.INKEEP_INTEGRATION_API_KEY!,
  integrationId: process.env.INKEEP_INTEGRATION_ID!,
  organizationId: process.env.INKEEP_ORGANIZATION_ID!,
  organizationDisplayName: "Inkeep",
  primaryBrandColor: "#522FC9",
};

const inkeepChatButtonProps: InkeepChatButtonProps = {
  chatButtonType: "ICON_TEXT_SHORTCUT",
  baseSettings: {
    ...baseSettings,
  },
  modalSettings: {
    // optional InkeepModalSettings
  },
  searchSettings: {
    // optional InkeepSearchSettings
  },
  aiChatSettings: {
    // optional InkeepAIChatSettings
  },
};

export const ChatButton = () => {
  return <InkeepChatButton {...inkeepChatButtonProps} />;
};

Make sure to add your Inkeep identifiers to your environment settings. An example next.config.js file is below.

/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    INKEEP_INTEGRATION_API_KEY: process.env.INKEEP_INTEGRATION_API_KEY,
    INKEEP_INTEGRATION_ID: process.env.INKEEP_INTEGRATION_ID,
    INKEEP_ORGANIZATION_ID: process.env.INKEEP_ORGANIZATION_ID,
  },
};

module.exports = nextConfig;

You can alternatively use the NEXT_PUBLIC_ prefix in your environment variables to access them without a next.config.js file.

You can follow a similar pattern for any of the Inkeep widgets.

For App Router

For Next.js apps that use the App router, just use the ‘use client’ directive at the top of the page to load the widget on the client side.