Glean’s Modal Search provides a seamless search experience by overlaying a search interface on your existing page. This solution requires minimal implementation effort - just a single line of code to get started.

​
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

To implement Modal Search, use the attach method to connect the Glean SDK to a search input element on your page:

<script>
  addEventListener('DOMContentLoaded', () => {
    GleanWebSDK.attach(document.getElementById('search-box'))
  })
</script>

​
Customization Options

​
Component API

The Modal Search implementation can be customized using the GleanWebSDK.attach API. This interface provides options for tailoring the search experience to your specific needs.

​
Theming

You can customize the appearance of the Modal Search using SearchBoxCustomizations. The theming system is regularly expanded with additional options based on customer 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

Explore a complete working implementation of the Modal Search component in our interactive demo:

Was this page helpful?

Suggest editsRaise issue