AstroAPI

Appearance

Widgets zu Ihrer Website hinzufügen ​

Diese Anleitung zeigt Ihnen, wie Sie ein AstroAPI-Widget oder einen Chatbot zu Ihrer Website hinzufügen — ganz ohne Programmierkenntnisse. Sie kopieren einen Code-Schnipsel aus Ihrem Dashboard und fügen ihn in Ihren Website-Baukasten ein.

Die Anleitung enthält Schritt-für-Schritt-Anweisungen für WordPress, Wix, Squarespace, Shopify und Webflow sowie eine generische Methode, die auf jeder Website funktioniert.

Suchen Sie die technische Widget-API?

Diese Anleitung beschreibt, wie Sie einen fertigen Embed-Code in Ihre Website einfügen. Informationen zum Erstellen und Konfigurieren von Widgets über die API finden Sie unter Einbettbare Widgets. Für die Chatbot-API siehe KI-Chatbot.

Schritt 1: Holen Sie sich Ihren Embed-Code ​

  1. Melden Sie sich im AstroAPI-Dashboard an.
  2. Gehen Sie zu Widgets (oder Chatbots für den KI-Chatbot) und öffnen Sie das Widget, das Sie einbetten möchten.
  3. Prüfen Sie im Tab Preview, ob alles so aussieht, wie Sie es möchten. Farben, Schriften und Layout werden hier im Dashboard konfiguriert — nicht im Code — sodass Sie das Widget später umgestalten können, ohne Ihre Website anzufassen.
  4. Öffnen Sie den Tab Embed und kopieren Sie den Embed-Code. Er sieht ungefähr so aus:
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>

Der Embed-Code des Chatbots ist ein einzelner Script-Tag ohne das <div>:

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

Das ist der einzige Code, den Sie benötigen. Die folgenden Abschnitte zeigen pro Plattform, wo Sie ihn einfügen.

Schützen Sie Ihren API key

Der Embed-Code enthält einen API-Schlüssel. Bei Widgets ist das der eigene Schlüssel des Widgets, im Dashboard erzeugt und nur für dieses eine Widget gültig — fügen Sie niemals Ihren Haupt-API-Schlüssel in eine Webseite ein. Tragen Sie die Domains Ihrer Website unter Erlaubte Domains ein, damit der Schlüssel nur dort funktioniert (inklusive der www.-Variante), und beschränken Sie den Chatbot unter Chatbots → Security auf Ihre eigenen Domains.

WordPress ​

Option A: Custom-HTML-Block (empfohlen) ​

  1. Bearbeiten Sie die Seite oder den Beitrag, auf der bzw. dem das Widget erscheinen soll.
  2. Klicken Sie auf die Schaltfläche +, um einen Block hinzuzufügen, und suchen Sie nach Custom HTML.
  3. Fügen Sie den Embed-Code in den Block ein.
  4. Klicken Sie auf Preview, um das Ergebnis zu prüfen, und anschließend auf Update oder Publish.

Option B: Websiteweit (für den Chatbot) ​

So zeigen Sie den Chatbot auf jeder Seite an:

  1. Installieren Sie ein leichtgewichtiges Header/Footer-Plugin wie WPCode, oder nutzen Sie die "custom scripts"-Option Ihres Themes — das Bearbeiten von Theme-Dateien ist nicht nötig.
  2. Fügen Sie den Embed-Code des Chatbots in den Abschnitt Footer (vor </body>) ein.
  3. Speichern Sie. Die Chatbot-Blase erscheint nun auf jeder Seite.

Elementor

Sie verwenden Elementor? Fügen Sie Ihrer Seite ein HTML-Widget hinzu und fügen Sie den Embed-Code dort ein.

Wix ​

  1. Klicken Sie im Wix-Editor in der linken Seitenleiste auf Add Elements (die Schaltfläche +).
  2. Wählen Sie Embed Code → Embed HTML.
  3. Klicken Sie auf Enter Code und fügen Sie den Embed-Code ein.
  4. Klicken Sie auf Apply und ziehen bzw. skalieren Sie den Rahmen, damit das Widget hineinpasst.
  5. Klicken Sie auf Publish.

Chatbot auf Wix

Wix rendert eingebettetes HTML innerhalb eines Rahmens, wodurch die Chatbot-Blase auf diesen Rahmen beschränkt bleibt. Für einen websiteweiten Chatbot verwenden Sie stattdessen Settings → Custom Code (erfordert einen kostenpflichtigen Wix-Tarif): Fügen Sie den Embed-Code des Chatbots ein und stellen Sie ihn so ein, dass er auf All pages geladen wird, platziert im Body - end.

