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

Initialize the widget

Next, under the Tools tab open Head & Footer Code option. 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: "ChatButton",
      properties: {
        chatButtonType: "ICON_TEXT",
        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 Chat Button documentation.

FAQ