# 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="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-68993cfd38e9614ef90fd0b586878d67dbd9ad04%2Fimage.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-3fa56b038993c4c1f5182ced25d0a5f83930e6ef%2Fimage.png?alt=media" 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="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-a78971e12d9ceb9d4a19fadf8706584e7ec29934%2Fimage.png?alt=media" 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="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-24b541676dbe56a839290b9e45c78d53d19d0332%2Fimage.png?alt=media" 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="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-764f8e49622c2defeb48a4aa9b78b604cf35bd6c%2Fimage.png?alt=media" 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="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-762361482fb50af8063fbe370ae89a00b141e670%2Fimage.png?alt=media" 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="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-d4ef2de890e8565c778aaadb9c7a03e01d0cff9e%2Fimage.png?alt=media" 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="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-1d42bbfe1230b7d241903634b6ef2f1c944cf49a%2FCaptura%20de%20pantalla%202026-02-09%20a%20las%206.48.51%E2%80%AFp.%E2%80%AFm..png?alt=media" 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="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-83041243b074112b0cb9e3a59f890a9944d45072%2Fimage.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

You can do this in two ways:<br>

* **Add an Example Question Manually**

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-7d0535dade6c22e540b3c351d6aad3f1a8e5dd86%2FCaptura%20de%20pantalla%202026-02-09%20a%20las%206.56.46%E2%80%AFp.%E2%80%AFm..png?alt=media" 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="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-e29727f5dedaa077ee404bb696e6bdcf5e7d9d85%2FCaptura%20de%20pantalla%202026-02-09%20a%20las%206.59.16%E2%80%AFp.%E2%80%AFm..png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

* **Generate Questions with AI**

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-5d2197cbd213824cf70ed0525df264ea4ff94809%2FCaptura%20de%20pantalla%202026-02-09%20a%20las%207.01.39%E2%80%AFp.%E2%80%AFm..png?alt=media" 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="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-172cb0943fe15f62fa6c454027163055638f9b3c%2FCaptura%20de%20pantalla%202026-02-09%20a%20las%207.03.41%E2%80%AFp.%E2%80%AFm..png?alt=media" 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="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-7e8766f6728c56cdaf7d88991f8219a12893c249%2Fimage.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

**Advanced Style**

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

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-b491c5de32d481a9540b800e8c1bb7a0fe3c85b7%2Fimage.png?alt=media" 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="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-ddb71f787b622d42370ba489ef43a583011fb315%2Fimage.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>
