Recommendations

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.

Recommendations Component Demo

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).

info

The Glean web app domain differs from your company's Glean backend domain (which typically follows the format your-company-be.glean.com).

HTML

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

Component Setup

The Recommendations component requires three key implementation elements:

A container element with specific styling requirements
Basic HTML structure
JavaScript initialization code

Here's a complete implementation example:

HTML Structure
Component Styling
Implementation

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

#recommendations {
  display: block;
  position: relative;
  width: 600px;
}

addEventListener('DOMContentLoaded', () => {
  const recommendationsContainer = document.getElementById('recommendations');
  GleanWebSDK.renderRecommendations(recommendationsContainer, {
    height: 700,
    customizations: {
      border: '1px solid grey',
      borderRadius: 4,
      boxShadow: '2px 2px grey',
      horizontalMargin: 3,
      verticalMargin: 3,
      searchBox: {
        placeholderText: 'Search for anything...',
        searchIconUrl: 'https://picsum.photos/18',
      },
    },
  });
});

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:

note

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

Implementation Guide​

Adding the JavaScript Client​

Component Setup​

Customization Options​

Dimension Controls​

Visual Customization​