What is VitePress

VitePress is a lightweight static site generator based on Vue.

Load the script files

Add the below scripts to the config.ts file:

export default {
  head: [
        src: "https://unpkg.com/@inkeep/widgets-embed@<<version>>/dist/embed.js",
        type: "module",
        defer: true,
    ["script", { src: "addInkeep.js", type: "module", defer: true }],

Latest widget version is 0.2.258

Create the addInkeep.js script

Create an addInkeep.js file in your public folder.

touch public/addInkeep.js

Now, create a container and configure the search bar component.

Configure the component

Next, embed the widget using the Inkeep.embed() function.

This will replace the default search bar used on the website.

// Embed the widget using the `Inkeep.embed()` function.
const config = {
  componentType: "SearchBar",
  targetElement: document.querySelector(".search"),
  // optional -- for syncing UI color mode
  colorModeSync: {
    observedElement: document.documentElement,
    isDarkModeCallback: (el) => {
      return el.classList.contains("dark");
    colorModeAttribute: "class",
  properties: {
    stylesheetUrls: ['/path/to/stylesheets'], // optional
    baseSettings: {
      apiKey: "YOUR_API_KEY",
      integrationId: "YOUR_INTEGRATION_ID",
      organizationId: "YOUR_ORGANIZATION_ID",
      primaryBrandColor: "#26D6FF", // your brand color, the 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?",

const inkeepWidget = Inkeep().embed(config);

For a full list of customizations, check out the Search Bar documentation.