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://widgets.astroapi.cloud/sdk.js"
  data-widget-id="wgt_abc123"
  data-api-key="your-widget-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://widgets.astroapi.cloud/chatbot-sdk.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. Per i widget si tratta della chiave del widget stesso, generata nella dashboard e valida solo per quel widget: non incollare mai la tua chiave API principale in una pagina web. Aggiungi i domini del tuo sito in Domini consentiti in modo che la chiave funzioni solo lì (inclusa la variante www.) e limita 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 carica JavaScript e CSS da widgets.astroapi.cloud e chiama api.astroapi.cloud. Assicurati che la politica di sicurezza (CSP) della tua app o del tuo sito consenta entrambi i domini.

Il widget ignora la modalità scura della mia pagina. Imposta il tema del widget su Automatico nella dashboard. In questo modo segue la preferenza di sistema del visitatore; Chiaro e Scuro sono fissi.

Prossimi Passi ​

AstroAPI Documentation

Copyright © 2026 AstroAPI