# Create a WhatsApp Widget on Website

***

## Checkout our video on; How to create a WhatsApp Widget for Website? 👇

{% embed url="<https://youtu.be/AWo6e__aGg0>" %}

***

## Create New WhatsApp Widget&#x20;

To create a WhatsApp widget,&#x20;

* Go to settings, navigate to "WhatsApp Widget," and click on it
* The WhatsApp widget panel will open
* To create a new widget, click on the "<mark style="color:green;">**Create New Widget**</mark>" button located at the top right corner

<figure><img src="https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2FUfKPTLKtAd3q38uKDGwf%2Fimage.png?alt=media&#x26;token=e52ed4d9-fe7e-4576-9f93-ff6eba059f1e" alt=""><figcaption></figcaption></figure>

* The setup WhatsApp widget page will appear

<figure><img src="https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2FKTNJCw6mXuIRcRXomgOC%2Fimage.png?alt=media&#x26;token=ca1c5a33-bda7-40f8-b525-dcc00f7c4998" alt=""><figcaption></figcaption></figure>

* This panel allows you to customize your own widget with the following options:

|                                  | Description                                                                                                                                                                                        | Example                                                                                                                                                                                                                                                    |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Widget Name**                  | The name you will save your widget within the system                                                                                                                                               | ![](https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2Fa0uUFAcldspeQq20tBdh%2Fimage.png?alt=media\&token=6787b4a0-96dc-4576-8ef7-38dea2a5498b)                                        |
| **Colours**                      | You can customize the look of the widget. You can adjust the color for the chat button, chat button text, input box, input box text, text color, and background color according to your preference | <img src="https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2FnvBCPBoLLIj5TEzqbi4r%2Fimage.png?alt=media&#x26;token=c6beb6c9-26b2-4b81-8d04-94c7eff49d8d" alt="" data-size="original"> |
| **Business Name**                | <p>Enter the name of your business.</p><p>Business Name is displayed to customers.</p>                                                                                                             | <img src="https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2F4kAOvNDB1cvs9zzvTuNu%2Fimage.png?alt=media&#x26;token=4bfc5eb5-348b-4e93-aebd-4634cd1a8c05" alt="" data-size="original"> |
| **Message Placeholder**          | You can write the message that will serve as a placeholder in the input box, guiding customers on what to enter                                                                                    | <img src="https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2FS5pd7Hwe7Falic4kQbEj%2Fimage.png?alt=media&#x26;token=31a54c61-c6b2-4cde-8f05-c9e0b12dfea4" alt="" data-size="original"> |
| **Chat button title**            | The title that will be displayed on the chat button, indicating its purpose to users                                                                                                               | ![](https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2FJV0aRxV8Nc4FUndaqa1e%2Fimage.png?alt=media\&token=e2ee9d59-3c5a-46df-aa90-3b3b153ee47e)                                        |
| **Default message**              | This is the message that will be pre-filled in the chat window when customers initiate a conversation                                                                                              | <img src="https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2FpICl4MPyZ7gLK9emvyjs%2Fimage.png?alt=media&#x26;token=82d0e6ad-579b-4ea7-803c-008f4e09dc6f" alt="" data-size="original"> |
| **Auto open delay (in seconds)** | This refers to the amount of time the widget waits before automatically opening after the webpage loads, specified in seconds                                                                      | ![](https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2FMUMlb6TF08P10F8jHJmV%2Fimage.png?alt=media\&token=e0410024-83e8-41fe-8f6c-226f8cbb59e8)                                        |
| **Enable tracking code**         | This option allows you to activate tracking functionality within the widget                                                                                                                        | <img src="https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2FBFZYbd1Yo4KeVV0avRTc%2Fimage.png?alt=media&#x26;token=635eac8e-d23d-40f2-8771-c9a8c076448d" alt="" data-size="original"> |
| **Position on page**             | This setting determines where the widget will be displayed on the webpage, allowing you to specify its location for optimal visibility and accessibility                                           | <img src="https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2FEZPCfPmOFk6oYuOgvdTO%2Fimage.png?alt=media&#x26;token=28279fce-1daa-4863-adc2-bc267d91ccf8" alt="" data-size="original"> |
| **Preview**                      | This option allows you to preview how the widget will appear and function on your webpage before saving the changes                                                                                | <img src="https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2FQEOdgdiPorjstGGNmT3z%2Fimage.png?alt=media&#x26;token=f5ba7d92-b80f-4707-9919-208eed649112" alt="" data-size="original"> |

* After entering all the details, click on the "<mark style="color:green;">**Save Widget**</mark>" button to save your widget settings

<figure><img src="https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2FnwLysu377fYRTwPIJtnD%2Fimage.png?alt=media&#x26;token=0f4080bf-68c7-462a-a6a4-455706b1f4d9" alt=""><figcaption></figcaption></figure>

* A widget code will be generated, which you need to copy and implement on your website.&#x20;
* You can share this code with your web developer for implementation.

{% hint style="info" %}
**In the code, you need to enter the company logo URL, which will serve as the link for the logo image**

companyLogoUrl: "<https://imgur.com/a/HGVPNrH>",
{% endhint %}

<div align="left"><figure><img src="https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2FIjtwHk76taymoOhqGi2w%2Fimage.png?alt=media&#x26;token=2cbd93c5-1384-4c78-96ac-13806b064b4b" alt="" width="563"><figcaption></figcaption></figure></div>

* If you have integrated with Shopify, you can add a widget to Shopify by simply clicking on the "**Installed to Shopify**" button <img src="https://2303112206-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F53n17VnOICC1LtDqlENV%2Fuploads%2FLZfRjZiwOQe0LsovP16x%2Fimage.png?alt=media&#x26;token=d265e933-8c69-4fae-bfcf-b88f92b806cd" alt="" data-size="line">
* You can create multiple chat widgets

***