> For the complete documentation index, see [llms.txt](https://docs.ownchat.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ownchat.app/webchat/webchat-overview.md).

# Webchat Overview

### Overview  

Webchat lets you embed a customizable chat widget on your website, allowing visitors to interact with your OwnChat assistant directly from any web page. This document covers setup, customization, configuration, and installation of the Webchat widget.

{% embed url="<https://app.supademo.com/demo/cmrlphmj127a8qmvwy6a7tjqo?utm_source=link>" %}

### Accessing Webchat Settings &#x20;

1. Click the **Settings** button.

{% embed url="<https://app.supademo.com/demo/cms6zz4jb006l090jqzweprtc?utm_source=link>" %}

2. Click **Channel**.

{% embed url="<https://app.supademo.com/demo/cms701c8u006n090jrbeh0ncr?utm_source=link>" %}

3. Click **Webchat** to open your web chat channel settings.

{% embed url="<https://app.supademo.com/demo/cms7029ky00hc0o0i8h8pkxk4?utm_source=link>" %}

4. Click **Overview** to access the main dashboard and configuration summary.

{% embed url="<https://app.supademo.com/demo/cms703ekm006r090jc3epuuzt?utm_source=link>" %}

### Visitor Analytics &#x20;

The Overview section includes geolocation data for your website visitors.

* **Countries Distribution** — View visitor data broken down by country.<br>

{% embed url="<https://app.supademo.com/demo/cms704y4y006t090jh46o807l?utm_source=link>" %}

* **States Distribution** — Explore visitor data by state.<br>

{% embed url="<https://app.supademo.com/demo/cms706jzo00hi0o0it3u8f33g?utm_source=link>" %}

* **Cities Distribution** — View detailed visitor analytics by city.<br>

{% embed url="<https://app.supademo.com/demo/cms707p2b0077090j24yjjkvv?utm_source=link>" %}

### Step 1: Identity &#x20;

1. Enter a custom internal widget name to identify your chatbot uniquely within Ownchat.

{% embed url="<https://app.supademo.com/demo/cms70fptf007u090j7czzvas1?utm_source=link>" %}

2. Enter your bot name in the **Public Bot Name** field. This is the name visitors will see.<br>

{% embed url="<https://app.supademo.com/demo/cms70gtic00cu0e0k03n2872q?utm_source=link>" %}

### Step 2: Branding &#x20;

#### Logo &#x20;

1. Click the **Branding** section to expand it.

{% embed url="<https://app.supademo.com/demo/cms71dv6800f30e0ktgc70jmg?utm_source=link>" %}

2. Click the logo upload area to add your custom brand logo.

{% embed url="<https://app.supademo.com/demo/cms71frzz00e4090j8wom1o6f?utm_source=link>" %}

3. Changes made in this section are automatically reflected in the live preview panel.

{% embed url="<https://app.supademo.com/demo/cms71h80700ei090jqymkxz5j?utm_source=link>" %}

#### Background and Colors &#x20;

1. Expand the Background & Colors section.<br>

{% embed url="<https://app.supademo.com/demo/cms71qxnv003nzs0kiooj8m2e?utm_source=link>" %}

2. Click the color field to set your primary brand color.

{% embed url="<https://app.supademo.com/demo/cms71rs5c00ey090jxgea9n9m?utm_source=link>" %}

3. Click the color picker to select your preferred brand color.

{% embed url="<https://app.supademo.com/demo/cms740bfb00os0o0i81gi6l2o?utm_source=link>" %}

4. Click the end color picker to set the gradient ending color.

{% embed url="<https://app.supademo.com/demo/cms7429mj00l3090j4he79rah?utm_source=link>" %}

5. Click the Text Color field to customize the text color within the chat gradient.

{% embed url="<https://app.supademo.com/demo/cms743h4k00p10o0i90uwxtxd?utm_source=link>" %}

#### Screen Alignment &#x20;

1. Click Screen Alignment to choose where the widget appears on the page.<br>

{% embed url="<https://app.supademo.com/demo/cms746amv00p90o0i8hsdqg1g?utm_source=link>" %}

2. Select Left to position the widget on the left side of the screen.

{% embed url="<https://app.supademo.com/demo/cms747dak00xy0e0k71tcc3gv?utm_source=link>" %}

3. Select Right to position the widget on the right side of the screen.

{% embed url="<https://app.supademo.com/demo/cms748ekg00pd0o0ilgkaprac?utm_source=link>" %}

4. Enter the desired horizontal spacing value in the input field to adjust the widget's position.

{% embed url="<https://app.supademo.com/demo/cms749nn200pz0o0ibcrwcj20?utm_source=link>" %}

#### Theme Presets &#x20;

1. Click **Theme Presets** to choose from predefined color schemes.

{% embed url="<https://app.supademo.com/demo/cms75i6y300pi090jq3z6fk6u?utm_source=link>" %}

2. Select a preset (for example, **Ocean Breeze**) to apply it to your chat widget.

{% embed url="<https://app.supademo.com/demo/cms75y83u012c0e0kwnwken2g?utm_source=link>" %}

3. To change the preset later, click the dropdown and select a different theme.<br>

{% embed url="<https://app.supademo.com/demo/cms75zd6f00yr090jz1n3q4yw?utm_source=link>" %}

### Step 3: Launcher Settings &#x20;

Launcher Settings control the appearance and behavior of the chat button visitors see on your website.

1. Click **Launcher Settings** to expand the section.<br>

{% embed url="<https://app.supademo.com/demo/cms760sd6008wzs0iq6zxz3b6?utm_source=link>" %}

2. Choose a launcher type:

* **Pill Launcher** — Displays a pill-shaped launcher with text instead of the default bubble icon.<br>

{% embed url="<https://app.supademo.com/demo/cms762euy014j0e0k0794wqgx?utm_source=link>" %}

* **Robot** — Displays a robot icon as the launcher.<br>

{% embed url="<https://app.supademo.com/demo/cms763zxo00zi0o0i13dffj3n?utm_source=link>" %}

3. Enter your launcher button text in the **Text** field (for example, "Ask Ownchat").

{% embed url="<https://app.supademo.com/demo/cms768urp01010o0ikdsgqbgd?utm_source=link>" %}

4. Select your preferred launcher size from the dropdown menu.

{% embed url="<https://app.supademo.com/demo/cms76h4z0010u0o0i9bihfz5n?utm_source=link>" %}

5. Click **Launcher Icon** to customize the bubble icon using your brand logo or chat icon.

{% embed url="<https://app.supademo.com/demo/cms76p142014j090jhe2doq9j?utm_source=link>" %}

### Step 4: Content &#x20;

Click **Next** to proceed to the Content configuration step.<br>

{% embed url="<https://app.supademo.com/demo/cms76xuyk01640e0kjdg45rdv?utm_source=link>" %}

#### Header Content &#x20;

1. Expand the **Header Content** section.

{% embed url="<https://app.supademo.com/demo/cms778i42015e090jg8de6jjd?utm_source=link>" %}

2. Enter your main header title in the text field.<br>

{% embed url="<https://app.supademo.com/demo/cms77ayvl000p2z0jucs0bkur?utm_source=link>" %}

3. Enter a subtitle describing how quickly the assistant typically responds.<br>

{% embed url="<https://app.supademo.com/demo/cms77c26p015n090jdzrwfld1?utm_source=link>" %}

#### Quick Actions &#x20;

Quick Actions display preset buttons that visitors can tap to start a conversation.

1. Click the **Quick Actions** section to expand it.<br>

{% embed url="<https://app.supademo.com/demo/cms77db29000r2z0jdqssy4sg?utm_source=link>" %}

2. Click **Add Action Button** to create a quick action option.<br>

{% embed url="<https://app.supademo.com/demo/cms77ecva01440o0i1xye6cgo?utm_source=link>" %}

3. Click the dropdown menu and choose the icon that best matches your button text.

{% embed url="<https://app.supademo.com/demo/cms77fq05016j0e0kz9273gh7?utm_source=link>" %}

4. Click the message icon to add quick question options.
5. Enter your custom button text for each action button.

{% embed url="<https://app.supademo.com/demo/cms77hhok00222z0jvfilzyle?utm_source=link>" %}

#### Welcome Message &#x20;

1. Expand the **Welcome Message** section.<br>

{% embed url="<https://app.supademo.com/demo/cms77k3qi0001zv0jo332f083?utm_source=link>" %}

2. Enter your greeting message in the text field.<br>

{% embed url="<https://app.supademo.com/demo/cms77lf37002d2z0jzu80p5um?utm_source=link>" %}

3. Click **Next** to proceed to the next configuration step.<br>

{% embed url="<https://app.supademo.com/demo/cms77mdc0004nzi0kpiv2tguw?utm_source=link>" %}

### Step 5: Widget Logic &#x20;

Widget Logic controls how the chat widget behaves after a visitor lands on your website.

1. Expand **Widget Logic.**
2. Select the greeting format:

* **Text Message** — Display a text greeting.<br>

{% embed url="<https://app.supademo.com/demo/cms77nwnu0173090j5ycpr0s9?utm_source=link>" %}

* **Video** — Display a video message as the greeting.

3. Set the **auto-open delay** in seconds. After a visitor lands on your page, the chat window opens automatically after the selected delay. A delay of 5–10 seconds is recommended.<br>

{% embed url="<https://app.supademo.com/demo/cms77qu280177090j1huvtjpa?utm_source=link>" %}

4. Toggle **Display Active Team Members** to show team member presence status to visitors.<br>

{% embed url="<https://app.supademo.com/demo/cms77s16p01740e0kl7aazukt?utm_source=link>" %}

5. Toggle **Sound & Notifications** to enable browser alerts for new messages.<br>

{% embed url="<https://app.supademo.com/demo/cms78alfn018r090jztxc0zkk?utm_source=link>" %}

5. Enter the desired time limit in the **Active Presence Timer** field.<br>

{% embed url="<https://app.supademo.com/demo/cms78bws601820e0k7rc3c07q?utm_source=link>" %}

***

### Step 6: Ask for Visitor Details &#x20;

This section lets you collect visitor information before the chat begins.

1. Expand the **Ask for Visitor Details** section.

{% embed url="<https://app.supademo.com/demo/cms79ndri0001yb0jhkjcy9lb?utm_source=link>" %}

2. Enable **Request Visitor Info** to ask visitors for their details before starting the chat.

{% embed url="<https://app.supademo.com/demo/cms79plls000gyb0jnrhycsir?utm_source=link>" %}

3. Select the information you want to collect:

* Name
* Phone Number
* Email Address

{% embed url="<https://app.supademo.com/demo/cms79qz2201sr0e0kgvyayxak?utm_source=link>" %}

4. From the dropdown, select the action you want to perform for each selected field.

{% embed url="<https://app.supademo.com/demo/cms79ufap01mh090jazl57mqh?utm_source=link>" %}

4. Enable **Remember Returning Visitors** to recognize visitors who return to your site.

{% embed url="<https://app.supademo.com/demo/cms79tbwn01mf090j5ho39e2n?utm_source=link>" %}

4. Use the **Email** field as a unique identifier to identify each visitor individually.

{% embed url="<https://app.supademo.com/demo/cms79vgqx01pv0o0ilmbs6z4a?utm_source=link>" %}

***

### Step 7: Security &#x20;

1. In the **Security** section, paste the URL of the website where you want to display the Webchat widget. This ensures the widget appears only on the specified website.

{% embed url="<https://app.supademo.com/demo/cms79xkuu01ms090jk880k3mc?utm_source=link>" %}

***

### Saving Settings &#x20;

1. After completing all **settings**, click Update to save your changes.

{% embed url="<https://app.supademo.com/demo/cms79yi580001zs0jux2yupgs?utm_source=link>" %}

***

### Exporting and Installing the Widget Script&#x20;

1. Click **Export Script.**

{% embed url="<https://app.supademo.com/demo/cms79zfqn01q80o0i7y11kel0?utm_source=link>" %}

2. Click the **JavaScript** dropdown and select your preferred programming language.
3. If you select **Python**, the code snippet is automatically converted to the Python version.

{% embed url="<https://app.supademo.com/demo/cms7a0jn601tf0e0k27w8roht?utm_source=link>" %}

4. Copy the generated script.

{% embed url="<https://app.supademo.com/demo/cms7a1ocj0005zs0jn8vzl7mh?utm_source=lin>" %}

5. Paste the script into your website before the closing \</body> tag to integrate the Webchat widget.

### Previewing the Webchat Widget&#x20;

1. On our website's WebChat, every button can trigger a chatbot flow. This allows you to guide visitors through personalized conversations based on the button they click.

{% embed url="<https://app.supademo.com/demo/cms7a310d0009zs0j3ygdyf3b?utm_source=link>" %}

### Summary &#x20;

| Step                    | What You Configure                                                  |
| ----------------------- | ------------------------------------------------------------------- |
| Identity                | Internal widget name and public bot name                            |
| Branding                | Logo, colors, gradient, text color, screen alignment, theme presets |
| Launcher Settings       | Launcher type, icon, button text, and size                          |
| Content                 | Header title, subtitle, quick actions, and welcome message          |
| Widget Logic            | Greeting format, auto-open delay, team presence, and notifications  |
| Ask for Visitor Details | Visitor info collection and returning visitor recognition           |
| Security                | Restrict widget display to a specific website URL                   |
| Export & Install        | Export the script and paste it into your website                    |