Add AI Chat to your WordPress site

What is WordPress

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

Get an API key

Go to the Inkeep Dashboard
Select your project under Projects
Go to the Integrations tab
Click on Create integration
Select Web
Provide a Name.
Specify a URL for where this integration will be used.
For production API keys, leave Enforce referrer URL checked.
Click on Create
Click the Example < /> button to get your API key and view suggested settings

For local or staging API keys, see here.

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

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/uikit-js@0.3.20/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: "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?",
          ],
        },
      },
    });
  };
 
  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 Chat Button documentation.

Add AI Chat to your WordPress site

What is WordPress

Get an API key

Install custom code plugin

Initialize the widget

Save custom code

On this page