Squarespace ​

  1. Bearbeiten Sie die Seite, auf der das Widget erscheinen soll.
  2. Klicken Sie auf einen Einfügepunkt und wählen Sie den Block Code.
  3. Fügen Sie den Embed-Code ein (behalten Sie den Standardmodus HTML bei).
  4. Speichern Sie die Seite.

Für einen websiteweiten Chatbot gehen Sie zu Settings → Advanced → Code Injection und fügen den Embed-Code des Chatbots in das Feld Footer ein.

WARNING

Code-Blöcke und Code Injection erfordern einen Squarespace-Tarif Business oder höher.

Shopify ​

  1. Gehen Sie im Shopify-Adminbereich zu Online Store → Themes.
  2. Klicken Sie bei Ihrem aktuellen Theme auf Customize.
  3. Fügen Sie der Seite, auf der das Widget erscheinen soll, eine Custom Liquid-Sektion hinzu (oder einen HTML-Block, je nach Theme).
  4. Fügen Sie den Embed-Code ein und klicken Sie auf Save.

Für einen websiteweiten Chatbot:

  1. Gehen Sie zu Online Store → Themes → ⋯ → Edit code.
  2. Öffnen Sie layout/theme.liquid.
  3. Fügen Sie den Embed-Code des Chatbots direkt vor dem schließenden </body>-Tag ein.
  4. Klicken Sie auf Save.

Webflow ​

  1. Ziehen Sie im Webflow-Designer ein Embed-Element (aus Add Elements → Components) auf Ihre Seite.
  2. Fügen Sie den Embed-Code in den Code-Editor ein und klicken Sie auf Save & Close.
  3. Veröffentlichen Sie Ihre Website. Benutzerdefinierter Code wird nur auf der veröffentlichten Website ausgeführt, nicht in der Vorschau des Designers.

Für einen websiteweiten Chatbot gehen Sie zu Site Settings → Custom Code und fügen den Embed-Code des Chatbots in das Feld Footer Code ein.

WARNING

Benutzerdefinierter Code in Webflow erfordert einen kostenpflichtigen Site-Tarif.

Jede andere Website ​

Wenn Sie (oder Ihr Webentwickler) das HTML direkt verwalten:

  1. Öffnen Sie die HTML-Datei oder das Template der Seite.
  2. Fügen Sie den Embed-Code des Widgets an der Stelle der Seite ein, an der das Widget erscheinen soll.
  3. Für den Chatbot fügen Sie dessen Embed-Code direkt vor dem schließenden </body>-Tag ein — er erscheint als schwebende Blase, daher spielt seine Position im HTML keine Rolle.

Fehlerbehebung ​

Der Widget-Bereich bleibt leer. Prüfen Sie, ob beide Teile des Embed-Codes eingefügt wurden: der <script>-Tag und das <div> darunter. Manche Page-Builder entfernen einen der beiden.

"Invalid API key" oder es lädt nichts. Der API key im Embed-Code wurde möglicherweise widerrufen oder ihm fehlen die richtigen Berechtigungen. Kopieren Sie einen frischen Embed-Code aus dem Tab Embed im Dashboard.

Der Chatbot erscheint nicht auf meiner veröffentlichten Website. Wenn Sie den Chatbot auf bestimmte Domains beschränkt haben (Chatbots → Security → Allowed domains), stellen Sie sicher, dass die Domain Ihrer Website auf der Liste steht — einschließlich der www.-Variante, falls Ihre Website diese verwendet.

Das Widget sieht anders aus als in der Vorschau. Das Styling stammt aus der Dashboard-Konfiguration und wird mit dem Widget geladen. Wenn Sie das Design kürzlich geändert haben, laden Sie die Seite mit einem Hard-Refresh neu (Ctrl+Shift+R / Cmd+Shift+R), um den Browser-Cache zu umgehen.

Es funktioniert auf dem Desktop, aber nicht in der Webview meiner App. Der Embed-Code lädt JavaScript und CSS von widgets.astroapi.cloud und ruft api.astroapi.cloud auf. Stellen Sie sicher, dass die Sicherheitsrichtlinie (CSP) Ihrer App oder Website beide Domains zulässt.

Das Widget ignoriert den Dunkelmodus meiner Seite. Stellen Sie das Widget-Theme im Dashboard auf Automatisch. Das Widget folgt dann der Systemeinstellung des Besuchers; Hell und Dunkel sind fest.

Nächste Schritte ​

AstroAPI Documentation

Copyright © 2026 AstroAPI