Add Search Bar to WordPress

What is WordPress

WordPress popular content management system (CMS) designed for creating and managing websites.

Get an API key

Follow these steps to create an API key for your web integration.

Install custom code plugin

This plugin is required to add custom code in order to create a widget.

Open WordPress admin panel
Select the Plugins tab
Open the Add New Plugin section
Install the Head & Footer Code plugin

Creating the container

Add a container for the widget. You can do this using the built-in WordPress functionality.

Open the Appearance tab
Select Editor mode
Select the area to which you want to add the SearchBar widget
Add a Custom HTML block containing:

<div id="inkeepSearchBar"></div>

Example:

Next, under Tools go to the Head & Footer Code subsection. Add the code below to the HEAD Code section:

<script
  id="inkeep-script"
  type="module"
  src="https://cdn.jsdelivr.net/npm/@inkeep/cxkit-js@0.5/dist/embed.js"
  defer
></script>

<script defer>
  const inkeepScript = document.getElementById("inkeep-script");
 
  // configure and initialize the widget
  const addInkeepWidget = () => {
    const inkeepWidget = Inkeep.SearchBar("#inkeepSearchBar", {
      baseSettings: {
        apiKey: "INKEEP_API_KEY", // required
        primaryBrandColor: "#26D6FF", // your brand color, widget color scheme is derived from this
        organizationDisplayName: "Inkeep",
        // ...optional settings
        theme: {
          // optional path to a custom stylesheet
          styles: [
            {
              key: "main",
              type: "link",
              value: "/path/to/stylesheets",
            },
          ],
          // ...optional settings
        },
      },
      modalSettings: {
        // optional settings
      },
      searchSettings: {
        // optional settings
      },
      aiChatSettings: {
        // optional settings
        aiAssistantAvatar: "https://mydomain.com/mylogo", // use your own ai assistant avatar
        exampleQuestions: [
          "Example question 1?",
          "Example question 2?",
          "Example question 3?",
        ],
      },
    });
  };
 
  inkeepScript.addEventListener("load", () => {
    if (document.body) addInkeepWidget(); // initialize the widget
  });
</script>

Save custom code

Click on the Save Changes. Navigate to your web application to make sure the widget is installed correctly.

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