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.

​
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).

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

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.

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

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.

Was this page helpful?

Suggest editsRaise issue