> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lovi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget WebView Integration

> Embeddable web wrapper for injecting the Lovi chat widget

## Introduction

The Widget WebView endpoint is an interactive HTML wrapper that allows you to embed the Lovi chat widget securely within web pages or mobile applications. Instead of returning a standard JSON response, this endpoint serves a complete HTML document containing an `iframe` pointing to the chat interface.

This wrapper acts as a secure bridge, fetching the necessary integration metadata (such as the agent's welcome message and language settings) on the server side and securely injecting it into the web view using standard `postMessage` communication.

***

## 🌐 Get Widget WebView

> **Method**: GET **Format**: HTML

### Endpoint

```
GET https://cloud.lovi.ai/functions/v1/widgetWebView
```

*Alternative Path format:* `GET https://cloud.lovi.ai/functions/v1/widgetWebView/{customer_id}/{widget_id}`

### Query Parameters

If you are not using the path structure mentioned above, you must pass the required parameters in the query string.

| Parameter     | Required | Description                                                                                        |
| ------------- | -------- | -------------------------------------------------------------------------------------------------- |
| `customer_id` | Yes      | Your company's Access Key used to validate permissions.                                            |
| `widget_id`   | Yes      | The specific `uuid` of the channel account/widget you wish to load.                                |
| `lang`        | No       | Target language code (e.g., `es`, `en`, `pt`). If provided, welcome messages are translated.       |
| `showClose`   | No       | Boolean as string (`true` or `false`). Defaults to `true`. Determines if the widget can be closed. |

### How It Works

1. **Authentication**: The server validates the `customer_id` (Access Key) and verifies ownership of the `widget_id`.
2. **Metadata Fetching**: It retrieves the widget configuration and optionally queries the Lovi translation backend to translate the agent's welcome message into the requested `lang`.
3. **HTML Delivery**: The server returns an HTML page containing an `<iframe src="https://widget.lovi.ai/?cw_id=...">`.
4. **PostMessage Bridge**: The loaded HTML contains JavaScript that listens for `get_widget` and `get_customer` events triggered by the iframe. It securely responds with the widget's configuration (`widgetData`) and handles local storage (such as generating a unique user ID).

### Common Errors

If the widget fails to load, you might receive one of the following HTTP status codes instead of the HTML payload:

* **400 Bad Request**: Missing `customer_id` or `widget_id`, or the `widget_id` is not a valid UUID.
* **403 Forbidden**: Invalid `customer_id` (Access Key validation failed).
* **404 Not Found**: The company or the specified widget could not be found.
* **500 Internal Server Error**: An unexpected error occurred while generating the wrapper.

> 🧭 **Important**: If the widget appears stuck on a "Loading Widget..." screen, check your browser's console. Ensure that your environment allows cross-origin iframes and does not block `postMessage` communication between the WebView and `widget.lovi.ai`.

This endpoint embeds **text chat**. For a spoken call in the browser, see the [voice widget](/en/user-guide/Setting/ug_voicewidget_en).