GLChat Widget Setup

This guide explains how to configure and embed the GLChat Widget on a client website, including required environment variables, guest mode setup, and web component integration.

To set up the widget, configuration is required both on the GLChat side and on the Client side that will embed it into their website.

GLChat side Configuration

On the GLChat side, make sure the following environment variables are set:

Allow IFrame Embedding

To allow the widget to be embedded inside an iframe:

FRONTEND_NEXT_HEADERS_X_FRAME_OPTIONS=true

Enable login using a popup window:

NEXT_PUBLIC_FEATURE_LOGIN_POPUP_WINDOW=true

If the widget hostname is different from the client website hostname, configure cookies properly:

FRONTEND_COOKIE_SAMESITE_POLICY=none

Content Security Policy (CSP)

Update CSP to allow embedding from the client’s website url:

FRONTEND_NEXT_HEADERS_CSP="upgrade-insecure-requests; frame-ancestors https://host-website.com"

Note: Replace https://host-website.com with the client’s website url.

If the widget should work without requiring login, enable guest mode:

FRONTEND_ENABLE_GUEST_MODE=true
FRONTEND_ENABLE_LOGIN_GUEST_MODE=true
BACKEND_GUEST_MODE_CHATBOT_IDS=<fill with chatbot id>

Client-Side Configuration (Client Website)

On the client side, additional configuration is required to ensure the widget works correctly.

GLChat Web Components Integration

The website needs to integrate gl-chat-sidebar or gl-chat-widget.

GLChat provides web components that can be embedded directly using the following scripts:

Sidebar Component

<script type="module" src="https://unpkg.com/@glair/web-components/standalone/gl-chat-sidebar.js"></script>

Widget Component

<script type="module" src="https://unpkg.com/@glair/web-components/standalone/gl-chat-widget.js"></script>

Detailed implementation examples (including full HTML setup) can be found in the Widget Implementation Guide section below.

Microphone Permission Policy (Optional)

This is only required if your GLChat widget needs microphone access — for example when your app enables Speech features or Live Conversation.

If the widget is embedded from a different origin, the client site must explicitly .allow the microphone access to the widget’s origin with this header:

Permissions-Policy: microphone=(self "https://your-glchat-widget.com")

Note: Replace https://your-glchat-widget.com with the GLChat’s URL.

Where you set this header depends on your framework/host. In a Next.js app, define it in next.config.mjs under headers().

To integrate the GLChat widget into any website, follow these simple steps:

Step 1: Add the Script to `<head>`

Include the GLChat widget module inside your HTML <head> section:

<script
  type="module"
  src="https://unpkg.com/@glair/web-components/standalone/gl-chat-widget.js">
</script>

This script loads the GLChat web component library.

Insert the widget element anywhere inside your HTML <body>:

<gl-chat-widget
  url="https://your-glchat-url.com"
  position="left">
</gl-chat-widget>

Note: Replace https://your-glchat-url.com with the GLChat’s URL. You also can replace the position to left or right.

Example Full HTML Integration

<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      type="module"
      src="https://unpkg.com/@glair/web-components/standalone/gl-chat-widget.js">
    </script>
  </head>

  <body>
    <gl-chat-widget
      url="https://your-glchat-url.com"
      position="left">
    </gl-chat-widget>
  </body>
</html>

PreviousLMRP Catalog Entries NextKnowledge Base

Last updated 6 days ago

GLChat Widget Setup

GLChat side Configuration

Allow IFrame Embedding

Content Security Policy (CSP)

Widget Guest Mode Configuration (Optional)

Client-Side Configuration (Client Website)

GLChat Web Components Integration

Microphone Permission Policy (Optional)

Widget Implementation Guide

Step 1: Add the Script to `<head>`

Step 2: Add the Custom Widget Tag to `<body>`

Example Full HTML Integration

hashtagGLChat side Configuration

hashtagAllow IFrame Embedding

hashtagEnable Login Popup

hashtagCross-Site Cookie Policy

hashtagContent Security Policy (CSP)

hashtagWidget Guest Mode Configuration (Optional)

hashtagClient-Side Configuration (Client Website)

hashtagGLChat Web Components Integration

hashtagMicrophone Permission Policy (Optional)

hashtagWidget Implementation Guide

hashtagStep 1: Add the Script to <head>

hashtagStep 2: Add the Custom Widget Tag to <body>

hashtagExample Full HTML Integration

GLChat side Configuration

Allow IFrame Embedding

Enable Login Popup

Cross-Site Cookie Policy

Content Security Policy (CSP)

Widget Guest Mode Configuration (Optional)

Client-Side Configuration (Client Website)

GLChat Web Components Integration

Microphone Permission Policy (Optional)

Widget Implementation Guide

Step 1: Add the Script to `<head>`

Step 2: Add the Custom Widget Tag to `<body>`

Example Full HTML Integration