# Widget: Desplegar tu Agente en una página web

### **Widget para Sitios Web**

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2FNwdpWlMURhe3zGdRhu41%2FCaptura%20de%20pantalla%202026-02-06%20a%20las%204.25.45%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=6102d9ce-8850-40fe-bfd4-8296030d5438" alt="" width="563"><figcaption></figcaption></figure>

Dentro de tu agente, hac click en Channels

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2Fw6H5cGBAqV6C5yDupbiL%2FCaptura%20de%20pantalla%202026-02-05%20a%20las%205.48.28%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=44265959-aeb4-4295-910a-fe9ba752de87" alt="" width="375"><figcaption></figcaption></figure>

Y elige Dapta Widget, \
Ahora iremos paso a paso para configurar el widget que podrás incrustar en cualquier página web.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2FhJMT11F669ZV0RWZqouu%2FCaptura%20de%20pantalla%202026-02-05%20a%20las%205.49.39%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=0818dd46-bf66-439c-b2fb-04fe24ecc827" alt="" width="563"><figcaption></figcaption></figure>

* #### **Agent ID:** <br>

  Este código ya viene por defecto. Es el identificador único de tu agente de texto.

* #### **Embedded:**&#x20;

La línea de código que debes copiar y pegar en el código HTML del sitio web donde quieres incrustar tu agente de texto.<br>

* #### **Instrucciones adicionales:**

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2FQaBNmOkFMrHqE6zCMTnx%2FCaptura%20de%20pantalla%202026-02-05%20a%20las%205.50.50%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=58521381-01ff-4dce-9936-2fb7e73445c8" alt="" width="375"><figcaption></figcaption></figure>

Estas instrucciones son opcionales, y sirven para que tu agente pueda leer parámetros para entender mejor contexto adicional de las conversaciones.\
\
Estas instrucciones se añadirán a cada mensaje que envíe un cliente para que tu agente pueda usarlas para comprender un contexto adicional de la conversación. Si configura los parámetros de la conversación mediante la función `setConversationParams(object)`  en el lado del cliente, puede usarlos aquí.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2FgwOi9lSa1lBLYrmleUSw%2FCaptura%20de%20pantalla%202026-02-05%20a%20las%205.51.27%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=df3b21a6-515e-4d56-ba19-9648de9a00cc" alt="" width="563"><figcaption></figcaption></figure>

Agrega este script a tu código para que puedas usar los parámetros de conversación como variables aquí\
Por defecto tienes estos parámetros:

* user\_id: ID del usuario&#x20;
* user\_name: Nombre del usuario
* user\_email: Email del usuario

#### **Voice Agent:**

Dapta te brinda esta gran alternativa,&#x20;

dentro de tu agente de texto, tienes un tab :telephone\_receiver: para que si tu cliente prefiere le puedas hacer una llamada:&#x20;

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2FxlQCkAs0lQz0Zl93Knvv%2FCaptura%20de%20pantalla%202026-02-06%20a%20las%204.42.38%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=5fb645fb-3017-4250-91c7-9deee8f4d437" alt="" width="375"><figcaption></figcaption></figure>

\
En esta sección de Voice Agent puedes seleccionar la voz del agente de inteligencia artificial que realizaría esta llamada.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2FTgEC4elT0X5r92t5aVMR%2FCaptura%20de%20pantalla%202026-02-05%20a%20las%205.52.13%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=495b58ee-4ead-4e94-84f7-9ba8f2e3b950" alt="" width="563"><figcaption></figcaption></figure>

El agente que selecciones será quien llame a los usuarios que registren sus datos de contacto en esta sección (Phone Number, Contact Name and Contact Email)

#### Welcome Message

Aquí puedes editar una breve descripción de como el agente de texto debe iniciar la conversación con tus usuarios.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2FclJNLdJBozzVMBuWZah1%2FCaptura%20de%20pantalla%202026-02-05%20a%20las%205.52.54%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=18e05818-8faf-4715-8541-594ddadd2ed5" alt="" width="563"><figcaption></figcaption></figure>

