> 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/dashboard/whatsapp-chat-widget-creation.md).

# Whatsapp Chat Widget Creation

### Overview  

The WhatsApp Chat Widget lets you add a customizable WhatsApp chat button to your website. Visitors can click the widget to start a WhatsApp conversation with your business directly from your site.

### Step 1: Open the Widget Creator  

1. Open your Ownchat **Dashboard**.
2. Click the **WhatsApp chat widget** icon.<br>

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

3. Click **Create WhatsApp Chat Widget** to set up your chat integration.<br>

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

You will be redirected to the Ownchat website's **WhatsApp Widget for your Website** page.<br>

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

### Step 2: Add Basic Widget Details &#x20;

1. Enter your WhatsApp phone number in the field to proceed with widget customization.<br>

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

2. Enter the logo URL in the provided field.<br>
3. Enter your brand name in the **Name Of Your Brand** field.<br>

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

3. Enter the subtitle for your WhatsApp widget.<br>

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

### Step 3: Customize Widget Appearance &#x20;

1. Click the **header background color** input field to select your preferred color.<br>

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

2. To change the header text color, select **Light (White)** from the dropdown.

* You can preview the header text color change immediately.<br>

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

3. Enter your desired CTA button color code in the text field.<br>

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

4. Enter your custom CTA button text to personalize the widget's call-to-action.

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

### Step 4: Set the Welcome Message and Options &#x20;

1. Enter your welcome message to customize the widget's initial greeting text.<br>

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

2. Preview the widget chat interface as you make changes.<br>

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

2. Enter the options you want to display. You can add up to **3 options** only.<br>

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

### Step 5: Set Widget Position &#x20;

1. Choose where the chat widget should appear on your website — either the **left side** or **right side** of the screen.<br>

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

### Step 6: Generate the Widget Code &#x20;

1. Click **Generate Widget Code** to create your customized chat widget code.<br>

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

2. The next screen shows the chat widget installation code for your website.

### Step 7: Install or Receive the Widget Code &#x20;

Choose one of the following options:

* **Install directly:** Copy the code and paste it before the closing \</body> tag on your website to display the chat widget.<br>

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

* **Edit the widget:** Click **Click here** to modify the widget settings.<br>

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

* **Receive by email:** Enter your email address, then click **Get Widget Code.** The widget code will be sent to your registered email address.<br>

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

### Summary &#x20;

| **Step** | **Action**                                                                |
| -------- | ------------------------------------------------------------------------- |
| 1        | Dashboard → WhatsApp chat widget icon → Create WhatsApp Chat Widget       |
| 2        | Enter phone number, logo URL, brand name, and subtitle                    |
| 3        | Set header background color, header text color, CTA button color and text |
| 4        | Enter welcome message and up to 3 options                                 |
| 5        | Choose widget position (left or right)                                    |
| 6        | Click Generate Widget Code                                                |
| 7        | Copy and paste the code, edit settings, or email the code to yourself     |