# Widget: Embed your Text Agent on a Website

Currently, you can deploy your text agent on WhatsApp Business and on a web page through a widget.

### Your Text Agent on a Website

<figure><img src="/files/OK4pNwaKTXcCGpJV9xpD" alt="" width="563"><figcaption></figcaption></figure>

Within your agent, click on Channels and choose Dapta Widget.

<figure><img src="/files/BfjTx3hvCqdfKUtO5RNU" alt="" width="375"><figcaption></figcaption></figure>

Now, we’ll go step-by-step to configure the widget that you can embed on any website.

<figure><img src="/files/Kop6XDwdT2s0QugIPZmr" alt="" width="563"><figcaption></figcaption></figure>

* **Agent ID:**\
  This code is provided by default. It is the unique identifier for your text agent.
* **Embedded:**\
  The line of code you must copy and paste into the HTML code of the website where you want to embed your text agent.
* **Additional Instructions:**

<figure><img src="/files/1upGczuhtane6Mc0hJuf" alt="" width="375"><figcaption></figcaption></figure>

\
These instructions are optional and allow your agent to read parameters to better understand additional conversation context. These instructions will be added to every message a customer sends so your agent can use them for extra context.\
\
If you configure conversation parameters using the `setConversationParams(object)` function on the client side, you can use them here.

<figure><img src="/files/J4OiNZBd6HitmyQwkK5q" alt="" width="563"><figcaption></figcaption></figure>

Add this script to your code so you can use conversation parameters as variables here. By default, you have these parameters:

* user\_id: User ID
* user\_name: User Name
* user\_email: User Email

#### Voice Agent

Dapta provides this great alternative: within your text agent, you have a tab so that if your customer prefers, you can initiate a call:

<figure><img src="/files/L8X9nDL57P642ano5RpX" alt="" width="375"><figcaption></figcaption></figure>

* In this Voice Agent section, you can select the AI agent's voice that will perform the call.

<figure><img src="/files/L3jcas63usP1arXaVYgb" alt="" width="563"><figcaption></figcaption></figure>

The agent you select will be the one who calls the users who register their contact information in this section (Phone Number, Contact Name and Contact Email)

#### Welcome Message

Here, you can edit a brief description of how the text agent should start the conversation with your users.

<figure><img src="/files/PyY9MdWlbrT9lcGEk334" alt="" width="563"><figcaption></figcaption></figure>

#### Default Questions:

In this section, you can add actionable questions that appear as clickable options for the user. These are very helpful for starting a conversation with your agent.

<figure><img src="/files/Zg3lon06Ydl8mh2Q9X2D" alt="" width="563"><figcaption></figcaption></figure>

You can do this in two ways:<br>

* **Add an Example Question Manually**

<figure><img src="/files/8hwE6gopsbwYbzJ5scCH" alt="" width="563"><figcaption></figcaption></figure>

* Click "+ Add Example" and type the question you'd like your agent to appear. You can add as many questions as you want, but always keep the user experience in mind.
* Click "Save Changes," and when you return to the Widget, you'll see the questions now appear in your agent.

<figure><img src="/files/KWsiL4EEzSwfe0y7clCN" alt="" width="375"><figcaption></figcaption></figure>

* **Generate Questions with AI**

<figure><img src="/files/TwU3dRWE7km9q0g2uB7b" alt="" width="563"><figcaption></figcaption></figure>

* Click the "Generate with AI" option, and our AI will generate suggested questions based on the context and instructions to help your users start interacting with your agent.
* Click "Save Changes," and when you return to the Widget, you'll see the questions now appear in your agent.

<figure><img src="/files/uobz2UqtcbplrbZvK3sw" alt="" width="375"><figcaption></figcaption></figure>

#### Widget Style

In this section, you can edit the widget's style. The basic method involves choosing a custom primary color and light or dark background colors.

<figure><img src="/files/LNkyp6Bz72Bh35zoKIO3" alt="" width="375"><figcaption></figcaption></figure>

**Advanced Style**

The advanced method uses the stylesheet by writing the CSS script.

<figure><img src="/files/RqIiur2np5BYgEh65PD4" alt="" width="375"><figcaption></figcaption></figure>

**Auto Open**

The "Auto Open" option lets you choose whether it opens automatically on specific pages by default. Separate the pages where you want your widget to appear with the "/" symbol.

If left blank, it will open automatically on all pages upon refresh.

<figure><img src="/files/FxKYaip8GEimD48E5Exl" alt="" width="563"><figcaption></figcaption></figure>


---

# 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.dapta.ai/ai-text-agents/channels/widget-embed-your-text-agent-on-a-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.