# 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="/files/erJQAevro3wfp3aRKqBJ" 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="/files/0Z80mEJ7gnHCV8301zmI" 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="/files/XWfBWjn7woEM5rCPCLsl" 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="/files/jtq28cl9AadEiMeyXorc" 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="/files/8kn3RtkXJG8GFyhdYE6s" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/imFzZJyRzTXFnlD6NgRu" 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="/files/4c9dBot5rfJyyYNoDlHD" alt=""><figcaption></figcaption></figure>

### **Generate Widget Code**

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

<figure><img src="/files/KmEnIjvkmScuAq87ztYK" 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="/files/r5YPwZtgNZXpkgtsBluu" 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 %}


---

# 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://docs.gallabox.com/whatsapp-channel/widget-for-your-website.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.