Glean Chat

Glean Chat integrates its deep understanding of all your company's content, employees, activity, and how they relate to one another, to deliver personalized answers that are best fit for each individual user.

chat-preview

The following steps will walk you through how to embed Glean Chat into your website.

Add Javascript API client

Include the JS library in the <head> of your page, where GLEAN_APP_DOMAIN is the domain at which your company accesses the Glean web app. By default this is app.glean.com but if you've configured a custom sub-domain it will be something like your-company.glean.com.
Note

The Glean web app domain is not the same as your company's Glean backend domain, which will be something like your-company-be.glean.com.

Copy
Copied
  <script defer src="https://{GLEAN_APP_DOMAIN}/embedded-search-latest.min.js"></script>

Setup

Next step is to configure the Glean Chat embed and add it your site.

  1. Create a container element of the appropriate size and position on the page. The container must be position:relative and display:block and have a defined width and height.
  2. Render Glean Chat into the container element, for example:
    Copy
    Copied
      window.EmbeddedSearch.renderChat(containerElement)

Customizations

For usage details and customizations, see renderChat.

Themes

Theme options are supported via ChatOptions. Additional options can be added as required.

Authentication

By default, upon first usage, the user will have to both:

  1. Enter their email address and
  2. Perform SSO authentication

The first step can be avoided by passing the backend parameter.

The second step can be avoided by configuring a server-to-server handshake and passing the user's auth token to Options.authToken.

Note

When passing an authToken, a onAuthTokenRequired callback must also be configured to ensure that the token is refreshed when it is nearing expiration.

Note that if the user's browser disallows third party cookies then SSO authentication will not work and server-to-server authentication is required.

Recipes

Vanilla JS

AI Apps
Use AI Applications created using AI App Builder in chat with the applicationId parameter.

Add Glean Chat and search as separate pages

Use-case:

  • Surface Search and Chat as separate routes on the site, for example: https://example.net/search and https://example.net/chat.

How it works:

  • A search page embeds the Glean Search component.
  • A /chat page embeds the Glean Chat component.
  • When a new chat is initiated, the user is redirected to the /chat page.
View a demo of the recipe here.

Add Glean Chat and search on the same page

Use-case:

  • Surface Search and Chat both on the same route on the site, for example: https://example.net/search and externally control which view is shown to the user

How it works:

  • A search page embeds both Glean Search and Glean Chat components.
  • A mode: 'search' | 'chat' attribute is persisted in query params to switch back-and-forth between Chat and Search.
View a demo of the recipe here.