Skip to main content

Widget

We offer a widget (located on the bottom right corner of this page) that connects to your Assistant and is embedded within a public website (a website with no authentication mechanism) of your choosing.

Steps for Embedding the Widget​

An Assistant customer will complete step 2. A member from the AI and Platform Engineering team will complete step 1, and an IT professional from the cutomer's department will complete steps 3 and 4.

  1. Ensure 'widget-embed-24-12-17' is added as a Curator to the customer's Assistant group. This ensures private Assistants can successfully send valid responses to the widget.
  2. Ensure the 'Description' (within 'Curator Panel' > 'Assistants' > Edit Assistant) is in the form of 'Hi! I'm NaviGator, your AI Assistant for group name. How can I help you?'. This description is the widget's persona message, or the first message that displays when a new session is created within the widget.
  3. Add as the last child of the page's body element (recommended but not required):
<div id="navigator-assistant"></div>
  1. Add as a child of the page's head element (recommended but not required) and replace personaId with the number found at the end of the "edit persona" page of the navigator assistant curator page. For example https://assistant.ai.it.ufl.edu/admin/assistants/2 has an ID of 2.:
<script defer="defer" src="https://assets.ai.it.ufl.edu/navigator-assistant.js" personaId="2" fullscreen="true" fullscreen-coverage="65" analyticsId="G-PPPH9X8KSY"></script>
  • fullscreen (optional) is an optional attribute and may be omitted (if omitted fullscreen will equal 'false'). With fullscreen enabled users can expand the widget to cover most of the web page's height and width-- an IT professional should inquire whether or not the customer would like this feature enabled.
  • fullscreen-coverage (optional) is an optional attribute and does not need to be defined if fullscreen=true. If fullscreen = true and you would like to adjust the default fullscreen's height and width, you can define an int between 50 and 95 (inclusive) which represents a percentage of the user's webpage that is covered by the widget (ex. if a user would like 95% of their webpage covered by a fullscreen widget, set fullscreen-coverage='95')

NOTE: Your Assistant's personaId, fullscreen, and fullscreen-coverage values will differ from the example above