Zum Inhalt springen
Kostenlos testen
Alle Anleitungen

Widget einbetten

Der Einbett-Code ist eine einzige Zeile. Sie kopieren diese Zeile in Ihrem RapidTools-Konto und fügen sie an der Stelle Ihrer Website ein, an der das Widget erscheinen soll. Programmieren müssen Sie dafür nichts. Sie brauchen nur ein Feld in Ihrem Website-System, in das man eigenen HTML-Code einfügen darf — jedes gängige System hat so ein Feld.

Den Einbett-Code holen

  1. Melden Sie sich mit Ihrer E-Mail-Adresse und Ihrem Passwort an.
  2. Sie landen in der Übersicht mit Ihren Widgets. Klicken Sie in der Zeile des gewünschten Widgets auf Einbetten.
    Noch kein Widget angelegt? Tragen Sie beim passenden Modul einen Namen ein (zum Beispiel „Terminbuchung Startseite“) und klicken Sie auf Neues Widget anlegen.
  3. Unter der Überschrift Einbettungs-Code steht Ihre Zeile. Klicken Sie rechts daneben auf Kopieren — die Schaltfläche wechselt kurz auf Kopiert ✓. Der Code liegt jetzt in der Zwischenablage.

Die Zeile sieht so aus:

<script src="https://tools.rapidspark.de/embed.js" data-widget="IHR-SCHLÜSSEL" async></script>

An der Stelle von IHR-SCHLÜSSEL steht in Ihrem Code eine Zeichenfolge, die nur zu diesem einen Widget gehört. Sie finden dieselbe Zeichenfolge in der Übersicht in der Spalte Schlüssel. Jedes Widget hat einen eigenen Schlüssel.

Tipp: Kopieren Sie den Code immer frisch aus Ihrem Konto und tippen Sie ihn niemals ab. Ein einziges falsches oder fehlendes Zeichen genügt, und das Widget erscheint nicht.

Wohin gehört der Code?

Genau an die Stelle, an der das Widget später zu sehen sein soll. Steht der Code unter Ihrem Text „Termin vereinbaren“, erscheint das Widget unter diesem Text. Sie können den Code auf beliebig vielen Seiten einsetzen — und auch mehrfach auf derselben Seite.

Das Widget lädt in einem eigenen Rahmen und passt seine Höhe automatisch an den Inhalt an. Sie müssen also keine Breite und keine Höhe angeben. Nur der Banner-Modus verhält sich anders, dazu weiter unten mehr.

Was die einzelnen Angaben bedeuten

AngabeBedeutung
srcAdresse unseres Lade-Skripts. Bitte nicht verändern.
data-widgetDer Schlüssel Ihres Widgets. Bestimmt, welches Widget angezeigt wird.
asyncSorgt dafür, dass Ihre Seite nicht auf das Widget warten muss.
data-mode="banner"Optional. Hängt das Widget ganz oben auf der Seite ein (nur für das Hinweis-Banner sinnvoll).
data-title="…"Optional. Beschriftung des Rahmens für Screenreader, zum Beispiel data-title="Terminbuchung".

Bitte vorher prüfen: Nicht jeder Baukasten-Tarif erlaubt eigenen HTML-Code. Im kostenlosen Wix-Paket ist das Einbetten von HTML zum Beispiel gesperrt, und bei Squarespace gibt es den Code-Block üblicherweise erst ab dem Business-Tarif. Wenn Sie das entsprechende Element in Ihrem Editor nicht finden, liegt es meist am Tarif — ein Blick in Ihre Vertragsdaten klärt das schnell.

WordPress

Im heutigen WordPress (Block-Editor, auch „Gutenberg“ genannt):

  1. Öffnen Sie die Seite oder den Beitrag und klicken Sie auf Bearbeiten.
  2. Klicken Sie an die Stelle, an der das Widget stehen soll, und dann auf das Plus-Zeichen (+) zum Hinzufügen eines Blocks.
  3. Tippen Sie ins Suchfeld HTML und wählen Sie den Block Individuelles HTML.
  4. Fügen Sie den kopierten Code in das Feld ein (Strg+V, am Mac Cmd+V).
  5. Klicken Sie oben rechts auf Aktualisieren beziehungsweise Veröffentlichen.
  6. Öffnen Sie die Seite ganz normal im Browser. Erst dort sehen Sie das fertige Widget.

Im Editor selbst zeigt der Block nur den Code-Text an — das ist richtig so. Über dem Block können Sie auf Vorschau umschalten, um das Widget schon im Editor zu sehen.

Nutzen Sie noch den klassischen Editor? Dann schalten Sie im Textfeld oben rechts von Visuell auf Text um, fügen den Code dort ein und speichern. Wichtig: Wechseln Sie danach nicht wieder auf Visuell, bevor Sie gespeichert haben — der visuelle Editor entfernt solchen Code sonst gerne wieder.

