What is WordPress

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

Install custom code plugin

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

  1. Open WordPress admin panel
  2. Select the Plugins tab
  3. Open the Add New Plugin section
  4. Install the Head & Footer Code plugin

Creating the container

Next, you need to add a container for the widget. You can do this using the built-in WordPress functionality.

  1. Open the Appearance tab
  2. Select Editor mode
  3. Select the area to which you want to add the SearchBar widget
  4. Add a Custom HTML block

Example:

Initialize the widget

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

<script
  id="inkeep-script"
  src="https://unpkg.com/@inkeep/widgets-embed@<<version>>/dist/embed.js"
  type="module"
  defer
></script>

<script defer>
  const inkeepScript = document.getElementById("inkeep-script");

  // configure and initialize the widget
  const addInkeepWidget = () => {
    const inkeepWidget = Inkeep().embed({
      componentType: "SearchBar",
      targetElement: document.getElementById("inkeepSearchBar"),
      properties: {
        stylesheetUrls: ["/path/to/stylesheets"], // optional
        baseSettings: {
          apiKey: "YOUR_API_KEY", // required
          integrationId: "YOUR_INTEGRATION_ID", // required
          organizationId: "YOUR_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?",
          ],
        },
      },
    });
  };

  inkeepScript.addEventListener("load", () => {
    if (document.body) addInkeepWidget(); // initialize the widget
  });
</script>

Latest widget version is 0.2.258

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.

FAQ