Overview

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

Get an API key

  1. Go to the Inkeep Dashboard
  2. Select your project under Projects
  3. Go to the Integrations tab
  4. Click on Create integration
  5. Select Web
  6. Provide a Name and URL (optional) for the integration
  7. Click on Create
  8. 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.

  1. Click the Admin section in the sidebar menu
  2. Open the Customize tab
  3. Open the Themes subsection
  4. Now, select the Components tab
  5. Click on Install
  6. Open the Create new menu and specify a name for the component
  7. Click on Create

Example:

Customizing Theme-Component

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

Initialize the widget

Click on the Head section and paste the following scripts:

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

<script defer>
  const inkeepWidget = Inkeep().embed({
    componentType: "ChatButton",
    properties: {
      chatButtonType: "ICON_TEXT",
      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>
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)

To allow the Inkeep script to be allow-listed, modify the Content Security Policy (CSP):

  1. Click the Admin section in the sidebar menu
  2. Open the Settings tab
  3. Open the Security section
  4. Add https://unpkg.com/@inkeep/widgets-embed@0.2.288/dist/embed.js to the content security policy script src setting
  5. Enable content security policy strict dynamic setting

Example:

Go back to the main community page and reload the page.