Add AI Chat to your Discourse community

Overview

You can add AI chat as a Discourse widget to your Discourse community.

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 and URL (optional) for the integration
Click on Create
Click the Example < /> button to get your API key and view suggested settings

Create Theme-Component

To use the AI chat, first we need to create a theme-component on the Discourse platform.

Click the Admin section in the sidebar menu
Open the Customize tab
Open the Themes subsection
Now, select the Components tab
Click on Install
Open the Create new menu and specify a name for the component
Click on Create

Example:

Customizing Theme-Component

Next, in the created theme component menu, click Edit CSS/HTML to customize the widget.

Click on the Head section and paste the following scripts:

<script
  src="https://unpkg.com/@inkeep/uikit-js@0.3.19/dist/embed.js"
  type="module"
  defer
></script>
 
<script defer>
  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
      },
      searchSettings: {
        // optional
      },
      aiChatSettings: {
        // optional
        botAvatarSrcUrl: "https://mydomain.com/mylogo",
        quickQuestions: [
          "Example question 1?",
          "Example question 2?",
          "Example question 3?",
        ],
      },
    },
  });
</script>

<script
  src="https://unpkg.com/@inkeep/uikit-js@0.3.19/dist/embed.js"
  type="module"
  defer
></script>
 
<script defer>
  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
      },
      searchSettings: {
        // optional
      },
      aiChatSettings: {
        // optional
        botAvatarSrcUrl: "https://mydomain.com/mylogo",
        quickQuestions: [
          "Example question 1?",
          "Example question 2?",
          "Example question 3?",
        ],
      },
    },
  });
 
  /* Below shifts the 'Ask AI' button upwards in mobile so that it doesn't conflict with the Material UI */
 
  const changeInkeepWidgetPosition = (bottom, widgetRoot) => {
    const styleDiv = document.createElement("style");
    styleDiv.textContent = `.ikp-btn { bottom: ${bottom} !important; }`;
    widgetRoot.appendChild(styleDiv);
  };
 
  const mutateInkeepWidget = () => {
    let isPluginCreateTopicButton = false;
    const ikpShadowDom =
      document.getElementById("ikp-chat-button").childNodes[0];
 
    const createTopicButton = document.getElementById("create-topic");
    isCreateTopicButtonVisible =
        createTopicButton && window.getComputedStyle(createTopicButton, null).overflow == "hidden";
 
    if (ikpShadowDom) {
      const inkeepWidgetRoot =
        ikpShadowDom.shadowRoot.getElementById("inkeep-widget-root");
      isCreateTopicButtonVisible
        ? changeInkeepWidgetPosition("7.5rem", inkeepWidgetRoot)
        : changeInkeepWidgetPosition("1.5rem", inkeepWidgetRoot);
    }
  };
 
  const observer = new MutationObserver(mutateInkeepWidget);
 
  observer.observe(document.body, {
    attributes: true,
    childList: true,
    subtree: false,
  });
 
</script>

Note

Optional: click preview to test out the widget.

Click on the Save.

Apply to themes

In the Include component on these themes setting, specify the themes in which the widget will be used. Alternatively, you can create and specify your own theme.

Allow list from Content Security Policy (CSP)

If you are using a Discourse version earlier than 3.3.0.beta1 you may need to allow-list the Inkeep script by modifying the Content Security Policy (CSP). In version 3.3.0.beta1 or later external scripts should work without additional configuration, see here for more details:

Click the Admin section in the sidebar menu
Open the Settings tab
Open the Security section
Add https://unpkg.com/@inkeep/uikit-js@0.3.19/dist/embed.js to the content security policy script src setting
Enable content security policy strict dynamic setting