Añade un agente de voz con IA a Gatsby (gatsby-ssr o Script)

Cómo añadir AnveVoice a un sitio de Gatsby

En Gatsby, añade la etiqueta de AnveVoice con onRenderBody en gatsby-ssr.js para que se escriba en cada página compilada, o usa el componente Script de Gatsby en un layout. Prueba con una compilación de producción, porque la API SSR se ejecuta en tiempo de compilación. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: gatsby-ssr.js (onRenderBody) o un layout que usa Script de gatsby
• Componente Script: Añadido en [email protected]; estrategias post-hydrate, idle, off-main-thread
• Código necesario: Unas diez líneas de JavaScript o JSX
• Probar con: gatsby build y después gatsby serve

Antes de empezar

Copia tu ID de incrustación desde app.anvevoice.app. El plan gratuito cuesta $0 y no requiere tarjeta. Gatsby tiene dos formas compatibles de añadir un script de terceros, y ambas aparecen en la documentación oficial: una API de renderizado en el servidor que escribe elementos en el HTML generado, y el componente Script para usar en código React. Elige una. La ruta SSR te da una sola edición de archivo que cubre todas las páginas que genera el sitio. La ruta del componente encaja con equipos que ya renderizan un componente Layout compartido y quieren que Gatsby controle cuándo se carga el script.

Método 1: onRenderBody en gatsby-ssr.js

La referencia de la API SSR de Gatsby explica que onRenderBody se ejecuta después de que cada página se renderiza en el servidor durante la compilación, y que setHeadComponents añade elementos al head del html.js generado. Su propio ejemplo añade un elemento script de esa forma. Como los elementos son componentes de React en un array, cada uno necesita una clave única.

• 1. Crea o abre gatsby-ssr.js — Vive en la raíz del proyecto, junto a gatsby-config.js. El archivo también puede llamarse gatsby-ssr.tsx.
• 2. Añade el componente head — Exporta onRenderBody y pasa el script de AnveVoice a setHeadComponents. El atributo async permite que el navegador siga procesando mientras lo descarga. // gatsby-ssr.js const React = require("react") exports.onRenderBody = ({ setHeadComponents }) => { setHeadComponents([ <script key="anvevoice-embed" src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async />, ]) }
• 3. Compila y sirve — Ejecuta gatsby build y después gatsby serve, y revisa la página. El elemento se escribe durante la compilación, así que la etiqueta queda incorporada en cada archivo HTML.

Método 2: el componente Script de Gatsby

Gatsby añadió un componente Script en la versión 4.15.0, importado desde el paquete gatsby, como sustituto directo de una etiqueta script en minúsculas. Su prop strategy tiene tres valores: post-hydrate (el predeterminado, carga después de la hidratación de la página), idle (carga tras la hidratación cuando el hilo principal está libre) y off-main-thread (experimental, se ejecuta en un web worker mediante Partytown). Para un botón de voz, idle es una opción considerada, porque la página se vuelve interactiva primero. Evita off-main-thread: Gatsby indica que esos scripts solo se cargan en la navegación renderizada en el servidor, no en la navegación Link del lado del cliente, justo lo contrario de lo que necesita un widget de todo el sitio.

• 1. Añade Script a tu layout — Importa Script desde gatsby y renderízalo después de children en el componente que envuelve cada página. // src/components/layout.js import * as React from "react" import { Script } from "gatsby" export default function Layout({ children }) { return ( <> {children} <Script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" strategy="idle" /> </> ) }
• 2. Asegúrate de que todas las páginas usan el layout — Si algunas páginas omiten el componente Layout, no cargarán la etiqueta. Gatsby también admite Script dentro de wrapPageElement y wrapRootElement, y recomienda reflejar esos cambios tanto en gatsby-browser.js como en gatsby-ssr.js.

¿Qué método elegir?

• onRenderBody: un solo archivo, independiente de los componentes, funciona para cada página generada. Bueno para una etiqueta sencilla de todo el sitio.
• Componente Script: control de la estrategia de carga, más fácil de quitar de un único layout, y puede mostrarse solo en las páginas que lo renderizan.
• No uses los dos a la vez. AnveVoice ignora una segunda copia en la misma página, pero el código duplicado es confuso de mantener.

Comprueba que funciona

• 1. Ejecuta una compilación de producción — Ejecuta gatsby build y gatsby serve. La API SSR es un paso de compilación, así que el servidor de desarrollo no es una comprobación fiable.
• 2. Revisa el resultado — Abre el código fuente de una página compilada y busca anvevoice.app/embed.js.
• 3. Prueba la voz — 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 frecuentes

• Etiqueta ausente en gatsby develop: prueba en el sitio compilado.
• Advertencia de clave de React: el elemento pasado a setHeadComponents necesita una prop key única.
• Los callbacks no hacen nada: Gatsby indica que onLoad y onError no funcionan con scripts inline ni con scripts off-main-thread, así que evítalos en esta instalación.
• Micrófono bloqueado: el sitio desplegado debe usar HTTPS y no debe enviar una cabecera Permissions-Policy que desactive el micrófono.

Fuentes

• Documentación de Gatsby: API SSR de Gatsby (onRenderBody) (https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/) — consultado el 2026-10-14
• Documentación de Gatsby: API Script de Gatsby (https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una app de React
• Cómo añadir AnveVoice a una aplicación Next.js
• Cómo añadir AnveVoice a un sitio alojado en Netlify
• Cómo añadir AnveVoice a un sitio de Astro

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.