Wix

  1. Öffnen Sie Ihre Seite im Wix-Editor.
  2. Klicken Sie links auf Elemente hinzufügen (das Plus-Zeichen) und wählen Sie den Bereich Einbetten.
  3. Wählen Sie HTML-Code einbetten. Auf der Seite erscheint ein leerer Kasten.
  4. Schieben Sie den Kasten an die gewünschte Stelle und klicken Sie darauf, dann auf Code eingeben.
  5. Fügen Sie den Code ein, achten Sie darauf, dass oben Code (nicht „Website-Adresse“) ausgewählt ist, und klicken Sie auf Übernehmen.
  6. Klicken Sie oben rechts auf Veröffentlichen.

Wichtig bei Wix: Der Kasten für eigenen HTML-Code hat eine feste Größe und wächst nicht automatisch mit. Wenn unten etwas abgeschnitten ist oder ein Rollbalken erscheint, ziehen Sie den Kasten im Editor an den Ecken einfach größer.

Jimdo

  1. Öffnen Sie Ihre Seite im Bearbeitungsmodus.
  2. Fahren Sie mit der Maus an die Stelle, an der das Widget stehen soll, und klicken Sie auf Inhalt hinzufügen (das Plus-Zeichen zwischen zwei Elementen).
  3. Wählen Sie Weitere Inhalte & Add-ons und darin das Element Widget/HTML.
  4. Fügen Sie den Code in das Textfeld ein und klicken Sie auf Speichern.
  5. Speichern beziehungsweise veröffentlichen Sie die Seite und sehen Sie sich das Ergebnis im normalen Browserfenster an.

IONOS MyWebsite

  1. Melden Sie sich bei IONOS an und öffnen Sie Ihre Website im Bearbeitungsmodus.
  2. Öffnen Sie die Element-Auswahl (Elemente hinzufügen beziehungsweise Inhalte) und suchen Sie dort im Bereich für erweiterte Elemente das Element HTML — je nach Version heißt es HTML-Code oder eigener HTML-Code.
  3. Ziehen Sie das Element an die gewünschte Stelle auf der Seite.
  4. Fügen Sie den Code in das Eingabefeld ein und bestätigen Sie mit Übernehmen beziehungsweise Speichern.
  5. Klicken Sie zum Schluss auf Veröffentlichen. Ohne diesen Schritt sehen Ihre Besucher die Änderung nicht.

Squarespace

  1. Öffnen Sie die Seite und klicken Sie auf Bearbeiten.
  2. Fahren Sie an die gewünschte Stelle, bis der Einfügepunkt mit dem Plus-Zeichen (+) erscheint, und klicken Sie darauf.
  3. Wählen Sie den Block Code.
  4. Löschen Sie den Beispieltext im Feld vollständig und fügen Sie Ihren Code ein. Achten Sie darauf, dass als Sprache HTML eingestellt ist und Als Text anzeigen nicht angehakt ist.
  5. Klicken Sie neben den Block und dann oben auf Speichern.

Im Editor bleibt der Kasten oft leer — das ist normal. Sehen Sie sich die Seite über die Vorschau oder im normalen Browserfenster an.

Webflow

Webflow ist auf Englisch, deshalb hier die englischen Bezeichnungen:

  1. Öffnen Sie die Seite im Designer.
  2. Klicken Sie links oben auf Add elements (das Plus-Zeichen) und ziehen Sie aus dem Bereich Advanced das Element Embed an die gewünschte Stelle.
  3. Im Code-Fenster fügen Sie Ihren Einbett-Code ein und klicken auf Save & Close.
  4. Klicken Sie oben rechts auf Publish. Im Designer wird das Widget nicht ausgeführt — erst auf der veröffentlichten Seite sehen Sie es.

Eigene HTML-Seite

Haben Sie eine ganz normale HTML-Datei (zum Beispiel index.html), fügen Sie die Zeile einfach an der passenden Stelle zwischen <body> und </body> ein:

<h2>Termin vereinbaren</h2>
<p>Wählen Sie einfach einen freien Termin aus:</p>

<script src="https://tools.rapidspark.de/embed.js" data-widget="IHR-SCHLÜSSEL" async></script>

Danach speichern und die Datei wie gewohnt auf Ihren Webspace übertragen (per FTP oder über den Datei-Manager Ihres Anbieters). Es ist keine weitere Datei nötig, nichts muss installiert werden.

Widget erscheint nicht?

