​
What is VuePress

VuePress a markdown-centered static site generator.

​
Get an API key

  1. Go to the Inkeep Dashboard
  2. Select your project under Projects
  3. Go to the Integrations tab
  4. Click on Create integration
  5. Select Web
  6. Provide a Name and URL (optional) for the integration
  7. Click on Create
  8. Click the Example < /> button to get your API key and view suggested settings

​
Load the script files

  1. Navigate to the .vuepress directory
  2. Add the below scripts to the config.js file:
config.js
export default {
  head: [
    [
      "script",
      {
        src: "https://unpkg.com/@inkeep/uikit-js@0.3.18/dist/embed.js",
        type: "module",
        defer: true,
        onLoad: "initializeInkeep()",
      },
    ],
    ["script", { src: "js/addInkeep.js", type: "module", defer: true }],
  ],
};

​
Create the addInkeep.js script

Create an addInkeep.js file in your public/js folder.

touch public/js/addInkeep.js

Now, configure the chat button component.

addInkeep.js
const initializeInkeep = () => {
  const addInkeepWidget = () => {
    const inkeepWidget = Inkeep().embed({
      componentType: "ChatButton",
      colorModeSync: {
        observedElement: document.documentElement,
        isDarkModeCallback: (el) => {
          const currentTheme = el.getAttribute("data-color-mode");
          return currentTheme === "dark";
        },
        colorModeAttribute: "data-color-mode",
      },
      properties: {
        chatButtonType: "PILL",
        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: "https://mydomain.com/mylogo", // use your own bot avatar
          quickQuestions: [
            "Example question 1?",
            "Example question 2?",
            "Example question 3?",
          ],
        },
      },
    });
  };

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", addInkeepWidget);

    return;
  }

  addInkeepWidget();
};

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

Search BarSearch Bar