Overview

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

Create App

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

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

Result:

Customizing App

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

Initialize 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/widgets-embed@<<version>>/dist/embed.js"
  type="module"
  defer
></script>

<script defer>
  const baseConfig = {
    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
  };
  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: "ICON_TEXT",
        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>

Latest widget version is 0.2.258

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.