The Glean Sidebar provides a unified interface that combines search capabilities, chat functionality, and contextual recommendations, all accessible from a slide-out panel on your page.

Implementation Guide

Adding the JavaScript Client

Include the JavaScript library in your page’s <head> section. Replace GLEAN_APP_DOMAIN with your company’s Glean web app domain (typically app.glean.com or your-company.glean.com for custom subdomains).

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>

Basic Setup

Implementing the Sidebar requires a single method call to openSidebar. You can trigger this method in response to user actions, such as clicking a button:

GleanWebSDK.openSidebar()

Customization Options

The Sidebar component can be customized using the GleanWebSDK.openSidebar API. This interface provides options for tailoring the sidebar experience to match your application’s needs.

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 Example

Experience a complete working implementation of the Sidebar component in our interactive demo: