# Introducción

Una **app** (también llamada *extension*) es una página web tuya que Videsk renderiza dentro de la consola del agente, normalmente al lado del panel de llamada. Te permite mostrar información contextual (CRM, ticketera, formularios internos), automatizar acciones del agente o llevar el flujo de tu propio backend al puesto de trabajo, sin que el agente cambie de pestaña.

## Cómo funciona, en una vista

```
┌──────────────────── Consola Videsk ────────────────────┐
│                                                        │
│  Panel de llamada      ┌────────── App ────────────┐   │
│  ─ Estado              │                           │   │
│  ─ Cliente             │   tu web embebida         │   │
│  ─ Acciones            │   (https://tu-app.com)    │   │
│                        │                           │   │
│                        └───────────────────────────┘   │
└────────────────────────────────────────────────────────┘
```

Cuando el agente acepta una llamada o reunión, Videsk:

1. Resuelve la URL de tu app sustituyendo variables del contexto (Handlebars).
2. Monta tu web en un `<iframe>` con un `sandbox` y un `allow` predefinidos.
3. Te envía el contexto inicial (datos del agente, segmento, llamada, formulario) por `postMessage` mediante el **broker**.
4. Tu app puede responder con eventos: emitir datos al host, pedir un resize de altura, etc.

## Lo que necesitas saber para construir una app

Estas son las cuatro piezas. Léelas en orden la primera vez:

1. [**Configuración**](/es-developers/apps/configuracion.md): qué campos llenas en consola al registrar la app.
2. [**Plantillas y contexto**](/es-developers/apps/plantillas.md): qué variables puedes inyectar en la URL antes de cargarla.
3. [**Broker (postMessage)**](/es-developers/apps/broker.md): el protocolo para hablar con la consola en tiempo real.
4. [**Ejemplos**](/es-developers/apps/ejemplos.md): código copy/paste para los casos más comunes.

## Tipos de app y dónde se renderizan

Hoy se documenta el tipo **iframe**, en el que tu app es una URL servida por ti. Existen tres ubicaciones (*placements*) donde puede aparecer:

| Placement    | Dónde se ve                                  | Cuándo conviene                                                                |
| ------------ | -------------------------------------------- | ------------------------------------------------------------------------------ |
| `call-panel` | Inline dentro del panel de la llamada        | Información compacta que el agente debe ver de un vistazo.                     |
| `sidebar`    | Drawer lateral (ancho configurable)          | Apps con más UI, búsquedas, formularios.                                       |
| `standalone` | Se abre en una pestaña nueva (`window.open`) | Herramientas que necesitan toda la pantalla o no encajan dentro de la consola. |

{% hint style="info" %}
Las apps `standalone` no usan el broker: la URL se resuelve y se abre en una pestaña nueva, sin canal `postMessage`. El resto de esta documentación aplica a `call-panel` y `sidebar`.
{% endhint %}

## Ciclo de vida

1. **Mount**: el agente entra a una llamada/reunión y abre tu app. La URL se resuelve **una sola vez** con el contexto disponible en ese momento.
2. **Init**: cuando el `iframe` termina de cargar, el host envía un mensaje `videsk:init` con el contexto al `contentWindow` de tu app.
3. **Operación**: tu app y el host pueden intercambiar mensajes vía broker (resize, eventos de negocio, etc.).
4. **Reload manual**: el agente puede recargar la app desde el botón del header. Esto vuelve a resolver la URL con el contexto actualizado.
5. **Unmount**: al cerrar la llamada/reunión, o si la app deja de aplicar al segmento, el `iframe` se destruye.

{% hint style="warning" %}
La URL **no** se vuelve a resolver automáticamente cuando el contexto cambia (por ejemplo, cuando el agente llena un campo del formulario después del mount). Si necesitas datos que cambian en vivo, recíbelos por el broker en lugar de codificarlos en la URL.
{% 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.videsk.io/es-developers/apps/introduccion.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.