AstroAPI

Appearance

Widgets aan uw website toevoegen ​

Deze gids laat zien hoe u een AstroAPI-widget of chatbot aan uw website toevoegt — geen programmeerkennis vereist. U kopieert één stukje code uit uw dashboard en plakt het in uw websitebouwer.

De gids bevat stapsgewijze instructies voor WordPress, Wix, Squarespace, Shopify en Webflow, plus een generieke methode die op elke website werkt.

Op zoek naar de technische widget-API?

Deze gids gaat over het plakken van een kant-en-klare embedcode in uw site. Voor het aanmaken en configureren van widgets via de API, zie Insluitbare widgets. Voor de chatbot-API, zie AI-chatbot.

Stap 1: Haal uw embedcode op ​

  1. Log in op het AstroAPI-dashboard.
  2. Ga naar Widgets (of Chatbots voor de AI-chatbot) en open de widget die u wilt insluiten.
  3. Gebruik het tabblad Preview om te controleren of alles eruitziet zoals u wilt. Kleuren, lettertypen en layout configureert u hier in het dashboard — niet in de code — zodat u de widget later opnieuw kunt vormgeven zonder uw website aan te raken.
  4. Open het tabblad Embed en kopieer de embedcode. Die ziet er ongeveer zo uit:
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>

De embedcode van de chatbot is één enkele script-tag zonder de <div>:

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

Dat is de enige code die u nodig hebt. De volgende secties laten per platform zien waar u deze plakt.

Houd uw API key veilig

De embedcode bevat een API key. Gebruik een key die alleen widget- of chatbotrechten heeft — nooit uw hoofd-API-key. U kunt beperkte keys aanmaken onder API Keys in het dashboard, en de chatbot beperken tot uw eigen domeinen onder Chatbots → Security.

WordPress ​

Optie A: Custom HTML-blok (aanbevolen) ​

  1. Bewerk de pagina of het bericht waar de widget moet verschijnen.
  2. Klik op de +-knop om een blok toe te voegen en zoek naar Custom HTML.
  3. Plak de embedcode in het blok.
  4. Klik op Preview om het resultaat te controleren, en daarna op Update of Publish.

Optie B: Site-breed (voor de chatbot) ​

Om de chatbot op elke pagina te tonen:

  1. Installeer een lichtgewicht header/footer-plugin zoals WPCode, of gebruik de optie "custom scripts" van uw thema — het bewerken van themabestanden is niet nodig.
  2. Plak de embedcode van de chatbot in de sectie Footer (vóór </body>).
  3. Sla op. De chatbotbubbel verschijnt nu op elke pagina.

Elementor

Gebruikt u Elementor? Voeg een HTML-widget toe aan uw pagina en plak de embedcode daar.

Wix ​

  1. Klik in de Wix-editor op Add Elements (de +-knop) in de linkerzijbalk.
  2. Kies Embed Code → Embed HTML.
  3. Klik op Enter Code en plak de embedcode.
  4. Klik op Apply en versleep/verklein het frame zodat de widget past.
  5. Klik op Publish.

Chatbot op Wix

Wix rendert ingesloten HTML binnen een frame, waardoor de chatbotbubbel beperkt blijft tot dat frame. Gebruik voor een site-brede chatbot in plaats daarvan Settings → Custom Code (vereist een betaald Wix-abonnement): plak de embedcode van de chatbot en stel deze in om te laden op All pages, geplaatst in de Body - end.

Squarespace ​

  1. Bewerk de pagina waar de widget moet verschijnen.
  2. Klik op een invoegpunt en kies het Code-blok.
  3. Plak de embedcode (behoud de standaard HTML-modus).
  4. Sla de pagina op.

Voor een site-brede chatbot gaat u naar Settings → Advanced → Code Injection en plakt u de embedcode van de chatbot in het veld Footer.

WARNING

Code-blokken en code injection vereisen een Squarespace Business-abonnement of hoger.

Shopify ​

  1. Ga in de Shopify-beheeromgeving naar Online Store → Themes.
  2. Klik op Customize bij uw huidige thema.
  3. Voeg een Custom Liquid-sectie toe (of een HTML-blok, afhankelijk van uw thema) aan de pagina waar de widget moet verschijnen.
  4. Plak de embedcode en klik op Save.

Voor een site-brede chatbot:

  1. Ga naar Online Store → Themes → ⋯ → Edit code.
  2. Open layout/theme.liquid.
  3. Plak de embedcode van de chatbot vlak vóór de sluitende </body>-tag.
  4. Klik op Save.

Webflow ​

  1. Sleep in de Webflow-designer een Embed-element (uit Add Elements → Components) naar uw pagina.
  2. Plak de embedcode in de code-editor en klik op Save & Close.
  3. Publiceer uw site. Aangepaste code wordt alleen uitgevoerd op de gepubliceerde site, niet in de preview van de designer.

Voor een site-brede chatbot gaat u naar Site Settings → Custom Code en plakt u de embedcode van de chatbot in het veld Footer Code.

WARNING

Aangepaste code in Webflow vereist een betaald site-abonnement.

Elke andere website ​

Als u (of uw webontwikkelaar) de HTML rechtstreeks beheert:

  1. Open het HTML-bestand of de template van de pagina.
  2. Plak de embedcode van de widget op de plek in de pagina waar de widget moet verschijnen.
  3. Voor de chatbot plakt u de embedcode vlak vóór de sluitende </body>-tag — de chatbot verschijnt als een zwevende bubbel, dus de positie in de HTML maakt niet uit.

Probleemoplossing ​

Het widgetgebied blijft leeg. Controleer of beide delen van de embedcode zijn geplakt: de <script>-tag én de <div> eronder. Sommige paginabouwers verwijderen een van de twee.

"Invalid API key" of er laadt niets. De API key in de embedcode is mogelijk ingetrokken of mist de juiste rechten. Kopieer een verse embedcode van het tabblad Embed in het dashboard.

De chatbot verschijnt niet op mijn gepubliceerde site. Als u de chatbot hebt beperkt tot specifieke domeinen (Chatbots → Security → Allowed domains), zorg er dan voor dat het domein van uw website op de lijst staat — inclusief de www.-variant als uw site die gebruikt.

De widget ziet er anders uit dan in de preview. De styling komt uit de dashboardconfiguratie en laadt mee met de widget. Als u het ontwerp onlangs hebt gewijzigd, ververs de pagina dan geforceerd (Ctrl+Shift+R / Cmd+Shift+R) om de browsercache te omzeilen.

Het werkt op desktop, maar niet in de webview van mijn app. De embedcode moet JavaScript van astroapi.cloud kunnen uitvoeren. Zorg ervoor dat het beveiligingsbeleid (CSP) van uw app of site scripts van dat domein toestaat.

Volgende stappen ​

AstroAPI Documentation

Copyright © 2026 AstroAPI