This article...
- Introduces the AI chat widget-builder tool.
- Advises Admins to consider "accessibility" in their widget design.
- Details how to access the External AI Chat Builder page in the Admin interface.
- Describes the "preview" feature and how to access it, and recommends using it to immediately review your build actions.
- Details the configuration tabs of the tool and explains each of the settings with helpful notes and tips where necessary.
- Mentions the default AI disclaimer.
Super Admins can use the External AI Chat Builder to input configuration preferences in order to generate the HTML and JavaScript code that can be embedded on a non-Higher Logic site in order to introduce AI-chat functionality to that site.
The chat builder automatically connects the widget to your community site. The widget has the same functionality — and can access to the same data — as your community-based AI Assistant, based on each users' permissions.
Consider accessibility in your design
Consider "accessibility" guidelines and best practices when you customize your AI chat widget. Make sure that the various elements (e.g., text colors; button colors; background colors) aren't "harsh" or uncomplimentary.
If your organization has an established "brand," it's a good idea to adhere as closely as possible to that when you can.
See Best Practices - Accessibility for helpful tips on colors and contrast.
Access the widget-builder tool
To access the settings:
- In the Admin Toolbar, click Admin.
- Navigate to AI Features > AI External Chat Builder.
The External AI Chat Builder page opens.
Chat Builder page
The chat-builder tool has four tabs that are described in dedicated sections in this article.
Work through the tool's check boxes and configuration fields on these tabs to build and customize your unique external chat widget, and then copy your custom HTML code to your clipboard and embed it in your external site.
TIP: There is no dependency across these tabs. You can work on them in any order and switch from one to another without compromising or losing your work.
AI Assistant preview
The Preview AI Assistant feature on the right side of the page is available on all of the tabs. As you work, it auto-updates to display your changes.
NOTE: There is a two-bar tab on the left of the panel (not shown in the image below) that you can drag left and right to adjust the width of the panel.
- On the Unauthenticated tab, it displays the "authentication required" page so that you can easily review any changes you make.
TIP: Use the preview as you configure the various settings. Being able to immediately see the affect of a setting enables you to work more quickly.
Customization tab
This tab has several sections in which you enable/disable, manage, and customize various aspects of the chat widget.
- AI Assistant is where you configure the properties of the base chat widget.
- AI-Powered Discussion Drafting is where you enable and configure the banner that gives your users the create-Discussion option.
- Chat History is where you enable and manage the sidebar that displays prior chat conversations to your users.
NOTE: If your community site is set up for your AI use to be private, the chat history will not display, even if you enable the Show Chat History Sidebar for your external widget.
AI Assistant settings
This section is where you configure the properties of the main part of the chat widget.
TIP: Open the AI Assistant preview to immediately review your changes on the widget.
| Setting | Description |
|---|---|
| Select AI Search Agent (Optional) | Accept the default search agent, Standard Search Agent, or click the dropdown to set a different search agent for this widget. Learn about Search Agents. |
| Assistant Display Name | Accept the default display name, AI Assistant, or click into the field to customize the display name (e.g., AI Chat). This name displays at the top of the chat panel, with all AI responses, and in the user-input field. |
| Avatar | Accept the default avatar, the circle with the sparkle, or select Custom Image to upload an image from one of several repositories as described in file uploader process and options. The avatar or your custom image displays on the AI Assistant initiate button in the lower right corner and in each prompt/response from the AI. |
| Initial Message | Accept the default greeting text, Welcome! How can I help you today., or click into the field to customize this text (max. 280 characters). This greeting displays in the original prompt from the AI. NOTE: If you have the preview open and you edit this field, the preview automatically closes. Re-open the panel to preview your changes. |
| Disclaimer | Accept the default greeting text, AI can make mistakes. Please verify important information., or click into the field to customize this text. This caution displays at the bottom of the chat panel. NOTE: Higher Logic recommends letting your members know that AI might generate incorrect or misleading information, and to verify important information. |
| Input Placeholder | Accept the default input-field text, Ask AI Assistant..., or click into the field to customize this text. This text displays in the chat's user-input field. If you specify a custom value in the Assistant Display Name field (above) and do nothing here, the chat's user-input field will use that field's custom value, as in Ask AI Chat. |
| External Widget ID | Accept the default of a blank field if you want to use the AI Assistant Key, or click into the field and specify a unique Origin Tool ID to separately track multiple instances of the same AI Assistant. NOTE: This value is used for chat history and reporting. Refer to Chat History settings, below, for information on how this setting affects the chat-history sidebar. |
AI-Powered Discussion Drafting settings
This section is where you configure the get-help banner that displays below the results.
You can customize the text that displays to users to encourage them to continue the conversation with community members by creating a Discussion thread, and you can manage the "AI draft" functionality.
TIP: Open the AI Assistant preview to immediately review your changes on the widget.
Chat History settings
This section is where you configure the chat-history sidebar that displays past conversations to users. Users can click a "history" item to display its content.
NOTE: If your community site is set up for your AI use to be private, the chat history will not display, even if you enable the Show Chat History Sidebar for your external widget.
Chat History settings and widget ID notes
What displays in the chat-history sidebar depends on what has been set for the External Widget ID field on this configuration page.
- If you accepted the default of a blank field in order to use the AI Assistant Key, all chats that use the default ID will populate the chat-history sidebar.
- If you specified a unique Origin Tool ID and it is:
- unique to this instance of the external widget, only those chats that occurred in this instance of the widget populate the chat-history sidebar.
- not unique to this instance of the external widget, all discussions that occurred in widgets that have the same ID populate the chat-history sidebar.
TIP: Open the AI Assistant preview to immediately review your changes on the widget.
| Setting | Description |
|---|---|
| Show Chat History Sidebar | Accept the default, checked (i.e., enabled), to have the history sidebar display to users. If you uncheck the box to hide the history sidebar and the two sidebar-options fields, a hidden setting, Clear Chat Button Text, displays (it is described in this table). |
| New Chat Button Text | Accept the default button text, New Chat, or click into the field to customize this text. This button displays at the top of the sidebar and initiates a new chat. |
| History Header Text | Accept the default heading text, Chats, or click into the field to customize this text. This heading displays above the list of history items. |
| Clear Chat Button Text | Accept the default button text, Clear Chat, or click into the field to customize this text. This button displays in the user-input section and, when clicked, it clears the user's input and resets the chat. This button displays only if the Show Chat History Sidebar box is unchecked. |
Unauthenticated tab
This tab is where you configure the experience for unauthenticated-users (i.e., those who have not logged in).
NOTE: All users are required to be logged in to your Higher Logic community site in order to use the AI Assistant chat widget on your external site.
TIP: Open the AI Assistant preview and specify the Login-page properties to see how each displays.
The Login Options section has just a few configuration settings.
| Setting | Description |
|---|---|
| Login Title | Accept the default title, Authentication Required, or click into the field to customize this text. |
| Login Help Text | Accept the default guidance text, Please log in to use the AI Assistant, or click into the field to customize this text. |
| Login Button Text | Accept the default button text, Log In, or click into the field to customize this text. |
Design tab
This tab has several sections in which you configure the appearance of the widget with themes and, optionally, any preferred customizations.
Predefined Themes
This section displays three theme options that are pre-configured. This makes it easy for you to quickly set the appearance of the AI chat widget.
TIP: Open the AI Assistant preview and click the theme options to see how each displays.
- Light Mode (the "override" fields below do not have color values; use them to specify color overrides)
- Dark Mode (the "override" fields below do not have color values; use them to specify color overrides)
- Use Site Theme (the default; the "override" fields below are populated with the color values from your theme; use them to specify color overrides)
NOTE: Use Site Theme automatically applies your main microsite's primary color scheme to the widget. If the color scheme is changed in the theme, the change is applied to the widget when the builder tool is subsequently opened, but the change is not applied to the widget.
- Check the Use SVG background in chat area box to use the "wave" background in the chat widget.
- If unchecked, the chat widget displays a solid, untextured background color.
EXAMPLE: The following image demonstrates the "wave" SVG background in grayscale.
Override Color Customization
Use these settings to override the colors that have been automatically applied by your Theme selection above.
- Each setting changes only that element of the widget.
- All of these settings have a Reset option that displays only when the existing value has been changed. It reverts the color to whatever color had been applied before setting was clicked.
- If you choose Use Site Theme above and change a color here, the change applies to the widget only; it does not change its counterpart in your site's theme.
- If your site's theme is changed, the override that you set here will not be affected.
| Setting | Use to set... |
|---|---|
| Chat Panel Background | The background color of the chat panel. |
| Chat Panel Text | The color of the text for all elements on the chat panel background, such as the Display Name and the Disclaimer text. |
| Avatar Color | The "fill" color of the default avatar's circle. NOTE: This setting does not display if you added a custom icon in Avatar on the Customization tab. |
| Avatar Sparkle Color | The color of the sparkle stars on the default avatar. NOTE: This setting does not display if you added a custom icon in Avatar on the Customization tab. |
| Button Background | The background color for buttons, such as the New Chat button and the left/right scroll buttons that you use to navigate the Sources. |
| Button Text | The color of the text on the "Button Background" buttons (above). |
| Loading Ellipses Color | The color of the "loading" indicators. |
| Reaction Color | The color of the "reaction" icons (e.g., thumbs up, thumbs down). |
| Source Link Hover Color | The color of the Source title link when hovered on. |
Generated Code tab
This tab has the HTML code that has been automatically generated as a result of what you've configured on the other tabs.
IMPORTANT: Do not alter this code. If you want to make a change, do so on the relevant tab in the tool.
TIP: Before you copy and embed the code on your external site, check the widget design in the AI Assistant preview. If it displays as you expect, you can proceed.
- Next to the Embed Code label, click the copy icon to load the generated code onto your clipboard.
- Access the HTML code of the external website page on which you want to embed the AI chat widget.
- Paste the code that you copied from the Embed Code field anywhere on the page. (The placement of the code is not important; the AI Assistant button always displays in the lower right of the page.)
- Save the page and verify that the widget displays as you expect.
The widget should display and behave exactly as it does in the AI Assistant preview (except, it should display the AI Assistant button that does not display in the preview).
Consider doing a few tests to verify that the chat behaves and functions properly.
IMPORTANT: If you want to make any changes or fix an issue, do not work in the embedded code. Instead, visit the relevant tab in the tool, make the changes, and then repeat the copy-&-paste process.
Default AI disclaimer
In the widget, the default AI disclaimer displays when the AI identifier is hovered on and/or clicked.
- This disclaimer text is managed exclusively by Higher Logic.