Skip to main content

Add an AI chatbot

You can add an AI chatbot to your application for your users to interact with. The chatbot is aware of your application's design and the available activities. Users can ask the chatbot questions about what the application does and how to use it. They can also ask the chatbot to perform activities for them.

Before you can add a chatbot, you must create an AI agent. The AI agent configuration determines the LLM that is used. Note that when a user interacts with the chatbot, all user inputs are shared with the provider of the LLM.

Add a chatbot to a page or view​

You can include a chatbot in a page (such as the homepage) or the view of a casetype. This is useful if you want to provide the chatbot in a specific location within your application. This is also a requirement if you want to embed the chatbot in a navigation sidebar, although you may want to use a dedicated page for this purpose.

To include a chatbot widget in a view:

  1. From your Studio, open the view for the relevant casetype, such as the homepage. For more information about creating pages and views, see Display content to users.
  2. Add the AI widget to the view.
  3. Select the AI agent you want to use from the Agent picklist.
  4. Use the First message field to specify the default text that is displayed before a user starts interacting with the chatbot.
  5. Use the Chat title field to display a heading at the top of the chat pane.
  6. At a user's request, the chatbot can perform activities. These can either be activities on which the AI agent has been granted rights, or activities that the current user has rights to perform:
    • Select Agent rights to allow the chatbot to perform any activities on which the AI agent has been granted rights. For more information about agent rights, see Configure agent permissions.
    • Select User rights - Always show form to allow the chatbot to populate an activity form with suggested values based on information provided by the user. When this option is selected, the user can edit the values before submitting the activity, or abort the process if they do not want to proceed.
    • Select User rights - Auto submit to allow the chatbot to perform activities on the user's behalf. The user can view the details of the activity that was performed from the chat history.
  7. By default, the chatbot can access all activities for which suitable rights have been granted. To limit the activities that the chatbot can perform:
    1. Enable Custom activities enabled.
    2. Select one or more activities from the Custom activities picklist.
    3. Enable either Include to restrict the chatbot to performing only the selected activities, or Exclude to allow the chatbot to perform all activities other than those you have selected.
  8. Configure the widget rights to specify the user roles that can see the chatbot.

You can now test the chatbot from your Development environment. You many need to tweak the prompts in the agent settings to achieve the behavior you want. Keep in mind that AI models are designed to learn from experience, so the chatbot's behavior will evolve over time.

Add a chatbot to a navigation sidebar​

You can also embed a chatbot widget in a navigation sidebar. This is useful if you want to allow users to continue a conversation with the chatbot as they navigate around your application.

To embed a chatbot in a sidebar, first add an AI widget to the view of a page casetype, as described above. You may want to create a dedicated page casetype for this purpose. Then use the html.subwidget template function to embed the AI widget in a sidebar menu item as follows:

  1. From the Navigations page in your Studio, either select an existing navigation sidebar or create a new one.
  2. Add a new menu item for the chatbot and set the Type to HTML.
  3. In the Text field, enter html. and select Subwidget.
  4. Click the html.subwidget template function to configure the details:
    1. From the Tag picklist, select div.
    2. From the Widget picklist, select the AI conversation widget that you created for this purpose.
    3. In the Caseid field, use the page. template function to identify the page containing the widget.
    4. From the Load picklist, select Directly to load the widget when the page is loaded. Alternatively, to require users to click another element to load the chatbot, select After click and specify the CSS ID of the clickable element (prefaced by #). This could be an element on the same navigation bar, a different navigation bar, or elsewhere on the page.
    5. Configure any other HTML attributes as required. When you have finished, click Submit to return to the menu item settings.
  5. Optionally wrap the html.subwidget template function in additional HTML. For example, you may want to apply one or more CSS classes to control the appearance of the chatbot.
  6. When you have finished, click Submit to create the chatbot menu item.
  7. Grant rights to view the chatbot menu item to the relevant user roles.

Once you have configured the sidebar, enable it on one or more casetype views. For more information about configuring navigation bars, see Add a navigation bar to your application.

Tip:

Only users in roles with rights to view the widget and the navigation menu item can see a chatbot widget embedded in a sidebar.