# Widget for your website

**WhatsApp Live Chat Widget** is a powerful tool that allows businesses to provide real-time support and engagement to website visitors. Here's how to generate the widget code and integrate it into your website:

<figure><img src="broken-reference" alt=""><figcaption></figcaption></figure>

#### Prefer watching over reading? <a href="#prefer-watching-over-reading" id="prefer-watching-over-reading"></a>

Watch the video below for a detailed explanation.

{% embed url="<https://www.youtube.com/watch?feature=youtu.be&v=6IjQQbDit44>" %}

Prefer reading? Read the steps below:

### **WhatsApp Details**

1. **Name of your business/brand:** Enter your business or brand name, e.g., "Gallabox."
2. **Availability tag:** Set a tag to inform visitors about your response time. For example, "*Usually reply in 4 minutes*."

<figure><img src="https://3137140735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZcl3T6ePz95GpzjAeOLW%2Fuploads%2FnAr7Cq6ZY1pAiWONsn74%2FYour%20Business%20Details.png?alt=media&#x26;token=bfa655ed-ade2-4b8c-8d4d-dc391ae30481" alt=""><figcaption></figcaption></figure>

### **Customize Your Widget**

1. **Widget Style:** You can choose to have either a compact widget or expanded widget.&#x20;

<figure><img src="https://3137140735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZcl3T6ePz95GpzjAeOLW%2Fuploads%2FKTAKo4RWLGy6fpnRmEzM%2FWhatsApp%20Widget%20Style.gif?alt=media&#x26;token=c0776f80-0799-4a35-bd02-50abe337a056" alt=""><figcaption></figcaption></figure>

2. **Widget Position:** Choose the position either Bottom right or Bottom left. Add the Margin Bottom and Right Margin.&#x20;

<figure><img src="https://3137140735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZcl3T6ePz95GpzjAeOLW%2Fuploads%2FSPKzPjWgzEKilOefUB41%2FWhatsApp%20Widget%20Position.gif?alt=media&#x26;token=ceb9c930-787f-4829-9aef-54d8b436c55d" alt=""><figcaption></figcaption></figure>

3. **Choose Avatar or Upload Business Logo:** You can either upload your business logo to personalize the widget.&#x20;

<figure><img src="https://3137140735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZcl3T6ePz95GpzjAeOLW%2Fuploads%2FlNnjHpdA1S1Z6Narz7GD%2FWhatsApp%20Widget%20Logo.gif?alt=media&#x26;token=3f296c92-e33f-4935-8ead-02e8feaa1b58" alt=""><figcaption></figcaption></figure>

4. **Welcome Text**: Craft a warm welcome message for your website visitors. For example, "Welcome to Gallabox!!!"

<figure><img src="https://3137140735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZcl3T6ePz95GpzjAeOLW%2Fuploads%2FCFzq2jdKou8iM702SpUA%2FWhatsApp%20Widget%20Welcome%20Text.gif?alt=media&#x26;token=195f575f-8c1f-437c-b965-9192289249f0" alt=""><figcaption></figcaption></figure>

5. **Questionnaire:** Define a question or message that helps direct visitors to the right department or team. Specify options that visitors can choose from to streamline their inquiries, e.g., "I'd like to chat with sales."

<figure><img src="https://3137140735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZcl3T6ePz95GpzjAeOLW%2Fuploads%2FcgijfNwzzAKCRyE8Z3bt%2FWhatsApp%20Widget%20Questionnaire.gif?alt=media&#x26;token=91355ce4-7943-4f00-a1d3-f8aa5cebc7f4" alt=""><figcaption></figcaption></figure>

### **Generate Widget Code**

After configuring these settings, click on "**Generate Widget Code**".&#x20;

<figure><img src="https://3137140735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZcl3T6ePz95GpzjAeOLW%2Fuploads%2Fl9wogEGZilxOg1I56PtZ%2FWhatsApp%20Widget%20Code%20Generator.gif?alt=media&#x26;token=9939d85c-9036-4e95-89cc-9c2c4c78b81c" alt=""><figcaption></figcaption></figure>

### **Add the Code**

Paste the generated widget code into the HTML source code of the web page where you want the widget to appear. Typically, you can add it just before the closing `</body>` tag. You can also get the generated code on your email id.&#x20;

<figure><img src="https://3137140735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZcl3T6ePz95GpzjAeOLW%2Fuploads%2Fvq4vYkj7GEKrJxWLHn1d%2FGenerated%20Code.gif?alt=media&#x26;token=b18bdc45-8c41-4ff4-83f9-d32588f09fd7" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To integrate the widget into your website, you'll need access to your website's code. Contact your development Team. If you're using a website builder or content management system (CMS) like WordPress, there's often a dedicated area for adding custom code snippets.
{% endhint %}