Add AI Chat to your Bettermode community

Overview

You can add AI chat as a Bettermode widget to your Bettermode 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 App

To use the AI chat, first we need to create an application on the Bettermode platform.

Open the Bettermode Developer Portal
Click on Create a new app
Specify a name for the integration, example: Inkeep Widget
Select your community from the drop-down menu below
Click on Create app

Result:

Customizing App

Next, you need to go to the app you created and customize the widget.

Click on the Custom code section and add the following script to the Custom code for <head> area:

<script
  id="inkeep-script"
  src="https://unpkg.com/@inkeep/uikit-js@0.3.19/dist/embed.js"
  type="module"
  defer
></script>
 
<script defer>
  const baseConfig = {
    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
  };
  const inkeepScript = document.getElementById("inkeep-script");
 
  const addInkeepWidget = () => {
    const inkeepWidget = Inkeep().embed({
      componentType: "ChatButton",
      // optional -- for syncing UI color mode
      colorModeSync: {
        observedElement: document.body,
        isDarkModeCallback: (el) => {
          const currentTheme = el.getAttribute("data-color-scheme-mode");
          return currentTheme === "dark";
        },
        colorModeAttribute: "data-color-scheme-mode",
      },
      properties: {
        chatButtonType: "PILL",
        baseSettings: {
          ...baseConfig,
        },
        modalSettings: {
          // optional
        },
        searchSettings: {
          // optional
        },
        aiChatSettings: {
          // optional
          botAvatarSrcUrl: "https://mydomain.com/mylogo",
          quickQuestions: [
            "Example question 1?",
            "Example question 2?",
            "Example question 3?",
          ],
        },
      },
    });
  };
 
  inkeepScript.addEventListener("load", () => {
    if (document.body) {
      addInkeepWidget();
    }
  });
</script>

Click on the Test and publish section and click Publish.

Install App

Open community settings, then open the Apps section. Select the app you created.

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