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 YOUR_GLEAN_DOMAIN is where your company accesses Glean, such as app.glean.com, company.glean.com, etc.

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

Setup

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

Copy
Copied
  <script>
    addEventListener('DOMContentLoaded', () => {
      EmbeddedSearch.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.