#### Default Questions:

En esta sección puedes añadir preguntas accionables que aparecen como opciones a hacer click por el usuario, son de mucha ayuda para iniciar la conversación con tu agente.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2FmVEn1kTAvJxTalrtxyRa%2FCaptura%20de%20pantalla%202026-02-05%20a%20las%205.53.37%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=0dc352cf-024e-4891-8a93-7a6cf221a9e2" alt="" width="563"><figcaption></figcaption></figure>

Puedes hacerlo de dos formas:<br>

* **Añadir Pregunta Ejemplo de forma Manual**

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2FYtE52bgDR9mg0OvIlLUK%2FCaptura%20de%20pantalla%202026-02-09%20a%20las%206.56.46%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=a892d54f-6d5e-4e42-b4bd-c34f4c6cecb3" alt="" width="563"><figcaption></figcaption></figure>

* Le das click a "+ Add Example" y escribes la pregunta que te gustaría aparezca en tu agente. Puedes añadir las preguntas que desees, pero ten siempre en cuenta la experiencia del usuario con tu agente.
* Dale click a "Save Changes", y cuando vuelvas a entrar a Widget, verás que las preguntas ahora aparecen en tu agente:

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2FMsQHR7rFSgEy6LbmPE6D%2FCaptura%20de%20pantalla%202026-02-09%20a%20las%206.59.16%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=ecb25b46-e6b9-4673-80ea-594b144798cb" alt="" width="375"><figcaption></figcaption></figure>

* Generar Preguntas con IA

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2FnjjftkI1gH6LrnJQd1Da%2FCaptura%20de%20pantalla%202026-02-09%20a%20las%207.01.39%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=daabaa2d-03c4-4bbd-8469-2612e4755a62" alt="" width="563"><figcaption></figcaption></figure>

* Le das click a la opción "Generate with AI", y nuestra IA generará en base al contexto y a las instrucciones preguntas sugeridas para que tus usuarios inicien la interacción con tu agente.&#x20;
* Dale click a "Save Changes", y cuando vuelvas a entrar a Widget, verás que las preguntas ahora aparecen en tu agente:

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2F3a1umlcj6UHS8RYibMD2%2FCaptura%20de%20pantalla%202026-02-09%20a%20las%207.03.41%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=c2835299-8ce6-49df-ba8f-cb4fd00758ba" alt="" width="375"><figcaption></figcaption></figure>

#### **Estilo del Widget**

En esta sección puedes editar el estilo del widget,\
La formá básica es eligiendo color Primario personalizado, y colores de fondo claro u oscuro

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2FzSYOvRH4wmndFsjhUKpM%2FCaptura%20de%20pantalla%202026-02-05%20a%20las%205.54.18%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=252f06e4-93cd-4bea-acbe-ef651d14596c" alt="" width="375"><figcaption></figcaption></figure>

La forma avanzada es con la hoja de estilos escribiendo el script de CSS

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2F1RqTphwsVKTYhBEL4r4E%2FCaptura%20de%20pantalla%202026-02-06%20a%20las%204.52.53%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=c0dadfff-43b3-4d8b-9077-127845056ebd" alt="" width="375"><figcaption></figcaption></figure>

La opción "Auto Open" permite elegir si por defecto se abre automáticamente en páginas específicas. Separa con el símbolo "/" las páginas donde deseas aparezca tu widget.

Si está vacío, se abrirá automáticamente en todas las páginas al actualizar.

<figure><img src="https://365551146-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMUYDYzjmxpzlYaw0gcaZ%2Fuploads%2F6mv9xbboHf4JtoClQBTi%2FCaptura%20de%20pantalla%202026-02-06%20a%20las%204.55.40%E2%80%AFp.%E2%80%AFm..png?alt=media&#x26;token=9d3c1ab9-018d-4aaa-a5ee-066eadf281a7" 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/dapta-docs-es/agentes-de-texto/widget-desplegar-tu-agente-en-una-pagina-web.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.