# Web Widget

### Channel Integration

{% embed url="<https://drive.google.com/file/d/1XqNsn4Lutalq5aWkcdnGNOztbx6bt7-u/view?usp=sharing>" %}

### How to create a Web Widget?

**Step 1:** From left sidebar, click **Channels**, From Web Widget channel click the Add New button to create a new Web Widget

<figure><img src="https://3400071099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FypCKq44Psaly6khgrY7x%2Fuploads%2FGR11O18cPVbAblmHKZFB%2Fimage.png?alt=media&#x26;token=b2ea25fa-5150-47a2-bfbf-286e4d7992c0" alt=""><figcaption></figcaption></figure>

**Step 2:** Input your Web Widget name and click CREATE.

* This Web Widget name represents the internal label for your Web Widget.

<figure><img src="https://3400071099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FypCKq44Psaly6khgrY7x%2Fuploads%2FoFzPjDxFD8j6G8x09wWR%2Fimage.png?alt=media&#x26;token=bb4b389c-73ba-460e-afa2-5e43d12cac40" alt=""><figcaption></figcaption></figure>

**Step 3:** A “**Setup Needed**” label will appear next to the Web Widget name, click on the edit icon to complete the Web Widget setup.

<figure><img src="https://3400071099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FypCKq44Psaly6khgrY7x%2Fuploads%2F0kV5ySQVHyHa4gmykIrq%2Fimage.png?alt=media&#x26;token=0c53e14c-9921-4fa1-99c1-71b6d69a0f4d" alt=""><figcaption></figcaption></figure>

**Step 4:** After the Web Widget Customization menu popped out, input your Widget window name, Widget chatbot name and a Welcome Message.

* **Widget window name** – This will display as the Web Widget's title.
* **Widget chatbot name** – Name for the chatbot interacting with users.
* **Welcome message** – The initial greeting users will see upon opening the Web Widget.
* Optionally, upload a Widget window logo and a profile image for the chatbot.

<figure><img src="https://3400071099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FypCKq44Psaly6khgrY7x%2Fuploads%2FwdTFhWzuJ4juBW4OwtZd%2Fimage.png?alt=media&#x26;token=a9c49aaf-3f60-479a-b9a7-869635b1ba46" alt=""><figcaption></figcaption></figure>

**Step 5:** In the next section which is Offline Email, input your Email subject title, Email sender’s name, Sender’s email address and CTA button URL link.&#x20;

* **Offline Email** – This email message will be sent to customers using the provided email address when customers are offline.
* **Email subject title** – Main title for the email message.
* **Email sender’s name** – The displayed name of the email sender.
* **Sender’s email address** – Email address of the sender.
* **CTA button URL link** – Redirect link for the Call-to-Action (CTA) button in the email.

<figure><img src="https://3400071099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FypCKq44Psaly6khgrY7x%2Fuploads%2FKa0NECWdMI1oFzqIY7XD%2Fimage.png?alt=media&#x26;token=b8486947-2cf9-4e64-9a51-08e8a751296a" alt=""><figcaption></figcaption></figure>

* Optionally, you can select the option to display your own Legal disclaimer and a Powered by iMBrace text.

<figure><img src="https://3400071099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FypCKq44Psaly6khgrY7x%2Fuploads%2F0pVuR8vrvDR90WJmWS0L%2Fimage.png?alt=media&#x26;token=c1bb5cf3-396e-4356-94b2-5033eb331b05" alt=""><figcaption></figcaption></figure>

**Step 6:** Click on **DONE** and then click on **SAVE AND ACTIVATE** to activate the Web Widget.

<figure><img src="https://3400071099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FypCKq44Psaly6khgrY7x%2Fuploads%2FIQJS6iJsYm57slxGg0hG%2Fimage.png?alt=media&#x26;token=4cd59f96-7412-4a75-bac7-868b5ec48fe1" alt=""><figcaption></figcaption></figure>

* Copy and Paste the Installation Code on your website code to make the Web Widget appear on your website.

<figure><img src="https://3400071099-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FypCKq44Psaly6khgrY7x%2Fuploads%2FlxBPFiF5LlZFQJOMnQxF%2Fimage.png?alt=media&#x26;token=50ce99d3-7c80-40fd-b65b-adf475574745" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://imbrace.gitbook.io/imbrace-documentation/channels/web-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.