Add to your community
Bettermode
Add AI chat to your Bettermode community.
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.
- 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.
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@0.2.277/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>
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.