Overview

Redocly Developer Hubs provide a way to build sites for your documentation from plain Markdown files.

Attach the script

Attach the addInkeep.js script in the siteConfig.yaml file:

scripts:
  - ./static/addInkeep.js

Create the addInkeep.js script

Create an addInkeep.js file in your static folder.

touch static/addInkeep.js

Now, configure the chat button component.

addInkeep.js
// Function for adding a script to the page
const addScript = (src, type = "module", defer = true) => {
  const script = document.createElement("script");
  script.src = src;
  script.type = type;
  script.defer = defer;
  document.body.appendChild(script);
  return script;
};

// Function for customizing the widget configuration
const inkeepConfig = () => {
  return {
    componentType: "ChatButton",
    properties: {
      chatButtonType: "ICON_TEXT", // <-- the "Pill" variation
      baseSettings: {
        apiKey: "YOUR_API_KEY",
        integrationId: "YOUR_INTEGRATION_ID",
        organizationId: "YOUR_ORGANIZATION_ID",
        primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
        organizationDisplayName: "Inkeep",
        // ...optional settings
      },
      modalSettings: {
        // optional settings
      },
      searchSettings: {
        // optional settings
      },
      aiChatSettings: {
        // optional settings
        botAvatarSrcUrl: "/img/logo.svg", // use your own bot avatar
        quickQuestions: [
          "Example question 1?",
          "Example question 2?",
          "Example question 3?",
        ],
      },
    },
  };
};

// Function for initializating the widget 
const addInkeepWidget = () => {
  const inkeepWidgetScript = document.createElement("script");
  inkeepWidgetScript.defer = true;

  // Embed the widget using the `Inkeep.embed()` function.
  inkeepWidgetScript.innerHTML = `
    const config = (${inkeepConfig.toString()})();
    Inkeep().embed(config);
`;

  document.body.appendChild(inkeepWidgetScript);
};

// Adding the script and initializing the widget
const embedScript = addScript(
  "https://unpkg.com/@inkeep/widgets-embed@<<version>>/dist/embed.js"
);

embedScript.addEventListener("load", () => {
  addInkeepWidget();
});

Latest widget version is 0.2.258

For a full list of customizations, check out the Chat Button documentation.

FAQ