Wenn du Routing-Formulare auf deiner Website einbettest, bleiben Besucher auf deiner Seite, während sie Qualifizierungsfragen beantworten und Termine buchen. Statt zu Zeeg weitergeleitet zu werden, erscheint das Formular direkt auf deiner Webseite – für ein nahtloses Buchungserlebnis, das zu deiner Marke passt.
Eigene Farben für eingebettete Formulare sind nur in Tarifen verfügbar, die sie enthalten. In anderen Tarifen sind die Farbeinstellungen gesperrt, die Einbettung verwendet die Standardfarben und neben den Einstellungen erscheint ein Upgrade-Button.
Warum Routing-Formulare auf deiner Website einbetten?
Wenn du dein Routing-Formular direkt auf deiner Website einbettest, hast du mehrere Vorteile:
Besucher bleiben auf deiner Seite: Keine Weiterleitungen auf externe Seiten bedeuten ein reibungsloseres Nutzungserlebnis
Deine Marke bleibt erhalten: Das Formular fügt sich nahtlos in das Design deiner Website ein
Höhere Konversionsraten: Besucher schließen eine Buchung eher ab, wenn sie auf deiner Seite bleiben
Professioneller Auftritt: Eingebettete Formulare wirken wie ein Teil deiner Website und nicht wie ein Angebot eines Drittanbieters
So bettest du ein Routing-Formular auf deiner Website ein
1. Das richtige Routing-Formular aufrufen
Wähle in deinem Zeeg-Dashboard im linken Menü unter dem Bereich Interaktion Routing-Formulare aus.
Suche das Routing-Formular, das du einbetten möchtest, und klicke auf Teilen.
2. Die Website-Optionen öffnen
Das Teilen-Fenster öffnet sich mit dem Link zu deinem Formular und einer Reihe von Buttons: Website, E-Mail, QR-Code, Link in Bio und Social Media. Klicke auf Website. Der Bildschirm Zur Website hinzufügen öffnet sich mit einer Live-Vorschau deines Formulars auf einer Beispielwebseite. Mit dem Zurück-Pfeil oben links kommst du zurück ins Teilen-Fenster.
3. Die Einbettungsoption wählen
Oben rechts im Bildschirm Zur Website hinzufügen wechselst du zwischen den drei Einbettungsoptionen. Zuerst ist Inline-Einbettung ausgewählt. Die Vorschau ändert sich, wenn du wechselst:
Inline-Einbettung: Zeigt das Formular direkt auf deiner Webseite an
Popup-Button: Zeigt einen Button an, der das Formular beim Klicken in einem Popup öffnet
Popup-Text: Erstellt einen Textlink, der das Formular in einem Popup öffnet
4. Das Erscheinungsbild des Formulars anpassen
Die Einstellungen findest du auf der rechten Seite des Bildschirms. Die Live-Vorschau aktualisiert sich, sobald du etwas änderst:
Button (nur Popup-Button): Lege den Button-Text, die Hintergrundfarbe des Buttons und die Textfarbe des Buttons fest. Der Button-Text lautet „Formular öffnen“, bis du ihn änderst.
Link (nur Popup-Text): Lege den Link-Text fest, auf den Besucher klicken, um das Formular zu öffnen.
Farben: Lege die Hintergrundfarbe (Hintergrund des Formulars), die Textfarbe (Farbe des Textes im Formular) und die Primäre Farbe (Farbe von Buttons und interaktiven Elementen) fest.
Glas-Effekt: Schalte ihn ein, damit der Hintergrund des Formulars transparent mit einem milchglasartigen Unschärfe-Effekt dargestellt wird und deine Website durchscheint.
Wähle Farben, die zum Design deiner Website passen, damit alles stimmig aussieht. Wenn die Farbeinstellungen gesperrt sind, siehst du einen Upgrade-Button. Bis du upgradest, verwendet die Einbettung die Standardfarben.
5. Den Einbettungscode kopieren
Wenn du mit deinen Anpassungen zufrieden bist, klicke unten rechts im Bildschirm auf Kopieren. Der Button wechselt kurz zu Kopiert. Wenn du den Code zuerst ansehen möchtest, klicke unten links auf Code: Der Einbettungscode öffnet sich über der Vorschau, mit einem eigenen Kopieren-Button.
6. Den Code auf deiner Website einfügen
Füge jetzt den kopierten Code in deine Website ein:
Öffne deinen Website-Baukasten oder dein Content-Management-System (CMS)
Rufe die Seite auf, auf der das Routing-Formular erscheinen soll
Füge ein Custom HTML- oder Code-Element bzw. -Block hinzu (die genaue Bezeichnung hängt von der Plattform ab)
Füge den Einbettungscode ein, den du aus Zeeg kopiert hast
Speichere und veröffentliche deine Seite
Wohin genau der Code gehört, hängt von der Einbettungsoption ab: Bei der Inline-Einbettung fügst du ihn dort ein, wo das Formular auf deiner Seite erscheinen soll. Beim Popup-Button und beim Popup-Text fügst du ihn vor dem schließenden body-Tag deiner Seite ein.
Die Einbettungsoptionen im Überblick
Inline-Einbettung
Das Formular wird direkt im Inhalt deiner Webseite angezeigt und wirkt wie ein natürlicher Teil der Seite. Das eignet sich ideal für:
Eigene Landingpages
Kontaktseiten
Leistungsseiten, auf denen Besucher sofort buchen können sollen
Popup-Button
Auf deiner Seite erscheint ein anpassbarer Button. Wenn Besucher darauf klicken, öffnet sich das Formular in einem Popup-Overlay. Perfekt für:
Buchungen auf mehreren Seiten, ohne viel Platz zu brauchen
Ein aufgeräumtes Seitenlayout
Mehr Kontrolle für Besucher darüber, wann sie aktiv werden
Popup-Text
Ähnlich wie der Popup-Button, nutzt aber einen Textlink. Das Formular öffnet sich in einem Popup, sobald auf den Link geklickt wird. Ideal für:
Die Einbettung in bestehende Textinhalte
Dezente Handlungsaufforderungen in Absätzen
Navigationsmenüs oder Footer
Anleitungen für einzelne Plattformen
WordPress
Füge dort, wo das Formular erscheinen soll, einen Custom HTML-Block hinzu
Füge den Einbettungscode ein
Prüfe die Vorschau und veröffentliche die Seite
Wix
Füge über das Hinzufügen-Menü ein Embed Code-Element hinzu
Füge deinen Code im Bereich Code ein
Passe Größe und Position bei Bedarf an
Squarespace
Füge deiner Seite einen Code Block hinzu
Füge den Einbettungscode ein
Speichere und veröffentliche die Seite
Webflow
Füge ein Embed-Element hinzu
Füge den Code ein
Veröffentliche deine Website
Andere Plattformen
Die meisten Website-Baukästen unterstützen eigene HTML-/Code-Elemente. Suche in deinem Editor nach Optionen wie „Custom Code“, „HTML Block“, „Embed“ oder „Code Injection“.
Tipps für eine erfolgreiche Einbettung
Auf dem Smartphone testen: Sieh dir dein eingebettetes Formular immer auch auf mobilen Geräten an, damit es richtig dargestellt wird
Zu deiner Marke passen: Wähle Farben, die zum Farbschema deiner Website passen
Gezielte Platzierung: Platziere das Formular dort, wo Besucher ganz natürlich nach Buchungsmöglichkeiten suchen
Klarer Kontext: Füge über dem Formular eine Überschrift oder Beschreibung hinzu, die erklärt, was Besucher tun sollen
Den Ablauf testen: Buche einen Testtermin, um sicherzustellen, dass die Routing-Logik nach der Einbettung korrekt funktioniert
Fehlerbehebung
Das Formular wird nicht angezeigt?
Prüfe, ob der Code vollständig und ohne fehlende Zeichen eingefügt wurde
Prüfe, ob dein Website-Baukasten eigenes HTML/JavaScript erlaubt
Stelle sicher, dass es keine Konflikte mit anderen Skripten auf deiner Seite gibt
Das Formular erscheint zu groß oder zu klein?
Passe die Höhen- und Breitenwerte im Einbettungscode an
Die meisten Plattformen erlauben es, eingebettete Elemente in der Größe zu ändern
Die Farben passen nicht zu meiner Website?
Klicke bei deinem Routing-Formular auf Teilen, dann auf Website, und lege deine Farben erneut fest
Kopiere den neuen Code und ersetze den alten Code auf deiner Website
Häufig gestellte Fragen
Warum sind die Farbeinstellungen ausgegraut?
Eigene Farben für eingebettete Formulare gehören nicht zu jedem Tarif. Wenn sie gesperrt sind, zeigt der Bereich Farben einen Hinweis und einen Upgrade-Button, und deine Einbettung verwendet die Standardfarben. Der Einbettungscode funktioniert trotzdem.
Werden meine Farbeinstellungen gespeichert, wenn ich das Fenster schließe?
Nein. Der Bildschirm Zur Website hinzufügen startet bei jedem Öffnen mit den Standardfarben. Kopiere den Code, sobald du mit deinen Einstellungen zufrieden bist. Wenn du später ein anderes Aussehen brauchst, öffne Website erneut, lege deine Farben fest und ersetze den Code auf deiner Website.
Muss ich den Code nach einer Änderung von Farben oder Text erneut kopieren?
Ja. Die Farben sowie der Button- oder Link-Text sind Teil des Einbettungscodes. Kopiere also den aktualisierten Code und ersetze den alten auf deiner Website.