Embedding the Virtual Assistant

Modified on Tue, 29 Oct at 9:56 AM

This section of the user guide is focused on embedding the virtual assistant. To help you navigate the article we have broken it down into the following sections:

What is embedding the virtual assistant?
Who has access to the embed code?
How do I embed the virtual assistant?
Accessibility
- Order of Focusable Events
Security

What is embedding the virtual assistant?

Embedding the virtual assistant is a very easy process. Our embed code uses only one sentence of code to paste onto your webpages.

Who has access to the embed code?

The Embedding page is available to individuals with the following permissions:

For more information on user permissions, review the User Roles & Permissions article.

How do I embed the virtual assistant?

On the Embedding page, select the Copy to clipboard button.
Paste this HTML embed code into the Javascript area of any/all webpages where you want the virtual assistant button to display (i.e., if your contract is for a financial aid virtual assistant, embed the virtual assistant onto each of your financial aid webpages).

For best usage, ensure the virtual assistant has maximum visibility by embedding the launcher onto every applicable webpage.

Note: To have the virtual assistant automatically load open when you visit a page, add "#bot" to the end of any URL where the virtual assistant is embedded. When you click the URL the virtual assistant will load open.

Once your virtual assistant is live on your webpages, review the Post-Launch: Promote your Service article!

Note: As of May 2022, Ocelot has new embed code available for the virtual assistant button.

If you have previously embedded the virtual assistant button, we recommend you re-embed this code on all webpages where the old button exists.

If you are using the old embed code, the launcher settings on the Look & Feel page will not update. You must re-embed the virtual assistant using the new embed code for the Look & Feel page launcher settings to update.

With the old embed code, the following will still work:

The welcome message, live conversation first, and Communication Opportunities behavior are determined by the settings on the Look & Feel and Behavior Settings pages.
URL matching is the primary way conversations are associated with specific offices/departments at your school for filtering transcripts and analytics.

If you are using the new embed code:

The launcher, welcome message, live conversation first, and Communication Opportunities behavior are determined by the settings on the Look & Feel and Behavior Settings pages.
URL matching is the primary way conversations are associated with specific offices/departments within your school for filtering transcripts and analytics.
```
For more settings about the Look & Feel of the page, please review the Navigating the Admin: Look & Feel Page article.
```

Accessibility

If your website makes use of HTML5 or WAI-ARIA landmarks, the virtual assistant may trigger a warning in accessibility audits. Add "data-ocelot-target" to the appropriate HTML container element to prevent this issue. We recommend using your site’s footer as the container element.

Before: "<footer>… footer content here …</footer>"
After: "<footer data-ocelot-target>… footer content here …</footer>"

During the testing period prior to when the virtual assistant goes live, it is recommended to embed the virtual assistant onto a test page to ensure there are no conflicts with other existing code on your website. If you send the test page’s URL to us, we will have our Tech Team test it to ensure proper bot functionality and performance.

Note: Be aware of any existing items on your site (i.e. floating anchor buttons) that might conflict with the virtual assistant’s launcher once embedded.

Order of Focusable Events

If the virtual assistant is showing as the first focusable event on your site, rather than "Skip to Content" or "Skip to Main Content", the virtual assistant embed code has been placed at the top of the "<body>" element in the HTML. This causes it to be prioritized before other elements in the order of keyboard focus when "Tab" is pressed.

There are two options to resolve this issue:
1. Use a targeted element for the virtual assistant by adding where you want the virtual assistant to be embedded in the HTML. By placing it after the "<aside>" element, the virtual assistant would be the second element focused on the page.
2. For an element that contains the skip link, you can give that element an id attribute with the value "skip-link", or include a class attribute value of either "skip-link" or "skip-navigation" to make the virtual assistant the second element focused on the page.

Security

If your institution has a Content Security Policy (CSP), you may need to configure your CSP settings for the virtual assistant to render properly.

For more information on Content Security Policy (CSP), please review the Content Security Policy (CSP) article.