AstroAPI

Appearance

Adicionar Widgets ao Teu Site ​

Este guia mostra-te como adicionar um widget ou chatbot da AstroAPI ao teu site — sem necessidade de conhecimentos de programação. Copias um snippet de código do teu dashboard e colas-o no teu construtor de sites.

Inclui instruções passo a passo para WordPress, Wix, Squarespace, Shopify e Webflow, além de um método genérico que funciona em qualquer site.

Procuras a API técnica de widgets?

Este guia é sobre colar um código de incorporação pronto a usar no teu site. Para criar e configurar widgets através da API, consulta Widgets Embutíveis. Para a API do chatbot, consulta Chatbot de IA.

Passo 1: Obter o Teu Código de Incorporação ​

  1. Inicia sessão no dashboard da AstroAPI.
  2. Vai a Widgets (ou Chatbots para o chatbot de IA) e abre o widget que queres incorporar.
  3. Usa o separador Preview para verificar se tem o aspecto que pretendes. As cores, tipos de letra e layout são configurados aqui no dashboard — não no código — pelo que podes redesenhar o widget mais tarde sem tocar no teu site.
  4. Abre o separador Embed e copia o código de incorporação. Tem um aspecto semelhante 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>

O código de incorporação do chatbot é uma única tag de script sem o <div>:

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

É o único código de que precisas. As secções seguintes mostram onde o colar, por plataforma.

Mantém a tua chave de API segura

O código de incorporação contém uma chave de API. Usa uma chave que tenha apenas permissões de widget ou chatbot — nunca a tua chave de API principal. Podes criar chaves restritas em API Keys no dashboard, e restringir o chatbot aos teus próprios domínios em Chatbots → Security.

WordPress ​

Opção A: Bloco Custom HTML (recomendado) ​

  1. Edita a página ou artigo onde o widget deve aparecer.
  2. Clica no botão + para adicionar um bloco e pesquisa por Custom HTML.
  3. Cola o código de incorporação no bloco.
  4. Clica em Preview para verificar o resultado e depois em Update ou Publish.

Opção B: Em todo o site (para o chatbot) ​

Para mostrar o chatbot em todas as páginas:

  1. Instala um plugin leve de header/footer como o WPCode, ou usa a opção de "custom scripts" do teu tema — não é necessário editar ficheiros do tema.
  2. Cola o código de incorporação do chatbot na secção Footer (antes de </body>).
  3. Guarda. A bolha do chatbot aparece agora em todas as páginas.

Elementor

Usas o Elementor? Adiciona um widget HTML à tua página e cola aí o código de incorporação.

Wix ​

  1. No editor do Wix, clica em Add Elements (o botão +) na barra lateral esquerda.
  2. Escolhe Embed Code → Embed HTML.
  3. Clica em Enter Code e cola o código de incorporação.
  4. Clica em Apply e arrasta/redimensiona a moldura para se ajustar ao widget.
  5. Clica em Publish.

Chatbot no Wix

O Wix renderiza o HTML incorporado dentro de uma frame, o que confina a bolha do chatbot a essa frame. Para um chatbot em todo o site, usa antes Settings → Custom Code (requer um plano pago do Wix): cola o código de incorporação do chatbot e configura-o para carregar em All pages, colocado no Body - end.

Squarespace ​

  1. Edita a página onde o widget deve aparecer.
  2. Clica num ponto de inserção e escolhe o bloco Code.
  3. Cola o código de incorporação (mantém o modo HTML predefinido).
  4. Guarda a página.

Para um chatbot em todo o site, vai a Settings → Advanced → Code Injection e cola o código de incorporação do chatbot no campo Footer.

WARNING

Os blocos de código e a injecção de código requerem um plano Business do Squarespace ou superior.

Shopify ​

  1. No admin do Shopify, vai a Online Store → Themes.
  2. Clica em Customize no teu tema actual.
  3. Adiciona uma secção Custom Liquid (ou um bloco HTML, dependendo do teu tema) à página onde o widget deve aparecer.
  4. Cola o código de incorporação e clica em Save.

Para um chatbot em todo o site:

  1. Vai a Online Store → Themes → ⋯ → Edit code.
  2. Abre layout/theme.liquid.
  3. Cola o código de incorporação do chatbot imediatamente antes da tag de fecho </body>.
  4. Clica em Save.

Webflow ​

  1. No designer do Webflow, arrasta um elemento Embed (de Add Elements → Components) para a tua página.
  2. Cola o código de incorporação no editor de código e clica em Save & Close.
  3. Publica o teu site. O código personalizado só é executado no site publicado, não na pré-visualização do designer.

Para um chatbot em todo o site, vai a Site Settings → Custom Code e cola o código de incorporação do chatbot no campo Footer Code.

WARNING

O código personalizado no Webflow requer um plano de site pago.

Qualquer Outro Site ​

Se tu (ou o teu programador web) gerem o HTML directamente:

  1. Abre o ficheiro HTML ou o template da página.
  2. Cola o código de incorporação do widget no local da página onde o widget deve aparecer.
  3. Para o chatbot, cola o seu código de incorporação imediatamente antes da tag de fecho </body> — ele é renderizado como uma bolha flutuante, pelo que a sua posição no HTML não importa.

Resolução de Problemas ​

A área do widget fica vazia. Verifica se ambas as partes do código de incorporação foram coladas: a tag <script> e o <div> abaixo dela. Alguns construtores de páginas removem uma das duas.

"Invalid API key" ou nada carrega. A chave de API no código de incorporação pode ter sido revogada ou não ter as permissões correctas. Copia um código de incorporação novo a partir do separador Embed do dashboard.

O chatbot não aparece no meu site publicado. Se restringiste o chatbot a domínios específicos (Chatbots → Security → Allowed domains), certifica-te de que o domínio do teu site está na lista — incluindo a variante www. se o teu site a usar.

O widget tem um aspecto diferente da pré-visualização. O estilo vem da configuração do dashboard e é carregado com o widget. Se alteraste o design recentemente, faz um hard refresh da página (Ctrl+Shift+R / Cmd+Shift+R) para contornar a cache do teu browser.

Funciona no desktop mas não na webview da minha app. O código de incorporação precisa de executar JavaScript de astroapi.cloud. Certifica-te de que a política de segurança (CSP) da tua app ou site permite scripts desse domínio.

Próximos Passos ​

AstroAPI Documentation

Copyright © 2026 AstroAPI