Añade un agente de voz con IA a SvelteKit (guía de app.html)

Cómo añadir AnveVoice a una aplicación de SvelteKit

Añade la etiqueta de AnveVoice a src/app.html, debajo del marcador %sveltekit.body%, para que cubra todas las páginas de una app de SvelteKit. También puedes colocarla dentro de svelte:head en el +layout.svelte raíz. Permite el origen de AnveVoice si defines una Content Security Policy. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: src/app.html (todas las páginas) o svelte:head en src/routes/+layout.svelte
• Programación necesaria: Un elemento script; sintaxis de layout de Svelte 5 si usas la ruta de layout
• Se aplica a: Compilaciones SSR, prerenderizadas y con adapter-static
• Cuidado con: Una CSP definida en la configuración de SvelteKit que bloquee https://anvevoice.app

Antes de empezar

Copia tu ID de incrustación de app.anvevoice.app (plan Free, 0 US$, sin tarjeta). SvelteKit ofrece dos lugares naturales para un script. El primero es la plantilla de página, src/app.html, que envuelve cada respuesta. El segundo es el componente de layout raíz, src/routes/+layout.svelte, que envuelve cada ruta y puede añadir elementos al head del documento con svelte:head. Usa app.html cuando simplemente quieras la etiqueta en todas partes y prefieras mantenerla fuera de tu árbol de componentes. Usa el layout cuando necesites renderizar la etiqueta de forma condicional, por ejemplo solo en producción.

Método 1: src/app.html

La documentación de estructura de proyecto de SvelteKit describe src/app.html como la plantilla de página. El marcador %sveltekit.head% recibe los elementos link y script que necesita la app, además del contenido de svelte:head, y %sveltekit.body% recibe la página renderizada. La documentación recomienda envolver %sveltekit.body% en un div u otro elemento, en lugar de colocarlo directamente dentro de body, para evitar errores de hidratación causados por extensiones del navegador. Tu propio script va después de ese envoltorio, así que nunca interfiere con la hidratación.

• 1. Abre src/app.html — Está junto a la carpeta routes.
• 2. Añade el script después del marcador del body — Conserva los marcadores por defecto y añade la etiqueta de AnveVoice justo antes de la etiqueta de cierre body. Sustituye YOUR_EMBED_ID. <!-- src/app.html --> <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> %sveltekit.head% </head> <body> <div style="display: contents">%sveltekit.body%</div> <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> </body> </html>
• 3. Reinicia el servidor de desarrollo — SvelteKit lee la plantilla al arrancar, así que reinicia npm run dev para ver el cambio.

Método 2: svelte:head en el layout raíz

Un archivo +layout.svelte en src/routes se aplica a todas las páginas. En SvelteKit actual, un layout recibe su contenido como prop children y lo renderiza con la etiqueta render. El elemento svelte:head inserta elementos en el head del documento, y su contenido se expone por separado del body durante el renderizado en el servidor. El elemento debe estar en el nivel superior del componente, nunca dentro de un bloque ni de otro elemento.

• 1. Abre o crea src/routes/+layout.svelte — Si ya existe un layout, conserva su marcado y sus estilos.
• 2. Añade svelte:head con el script — Coloca svelte:head en el nivel superior y conserva la llamada render para los children. <!-- src/routes/+layout.svelte --> <script> let { children } = $props(); </script> <svelte:head> <script async src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID"></script> </svelte:head> {@render children()}

Content Security Policy

SvelteKit tiene una opción csp en la configuración de su plugin de Vite. Definir script-src como self bloquea los scripts de otros orígenes, y la documentación indica que SvelteKit añade nonces o hashes a los scripts en línea que genera. Si activas CSP, añade https://anvevoice.app a script-src; de lo contrario, el navegador descarta la etiqueta en silencio. Para los scripts que añades tú en app.html, SvelteKit ofrece un marcador %sveltekit.nonce%, aunque para un archivo externo es más sencillo permitir el origen.

Prerenderizado y adaptadores estáticos

Ambos métodos funcionan con la salida prerenderizada y con adapter-static. El elemento script termina en los archivos HTML generados. Como la etiqueta no está ligada a una ruta de página, no hace falta registrarla para el prerenderizado.

Comprueba que funciona

• 1. Compila y previsualiza — Ejecuta npm run build y npm run preview para probar la salida de producción.
• 2. Inspecciona el HTML — Ve el código fuente y busca anvevoice.app/embed.js.
• 3. Prueba la voz — Abre el sitio, haz clic en el botón redondo del micrófono de abajo a la derecha, permite el acceso al micrófono y haz una pregunta.

Problemas comunes

• Falta el botón con la CSP activada: añade https://anvevoice.app a la directiva script-src.
• Etiqueta duplicada: está tanto en app.html como en +layout.svelte. Elimina una.
• Errores de layout tras editar: los layouts de Svelte 5 usan la prop children y la etiqueta render; la sintaxis antigua con un elemento slot pertenece a versiones anteriores de Svelte.
• Micrófono bloqueado: el sitio debe estar en HTTPS, y ninguna cabecera Permissions-Policy debe desactivar el micrófono.

Fuentes

• Docs de SvelteKit: estructura del proyecto (src/app.html) (https://svelte.dev/docs/kit/project-structure) — consultado el 2026-10-14
• Docs de SvelteKit: enrutamiento (+layout.svelte) (https://svelte.dev/docs/kit/routing) — consultado el 2026-10-14
• Docs de Svelte: svelte:head (https://svelte.dev/docs/svelte/svelte-head) — consultado el 2026-10-14
• Docs de SvelteKit: configuración (csp) (https://svelte.dev/docs/kit/configuration) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un sitio alojado en Netlify
• Cómo añadir AnveVoice a una aplicación Nuxt
• Cómo añadir AnveVoice a un sitio de Astro
• Cómo añadir AnveVoice a una aplicación de React Router

Prueba AnveVoice en tu sitio

Plan gratuito: 0 US$, 50.000 tokens al mes, sin tarjeta. Obtén tu ID de inserción en el panel y pega una etiqueta.