> For the complete documentation index, see [llms.txt](https://gdplabs.gitbook.io/glchat/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gdplabs.gitbook.io/glchat/developer-documentation/glchat-widget-setup.md). # GLChat Widget Setup *** To set up the widget, configuration is required both on the [**GLChat side**](#glchat-side-configuration) and on the [**Client side**](#client-side-configuration-client-website) 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 Popup Enable login using a popup window: ``` NEXT_PUBLIC_FEATURE_LOGIN_POPUP_WINDOW=true ``` #### Cross-Site Cookie Policy If the widget hostname is different from the client website hostname, configure cookies properly: ``` FRONTEND_COOKIE_SAMESITE_POLICY=none ``` #### Allowed Origin If `FRONTEND_COOKIE_SAMESITE_POLICY` set to `none`, `FRONTEND_ALLOWED_ORIGINS` must be configured to allow request coming from trusted domains. If not properly configured, the request will be blocked. ``` FRONTEND_ALLOWED_ORIGINS="https://widget-url.com" ``` **Note**: Replace `https://widget-url.com` with the widget's url. #### 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. #### Widget Guest Mode Configuration (Optional) 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= ``` *** ### 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** ``` ``` **Widget Component** ``` ``` Detailed implementation examples (including full HTML setup) can be found in the [**Widget Implementation Guide**](#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()*. *** ### Widget Implementation Guide To integrate the GLChat widget into any website, follow these simple steps: #### Step 1: Add the Script to `` Include the GLChat widget module inside your HTML `` section: ``` ``` This script loads the GLChat web component library. #### Step 2: Add the Custom Widget Tag to `` Insert the widget element anywhere inside your HTML ``: ``` ``` **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 ``` ``` #### (Optional) Step 3: Customize the Widget Icon Insert your customize widget icon under the gl-chat-widget wrapped with `

` ```

{icon_element}

``` *Example 1: Using SVG Icon* ```

``` *Example 2: Using Image Icon* ```

```