Modal Search

Display search in a modal dialog over an existing page with only one line of code.

nsr1 nsr2


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

For the modal search approach, attach the GleanWebSDK library to a search box on your page.

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

Recipe

This codepen demonstrates how to attach a Glean search modal.

Customizations

Themes

Theme options are supported via SearchBoxCustomizations. Additional theme 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.