AstroAPI

Appearance

Añadir widgets a su sitio web ​

Esta guía le muestra cómo añadir un widget o chatbot de AstroAPI a su sitio web — sin necesidad de conocimientos de programación. Usted copia un fragmento de código desde su panel de control y lo pega en su creador de sitios web.

Incluye instrucciones paso a paso para WordPress, Wix, Squarespace, Shopify y Webflow, además de un método genérico que funciona en cualquier sitio web.

¿Busca la API técnica de widgets?

Esta guía trata sobre cómo pegar un código de inserción listo para usar en su sitio. Para crear y configurar widgets a través de la API, consulte Widgets integrables. Para la API del chatbot, consulte Chatbot de IA.

Paso 1: Obtenga su código de inserción ​

  1. Inicie sesión en el panel de control de AstroAPI.
  2. Vaya a Widgets (o Chatbots para el chatbot de IA) y abra el widget que desea insertar.
  3. Use la pestaña Preview para comprobar que se ve como usted quiere. Los colores, las fuentes y el diseño se configuran aquí, en el panel de control — no en el código — de modo que puede rediseñar el widget más adelante sin tocar su sitio web.
  4. Abra la pestaña Embed y copie el código de inserción. Tiene un aspecto similar a este:
html
<script
  src="https://api.astroapi.cloud/widgets/sdk.js"
  data-widget-id="wgt_abc123"
  data-api-key="your-api-key"
  data-api-url="https://api.astroapi.cloud"
></script>
<div id="astro-widget-wgt_abc123"></div>

El código de inserción del chatbot es una única etiqueta script sin el <div>:

html
<script
  src="https://api.astroapi.cloud/widget.js"
  data-chatbot-id="your-chatbot-id"
  data-api-key="your-api-key"
></script>

Ese es el único código que necesita. Las siguientes secciones muestran dónde pegarlo, plataforma por plataforma.

Mantenga su API key segura

El código de inserción contiene una API key. Use una clave que solo tenga permisos de widget o chatbot — nunca su API key principal. Puede crear claves restringidas en API Keys en el panel de control, y restringir el chatbot a sus propios dominios en Chatbots → Security.

WordPress ​

Opción A: bloque Custom HTML (recomendado) ​

  1. Edite la página o entrada donde debe aparecer el widget.
  2. Haga clic en el botón + para añadir un bloque y busque Custom HTML.
  3. Pegue el código de inserción en el bloque.
  4. Haga clic en Preview para comprobar el resultado y luego en Update o Publish.

Opción B: en todo el sitio (para el chatbot) ​

Para mostrar el chatbot en todas las páginas:

  1. Instale un plugin ligero de header/footer como WPCode, o use la opción de "custom scripts" de su tema — no es necesario editar los archivos del tema.
  2. Pegue el código de inserción del chatbot en la sección Footer (antes de </body>).
  3. Guarde. La burbuja del chatbot aparecerá ahora en todas las páginas.

Elementor

¿Usa Elementor? Añada un widget HTML a su página y pegue allí el código de inserción.

Wix ​

  1. En el editor de Wix, haga clic en Add Elements (el botón +) en la barra lateral izquierda.
  2. Elija Embed Code → Embed HTML.
  3. Haga clic en Enter Code y pegue el código de inserción.
  4. Haga clic en Apply y arrastre/redimensione el marco para ajustarlo al widget.
  5. Haga clic en Publish.

Chatbot en Wix

Wix muestra el HTML insertado dentro de un marco, lo que confina la burbuja del chatbot a ese marco. Para un chatbot en todo el sitio, use en su lugar Settings → Custom Code (requiere un plan de pago de Wix): pegue el código de inserción del chatbot y configúrelo para que se cargue en All pages, colocado en el Body - end.

Squarespace ​

  1. Edite la página donde debe aparecer el widget.
  2. Haga clic en un punto de inserción y elija el bloque Code.
  3. Pegue el código de inserción (mantenga el modo HTML predeterminado).
  4. Guarde la página.

Para un chatbot en todo el sitio, vaya a Settings → Advanced → Code Injection y pegue el código de inserción del chatbot en el campo Footer.

WARNING

Los bloques de código y la inyección de código requieren un plan Business de Squarespace o superior.

Shopify ​

  1. En el administrador de Shopify, vaya a Online Store → Themes.
  2. Haga clic en Customize en su tema actual.
  3. Añada una sección Custom Liquid (o un bloque HTML, según su tema) a la página donde debe aparecer el widget.
  4. Pegue el código de inserción y haga clic en Save.

Para un chatbot en todo el sitio:

  1. Vaya a Online Store → Themes → ⋯ → Edit code.
  2. Abra layout/theme.liquid.
  3. Pegue el código de inserción del chatbot justo antes de la etiqueta de cierre </body>.
  4. Haga clic en Save.

Webflow ​

  1. En el diseñador de Webflow, arrastre un elemento Embed (desde Add Elements → Components) a su página.
  2. Pegue el código de inserción en el editor de código y haga clic en Save & Close.
  3. Publique su sitio. El código personalizado solo se ejecuta en el sitio publicado, no en la vista previa del diseñador.

Para un chatbot en todo el sitio, vaya a Site Settings → Custom Code y pegue el código de inserción del chatbot en el campo Footer Code.

WARNING

El código personalizado en Webflow requiere un plan de sitio de pago.

Cualquier otro sitio web ​

Si usted (o su desarrollador web) gestiona el HTML directamente:

  1. Abra el archivo HTML o la plantilla de la página.
  2. Pegue el código de inserción del widget en el lugar de la página donde debe aparecer el widget.
  3. Para el chatbot, pegue su código de inserción justo antes de la etiqueta de cierre </body> — se muestra como una burbuja flotante, por lo que su posición en el HTML no importa.

Solución de problemas ​

El área del widget permanece vacía. Compruebe que se pegaron ambas partes del código de inserción: la etiqueta <script> y el <div> debajo de ella. Algunos creadores de páginas eliminan una de las dos.

"Invalid API key" o no se carga nada. Es posible que la API key del código de inserción haya sido revocada o carezca de los permisos adecuados. Copie un código de inserción nuevo desde la pestaña Embed del panel de control.

El chatbot no aparece en mi sitio publicado. Si restringió el chatbot a dominios específicos (Chatbots → Security → Allowed domains), asegúrese de que el dominio de su sitio web esté en la lista — incluida la variante www. si su sitio la utiliza.

El widget se ve diferente a la vista previa. El estilo proviene de la configuración del panel de control y se carga junto con el widget. Si cambió el diseño recientemente, recargue la página de forma forzada (Ctrl+Shift+R / Cmd+Shift+R) para omitir la caché de su navegador.

Funciona en el escritorio pero no en la webview de mi aplicación. El código de inserción necesita ejecutar JavaScript de astroapi.cloud. Asegúrese de que la política de seguridad (CSP) de su aplicación o sitio permita scripts de ese dominio.

Próximos pasos ​

AstroAPI Documentation

Copyright © 2026 AstroAPI