The Recommendations component provides intelligent, context-aware content suggestions while incorporating search capabilities. This component analyzes the current page content to surface relevant recommendations and enables users to perform manual searches when needed.

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>

Component Setup

The Recommendations component requires three key implementation elements:

  1. A container element with specific styling requirements
  2. Basic HTML structure
  3. JavaScript initialization code

Here’s a complete implementation example:

<h2>Glean Recommendations Component</h2>
<div id="recommendations"></div>

Customization Options

The Recommendations component offers extensive customization capabilities through the RecommendationsOptions interface.

Dimension Controls

The component’s dimensions can be customized in the following ways:

Height Customization

  • Default height: 650px
  • Override using the height option
  • Values are specified in pixels

Width Configuration

  • Set through the container element’s CSS
  • Recommended maximum width: 800px
  • Width adjusts automatically to container size

Visual Customization

The component’s appearance can be refined using RecommendationsBoxCustomizations:

When implementing visual customizations:

  • Box-shadow visibility requires appropriate verticalMargin and horizontalMargin settings
  • Margin values must be positive and are applied to both sides of the component

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