AstroAPI

Appearance

Aggiungere Widget al Tuo Sito Web ​

Questa guida ti mostra come aggiungere un widget o un chatbot AstroAPI al tuo sito web — senza bisogno di conoscenze di programmazione. Copi uno snippet di codice dalla tua dashboard e lo incolli nel tuo website builder.

Include istruzioni passo passo per WordPress, Wix, Squarespace, Shopify e Webflow, oltre a un metodo generico che funziona su qualsiasi sito web.

Cerchi l'API tecnica dei widget?

Questa guida spiega come incollare un codice di incorporamento già pronto nel tuo sito. Per creare e configurare widget tramite l'API, consulta Widget Incorporabili. Per l'API del chatbot, consulta Chatbot IA.

Passo 1: Ottieni il Tuo Codice di Incorporamento ​

  1. Accedi alla dashboard di AstroAPI.
  2. Vai su Widgets (o Chatbots per il chatbot IA) e apri il widget che vuoi incorporare.
  3. Usa la scheda Preview per verificare che abbia l'aspetto desiderato. Colori, font e layout si configurano qui nella dashboard — non nel codice — quindi potrai ridisegnare il widget in seguito senza toccare il tuo sito web.
  4. Apri la scheda Embed e copia il codice di incorporamento. Ha un aspetto simile a questo:
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>

Il codice di incorporamento del chatbot è un singolo tag script senza il <div>:

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

È l'unico codice di cui hai bisogno. Le sezioni seguenti mostrano dove incollarlo, piattaforma per piattaforma.

Mantieni al sicuro la tua chiave API

Il codice di incorporamento contiene una chiave API. Usa una chiave che abbia solo i permessi per widget o chatbot — mai la tua chiave API principale. Puoi creare chiavi con permessi limitati in API Keys nella dashboard e limitare il chatbot ai tuoi domini in Chatbots → Security.

WordPress ​

Opzione A: Blocco Custom HTML (consigliata) ​

  1. Modifica la pagina o l'articolo in cui deve apparire il widget.
  2. Clicca sul pulsante + per aggiungere un blocco e cerca Custom HTML.
  3. Incolla il codice di incorporamento nel blocco.
  4. Clicca su Preview per verificare il risultato, poi su Update o Publish.

Opzione B: Su tutto il sito (per il chatbot) ​

Per mostrare il chatbot su ogni pagina:

  1. Installa un plugin leggero per header/footer come WPCode, oppure usa l'opzione "custom scripts" del tuo tema — non serve modificare i file del tema.
  2. Incolla il codice di incorporamento del chatbot nella sezione Footer (prima di </body>).
  3. Salva. La bolla del chatbot appare ora su ogni pagina.

Elementor

Usi Elementor? Aggiungi un widget HTML alla tua pagina e incolla lì il codice di incorporamento.

Wix ​

  1. Nell'editor di Wix, clicca su Add Elements (il pulsante +) nella barra laterale sinistra.
  2. Scegli Embed Code → Embed HTML.
  3. Clicca su Enter Code e incolla il codice di incorporamento.
  4. Clicca su Apply e trascina/ridimensiona il riquadro per adattarlo al widget.
  5. Clicca su Publish.

Chatbot su Wix

Wix renderizza l'HTML incorporato all'interno di un frame, il che confina la bolla del chatbot in quel frame. Per un chatbot su tutto il sito, usa invece Settings → Custom Code (richiede un piano Wix a pagamento): incolla il codice di incorporamento del chatbot e impostalo per caricarsi su All pages, posizionato in Body - end.

Squarespace ​

  1. Modifica la pagina in cui deve apparire il widget.
  2. Clicca su un punto di inserimento e scegli il blocco Code.
  3. Incolla il codice di incorporamento (mantieni la modalità HTML predefinita).
  4. Salva la pagina.

Per un chatbot su tutto il sito, vai su Settings → Advanced → Code Injection e incolla il codice di incorporamento del chatbot nel campo Footer.

WARNING

I blocchi di codice e la code injection richiedono un piano Squarespace Business o superiore.

Shopify ​

  1. Nel pannello di amministrazione di Shopify, vai su Online Store → Themes.
  2. Clicca su Customize sul tuo tema attuale.
  3. Aggiungi una sezione Custom Liquid (o un blocco HTML, a seconda del tuo tema) alla pagina in cui deve apparire il widget.
  4. Incolla il codice di incorporamento e clicca su Save.

Per un chatbot su tutto il sito:

  1. Vai su Online Store → Themes → ⋯ → Edit code.
  2. Apri layout/theme.liquid.
  3. Incolla il codice di incorporamento del chatbot subito prima del tag di chiusura </body>.
  4. Clicca su Save.

Webflow ​

  1. Nel designer di Webflow, trascina un elemento Embed (da Add Elements → Components) sulla tua pagina.
  2. Incolla il codice di incorporamento nell'editor di codice e clicca su Save & Close.
  3. Pubblica il tuo sito. Il codice personalizzato viene eseguito solo sul sito pubblicato, non nell'anteprima del designer.

Per un chatbot su tutto il sito, vai su Site Settings → Custom Code e incolla il codice di incorporamento del chatbot nel campo Footer Code.

WARNING

Il codice personalizzato in Webflow richiede un piano sito a pagamento.

Qualsiasi Altro Sito Web ​

Se tu (o il tuo sviluppatore web) gestite direttamente l'HTML:

  1. Apri il file HTML o il template della pagina.
  2. Incolla il codice di incorporamento del widget nel punto della pagina in cui deve apparire il widget.
  3. Per il chatbot, incolla il suo codice di incorporamento subito prima del tag di chiusura </body> — viene renderizzato come una bolla flottante, quindi la sua posizione nell'HTML non ha importanza.

Risoluzione dei Problemi ​

L'area del widget rimane vuota. Verifica che entrambe le parti del codice di incorporamento siano state incollate: il tag <script> e il <div> sotto di esso. Alcuni page builder rimuovono una delle due.

"Invalid API key" oppure non si carica nulla. La chiave API nel codice di incorporamento potrebbe essere stata revocata o non avere i permessi giusti. Copia un nuovo codice di incorporamento dalla scheda Embed della dashboard.

Il chatbot non appare sul mio sito pubblicato. Se hai limitato il chatbot a domini specifici (Chatbots → Security → Allowed domains), assicurati che il dominio del tuo sito sia nell'elenco — inclusa la variante www. se il tuo sito la usa.

Il widget appare diverso dall'anteprima. Lo stile proviene dalla configurazione nella dashboard e viene caricato insieme al widget. Se hai modificato il design di recente, ricarica la pagina forzatamente (Ctrl+Shift+R / Cmd+Shift+R) per bypassare la cache del browser.

Funziona su desktop ma non nella webview della mia app. Il codice di incorporamento deve eseguire JavaScript da astroapi.cloud. Assicurati che la policy di sicurezza (CSP) della tua app o del tuo sito consenta gli script provenienti da quel dominio.

Prossimi Passi ​

AstroAPI Documentation

Copyright © 2026 AstroAPI