Skip to main content

Glean Chat

Glean Chat delivers personalized answers by integrating deep understanding of your company's content, employees, activities, and their interconnections. The system automatically tailors responses to each individual user's context and needs.

Glean Chat Preview

Implementation Guide​

Adding the JavaScript Client​

First, include the JavaScript library in the <head> section of your page. Replace GLEAN_APP_DOMAIN with your company's Glean web app domain (typically app.glean.com or your-company.glean.com if you use a custom subdomain).

info

The Glean web app domain differs from your company's Glean backend domain (which typically follows the format your-company-be.glean.com).

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

Configuration and Setup​

  1. Create a container element with the following required CSS properties:

    • position: relative
    • display: block
    • Defined width and height

  2. Render Glean Chat into your container:

window.EmbeddedSearch.renderChat(containerElement);

For detailed configuration options and customizations, refer to our renderChat API documentation.

Authentication​

note

Authentication involves two default steps that users must complete upon first usage. However, both steps can be optimized for a smoother user experience.

Default Authentication Flow​

  1. Email Address Entry
  2. SSO Authentication

Optimizing Authentication​

You can streamline the authentication process in two ways:

  1. Skip Email Entry: Implement the backend parameter to bypass the email entry step.

  2. Skip SSO Authentication: Configure a server-to-server handshake and provide the user's auth token via Options.authToken.

warning

When implementing auth token authentication:

  • You must configure an onAuthTokenRequired callback
  • This callback handles token refresh when expiration approaches
  • Server-to-server authentication becomes mandatory if third-party cookies are blocked in the user's browser

Implementation Recipes​

info

AI Applications created using AI App Builder can be integrated into chat using the applicationId parameter.

Basic Implementation (Vanilla JavaScript)​

This implementation creates dedicated routes for Search and Chat functionality:

  • Search page: https://example.net/search
  • Chat page: https://example.net/chat

Implementation Details

The implementation consists of separate components: - A Search page with the Glean Search component - A Chat page with the Glean Chat component - Automatic redirection to the Chat page when initiating new conversations

View a complete demo of this implementation in our CodeSandbox example.

Unified Page Implementation​

This approach combines Search and Chat functionality on a single route:

  • Single unified route: https://example.net/search
  • Toggle between views using a mode query parameter (search or chat)
  • Maintains both interfaces in one location for seamless user experience

View a complete demo of this implementation in our CodeSandbox example.