Add AI Chat to your Redocly developer portal

scripts:
  - ./static/addInkeep.js

touch static/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: "PILL", // <-- the "Pill" variation
      baseSettings: {
        apiKey: "INKEEP_API_KEY", // required
        integrationId: "INKEEP_INTEGRATION_ID", // required
        organizationId: "INKEEP_ORGANIZATION_ID", // required
        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/uikit-js@0.3.5/dist/embed.js"
);

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