Skip to main content
Eine eigene Website ist heute für fast jedes Angebot selbstverständlich. Das anny Widget ermöglicht es dir, deine Buchungsseite oder einzelne Ressourcen direkt dort einzubetten, wo deine Kund:innen bereits sind – sie müssen deine Website nicht verlassen, um zu buchen. Technisch funktioniert das über einen iFrame, der in zwei Schritten eingebunden wird: zuerst ein globales Script, dann die eigentliche Komponente an der gewünschten Stelle. Du konfigurierst das Widget einmalig in anny und passt es an dein Design an. Deine Website zeigt dann immer den aktuellen Stand.

​
Was du am Ende eingerichtet hast

  • Das globale Widget-Script ist auf deiner Website eingebunden
  • Du hast das Widget auf Organisations- oder Ressourcenebene konfiguriert
  • Das Design ist an deine Corporate Identity angepasst
  • Das Widget ist an der gewünschten Stelle platziert und getestet

​
Schritt 1: Widget-Ebene und -Typ wählen

Du kannst das Widget auf zwei Ebenen einbetten. Entscheide zuerst, was du zeigen möchtest. Gesamte Buchungsseite (Organisation → Einstellungen → Buchungsseite) Sinnvoll, wenn du mehrere Ressourcen hast, die durchsuchbar sein sollen. Hier konfigurierst du auch globale Komponenten wie den Login-Button und den Warenkorb-Button. Image Einzelne Ressource (Ressourcen → Ressource auswählen → Buchungsseite) Sinnvoll, wenn du gezielt eine Ressource einbetten möchtest, z. B. ein Erstgespräch auf einer Landingpage. Image Innerhalb jeder Ebene gibt es verschiedene Widget-Typen:

​
Welche Widgets gibt es?

​
Seiten-Widgets

​
Panel-Widgets

​
Button-Widgets

​
Globale Hilfs-Widgets

​
Schritt 2: Script global laden

Füge das Widget-Bundle einmalig in den <head> deiner Website ein.
Wenn du das Widget nur auf einer einzigen Seite verwendest, kannst du das Script auch direkt oberhalb der Komponente auf dieser Seite einfügen.

​
Schritt 3: Einstellungen prüfen und Snippet einfügen

Öffne die Buchungsseite der entsprechenden Ebene im Admin, wähle die gewünschte Komponente und konfiguriere die Optionen. Auf Organisationsebene (Seiten-Widget) stehen u. a. folgende Einstellungen zur Verfügung:
  • Header auf Organisations-/Ressourcenseite ausblenden
  • Filter und Kartenumschalter ausblenden
  • Standard-Reiter und Standard-Ansicht (z. B. Raster)
  • Kategorie zur Vorfilterung
  • Widget-Höhe und Navbar-Höhe
Auf Ressourcenebene (Seiten-Widget) stehen u. a. folgende Einstellungen zur Verfügung:
  • Header auf Ressourcen-/Organisationsseite ausblenden
  • Vorausgewählter Service
  • Widget-Höhe und Navbar-Höhe
Kopiere dann den generierten Einbettungscode und füge die Komponente an der Stelle ein, an der sie auf deiner Website erscheinen soll. Beispiel für ein ganzseitiges Widget auf Organisationsebene:
Beispiel für ein eingebettetes Booking-Panel:
Beispiel für einen Button-Widget:

​
Schritt 4: Design anpassen

Navigiere zu Organisation → Einstellungen → Buchungsseite und öffne das Design-Panel über „Design anpassen”. Dort kannst du einstellen:
  • Primary Color und Secondary Color
  • Text- und Hintergrundfarbe
  • Input-Hintergrund und Rahmenfarbe
  • Eckenradius (abgerundet oder eckig)
  • Logo für die Lade-Animation
anny speichert das Design für den gesamten Account – du musst es nicht pro Ressource neu einstellen. In der Live-Vorschau siehst du deine Änderungen sofort.

​
Schritt 5: Testen

Öffne die Seite im Browser und prüfe:
  • Widget lädt und zeigt Inhalte an
  • Buchungsflow lässt sich vollständig durchführen
  • Design passt zur restlichen Seite
  • Auf mobilen Viewports ist das Layout korrekt
  • Login- und Warenkorb-Button (falls verwendet) sind sichtbar und funktionieren

​
Checkliste

  • Script global im Header eingebunden
  • Widget auf Account- oder Ressourcenebene konfiguriert
  • Komponente an der richtigen Stelle auf der Website platziert
  • Design angepasst und gespeichert
  • Widget getestet und Buchungsflow geprüft