Overview

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

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

<script defer>
  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
      },
      searchSettings: {
        // optional
      },
      aiChatSettings: {
        // optional
        botAvatarSrcUrl: "https://mydomain.com/mylogo",
        quickQuestions: [
          "Example question 1?",
          "Example question 2?",
          "Example question 3?",
        ],
      },
    },
  });
</script>

Latest widget version is 0.2.258

Optional: click preview to test out the widget.

Click on the Save.

Use Theme-Component

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.

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