Documentación
Modo hero: el avatar en la página
Usted señala un contenedor de su maquetación y el widget coloca dentro el personaje y una barra de control. La conversación arranca justo donde el visitante ya está mirando.
El marcado en su página
Usted dirige la conversación con sus propios atributos, sin tocar la interfaz de programación del widget.
<!-- El contenedor que ocupará el avatar. Su contenido es la reserva. -->
<div class="hero-avatar" data-caip-avatar>
<picture><img src="/images/ada.png?v=2" alt="Ada, asistente de IA"></picture>
</div>
<!-- Aviso visible junto al personaje. El widget añade su propia nota,
pero solo mientras ocupa el contenedor. -->
<p>Ada es una asistente de IA. Hablas con un sistema, no con una persona.</p>
<!-- Su botón de llamada de voz, en cualquier punto de la página -->
<button type="button" data-caip-call>Hablar con Ada</button>
<!-- Su botón para abrir el chat escrito -->
<button type="button" data-caip-open>Escríbanos</button>Tres atributos
| Atributo | Significado |
|---|---|
| data-caip-avatar | El contenedor del que se hace cargo el widget. Recibe su propio árbol de estilos cerrado, con el marco del avatar y una barra de control |
| data-caip-call | Inicia una conversación de voz en el avatar. No abre la burbuja |
| data-caip-open | Abre el panel del chat escrito |
Las reglas por las que más nos preguntan
- El contenido de reserva desaparece tarde
- La imagen del contenedor se queda hasta que el marco levanta correctamente. Una mala configuración deja la página con su imagen, no con un rectángulo vacío.
- La sesión se abre de forma perezosa
- El primer clic abre la sesión y después la conversación de voz. El clic sigue siendo un gesto del visitante, y por eso el navegador permite el micrófono y la reproducción de audio.
- La conversación es una sola
- Hay un solo marco a la vez y, con la ventana de chat abierta, pertenece al panel: tu contenedor vuelve entre tanto a su contenido de reserva y recupera el marco al cerrarla. La excepción es una conversación ya en curso en el avatar, que conserva su marco mientras el panel muestra solo los controles de la llamada.
- No ponga un botón justo debajo del contenedor
- Una vez que el widget se hace cargo del contenedor, su barra dibuja ahí su propio botón de inicio. Su botón, colocado justo debajo, quedaría encima de aquel.
- Altura
- El marco toma la anchura del contenedor y la altura de una proporción cuadrada. A un contenedor de altura automática no hay que ajustarle nada. Un contenedor con altura explícita gana, y la barra de conversación que crece le quita altura a él y no a la página, de modo que la maquetación no da saltos.
- Cuando la voz está apagada
- Los botones de llamada del avatar se ocultan de forma permanente, y su propio botón no se queda mudo: entonces abre el chat.
- El aviso, en tu contenido de reserva
- Mientras el panel sostiene el marco, el personaje de tu página es tu propio contenido de reserva, sin la barra del widget y por tanto sin su nota. Dale a ese contenido una frase visible que diga que el personaje es una asistente de IA, no solo un texto alternativo o un aria-label.
Content-Security-Policy
El avatar se incrusta dentro de un marco. Si su página envía la cabecera Content-Security-Policy, tiene que permitir un marco de app.aivatary.com en la directiva frame-src. Por nuestro lado, la incrustación está limitada por la directiva frame-ancestors a los dominios de su lista, así que el marco no se puede colocar en una página ajena.
Véalo funcionando
El modo hero funciona en nuestra propia página de inicio. El personaje de la cabecera es exactamente este mecanismo.