Gehen Sie diese Punkte der Reihe nach durch — in fast allen Fällen ist einer davon die Ursache.

  1. Ist der Code vollständig? Er muss mit <script beginnen und mit </script> enden. Wurde beim Kopieren nur ein Teil erwischt, passiert nichts. Am besten löschen, neu kopieren, neu einfügen.
  2. Wurde die Seite veröffentlicht? Baukästen zeigen Änderungen erst nach einem Klick auf Veröffentlichen beziehungsweise Aktualisieren.
  3. Steht der Code im richtigen Feld? Wird der Code als Text auf der Seite angezeigt, wurde er in ein normales Textfeld eingefügt. Er gehört in ein HTML- oder Code-Element.
  4. Ist das Widget aktiv? In der Übersicht muss in der Spalte Status ein grünes Aktiv stehen. Steht dort Inaktiv, klicken Sie in derselben Zeile auf Aktivieren.
  5. Stimmt der Schlüssel? Vergleichen Sie den Wert hinter data-widget mit der Spalte Schlüssel in der Übersicht. Groß- und Kleinschreibung zählt.
  6. Funktioniert das Widget für sich allein? Öffnen Sie auf der Seite Einbetten den Direktlink zum Widget. Erscheint es dort, ist das Widget in Ordnung und die Ursache liegt bei der Einbettung. Erscheint es dort nicht, schreiben Sie uns.
  7. Zwischenspeicher leeren. Laden Sie die Seite mit Strg+F5 (am Mac Cmd+Shift+R) neu. Nutzen Sie in WordPress ein Caching-Plugin oder bei Ihrem Anbieter einen Beschleuniger, leeren Sie dort zusätzlich den Cache.
  8. Testphase oder Abo abgelaufen? Nach Ende der Testphase werden Widgets nicht mehr ausgeliefert, bis ein Abo aktiv ist. Das sehen Sie in Ihrem Konto unter Abo.
  9. Werbeblocker. Sehr strenge Browser-Erweiterungen blockieren manchmal eingebettete Inhalte. Probieren Sie die Seite in einem privaten Fenster oder einem anderen Browser.

Bleibt es dabei, schreiben Sie uns an tools@rapidspark.de und nennen Sie uns die Adresse der Seite, auf der das Widget stehen soll. Wir sehen es uns an.

Mehrere Widgets auf einer Seite

Das funktioniert ohne Zusatzaufwand: Für jedes Widget fügen Sie genau ein Snippet an der Stelle ein, an der es erscheinen soll — jeweils mit dem eigenen Schlüssel.

<script src="https://tools.rapidspark.de/embed.js" data-widget="SCHLÜSSEL-TERMINE" async></script>
<script src="https://tools.rapidspark.de/embed.js" data-widget="SCHLÜSSEL-RÜCKRUF" async></script>

Dass die Adresse zu embed.js mehrfach vorkommt, ist beabsichtigt und stört nicht: Das Lade-Skript wird nur einmal wirklich geladen. Sie dürfen auch dasselbe Widget zweimal auf einer Seite einbinden, etwa oben und unten.

Banner-Modus

Für das Modul Hinweis-Banner gibt es eine Sonderform. Ergänzen Sie im kopierten Code die Angabe data-mode="banner":

<script src="https://tools.rapidspark.de/embed.js" data-widget="IHR-SCHLÜSSEL" data-mode="banner" async></script>

Damit wird das Banner nicht an der Stelle des Codes eingefügt, sondern immer ganz oben auf der Seite — noch über Ihrem Logo und dem Menü. Das ist praktisch, weil Sie den Code dann an einer beliebigen, unauffälligen Stelle unterbringen können.

Am besten fügen Sie ihn dort ein, wo er auf allen Seiten wirkt: In den meisten Systemen gibt es dafür ein Feld für eigenen Code im Fuß- oder Kopfbereich (bei WordPress oft in den Theme-Einstellungen unter „Kopf- und Fußzeile“, ansonsten ein HTML-Element im Footer). So erscheint Ihr Urlaubshinweis mit einem Handgriff auf der ganzen Website.

Achtung: Lassen Sie data-mode="banner" weg, erscheint das Banner genau dort, wo der Code steht — bei einer Einbindung im Fußbereich also ganz unten, wo es kaum jemand sieht. Und umgekehrt: Verwenden Sie den Banner-Modus nur für das Hinweis-Banner. Eine Terminbuchung oder ein Formular ganz oben über dem Logo wirkt eher wie ein Fehler.

Mit einem KI-Agenten arbeiten

Unter Einbauen finden Sie beim jeweiligen Tool drei kopierbare Vorlagen: Tool einbauen, Optisch einpassen und Einbindung prüfen. Wählen Sie dort zuerst Ihr Website-System. Jede Vorlage enthält bereits den öffentlichen Code dieses Tools. Kopieren Sie sie in Ihren KI-Agenten und ergänzen Sie die Zielseite und Position.

RapidTools stellt nur den Text bereit und sendet ihn nicht an einen KI-Anbieter. Die Vorlagen berücksichtigen unter anderem mobile Darstellung, doppelte Einbindungen und die Trennung zwischen dem Layout Ihrer Website und den Design-Einstellungen im Widget.

Und danach?

Inhalte, Farben und Einstellungen ändern Sie jederzeit in Ihrem Konto — der Code auf Ihrer Website bleibt dabei unverändert. Sie müssen also nie wieder etwas an Ihrer Website anfassen, nur weil sich Ihre Öffnungszeiten, Preise oder Texte geändert haben.

Alle Anleitungen · Noch Fragen? Schreiben Sie uns: tools@rapidspark.de