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.
Einzelne Ressource (Ressourcen → Ressource auswählen → Buchungsseite) Sinnvoll, wenn du gezielt eine Ressource einbetten möchtest, z. B. ein Erstgespräch auf einer Landingpage.
Innerhalb jeder Ebene gibt es verschiedene Widget-Typen:
Typ | Wann verwenden |
Seiten-Widget | Buchung ist der Hauptinhalt der Seite |
Panel-Widget | Du hast eigenen Inhalt und willst nur den Buchungsfluss einbetten |
Button-Widget | Buchung soll sich per Klick in einem Modal öffnen |
Globale Hilfs-Widgets | Login und Warenkorb im Site-Header |
Welche Widgets gibt es?
Seiten-Widgets
Widget | Am besten für |
| Vollständige Buchungsseite mit Tabs, Filtern, optionaler Karte/Kalender |
| Karten-orientiertes Organization-Erlebnis |
| Kalender-orientiertes Organization-Erlebnis |
| Vollständige Ressource-Detail- und Buchungsseite |
| Ressource-Karte oder Sitzplan-/Grundrissansicht |
| Ressource-Kalenderansicht |
| Vollständige Service-Detail- und Buchungsseite |
| Subscription-Detail und Checkout |
| Package-Detail und Checkout |
| Buchungsübersicht des eingeloggten Nutzers |
Panel-Widgets
Widget | Am besten für |
| Nur den Buchungsfluss für eine Ressource einbetten |
| Nur den Buchungsfluss für einen Service einbetten |
Button-Widgets
Widget | Am besten für |
| Organization-Explore in einem Modal öffnen |
| Ressource-Buchung in einem Modal öffnen |
| Service-Buchung in einem Modal öffnen |
| Subscription-Checkout in einem Modal öffnen |
| Package-Checkout in einem Modal öffnen |
Globale Hilfs-Widgets
Widget | Am besten für |
| Warenkorb-Trigger mit Live-Badge |
| Login/Logout mit gemeinsamem Auth-Zustand |
Schritt 2: Script global laden
Füge das Widget-Bundle einmalig in den <head> deiner Website ein.
<script src="https://cdn.anny.co/widget/annyComponents.umd.latest.min.js"></script>
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:
<a-organization-page
base-url="https://anny.co"
organization="my-org"
fullscreen="true"
nav-height="64px"
></a-organization-page>
Beispiel für ein eingebettetes Booking-Panel:
<a-resource-booking-panel
base-url="https://anny.co"
resource="my-resource"
></a-resource-booking-panel>
Beispiel für einen Button-Widget:
<a-resource-button
base-url="https://anny.co"
resource="my-resource"
modal-layout="drawer"
></a-resource-button>
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
Nächste Schritte
Website-Widgets Advanced – Flexiblere Einbettungsoptionen für fortgeschrittene Anwendungsfälle
Ressource konfigurieren – Ressourcen und Services weiter einrichten
Karten: Interaktive Lagepläne mit anny – Lagepläne im Widget anzeigen
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