Amira van Weegen
Marketing Manager
28.05.2026
Buchungssystem in Website einbetten: So nutzt du anny Widgets für mehr Online-Buchungen
5 Min.
Einleitung
Stell dir vor: Ein potenzieller Kunde landet auf deiner Website, ist vom Angebot überzeugt und will sofort buchen. Doch statt eines direkten Buchungsformulars findet er ein Kontaktformular, eine E-Mail-Adresse oder einen Button, der ihn auf eine externe Seite weiterleitet. Der Moment der Kaufentscheidung ist da und verpufft.
Dieses Szenario ist kein Einzelfall. Viele Betreiber von Co-Working-Spaces, Fitnessstudios, Sportzentren oder Veranstaltungslocations investieren Zeit und Geld in eine gute Website – und verlieren potenzielle Buchungen dennoch im letzten Schritt. Nicht weil das Angebot nicht stimmt, sondern weil der Weg zur Buchung einen Schritt zu viel hat.
Die gute Nachricht: Das lässt sich ändern. Wer sein Online-Buchungssystem direkt in die eigene Website einbettet, schließt genau diese Lücke. Nutzer buchen dort, wo sie ohnehin schon sind – ohne Weiterleitung, ohne Medienbruch. Wie das konkret funktioniert, welche Widget-Typen es gibt und worauf du bei der Einbettung achten solltest, zeigen wir dir in diesem Artikel.
Was ist ein anny Widget?
Ein Widget ist ein einbettbares Element, das eine externe Funktion – in diesem Fall dein komplettes Buchungssystem – direkt auf deiner Website abbildet. Besucher können also buchen, ohne deine Seite jemals verlassen zu müssen.
Widget vs. externer Buchungslink
Ein externer Link leitet Nutzer auf eine separate Buchungsseite weiter – mit neuem Tab, fremdem Design und einem spürbaren Bruch im Nutzererlebnis. Ein eingebettetes Widget hingegen integriert den gesamten Buchungsflow direkt auf deiner Seite: gleiche Optik, gleicher Kontext, deutlich weniger Abbrüche.
Technisch funktioniert die Einbettung über einen einfachen iframe- oder JavaScript-Snippet, den du in dein CMS einfügst, egal ob WordPress, Webflow, Squarespace oder eine eigene Website. Kein Entwickler notwendig, keine komplexe Konfiguration.
Die anny Widget-Familie: Welches Widget passt zu deinem Use Case?
anny bietet verschiedene Widget-Typen, die sich in drei Kategorien einteilen lassen – je nachdem, wie und wo du den Buchungsflow auf deiner Website einbinden möchtest:
Seiten-Widgets bilden den gesamten Buchungsbereich als vollständige Seite ab:
Widget | Am besten für |
|---|---|
Organization Page | Vollständige Buchungsseite mit Tabs, Filtern und Ressourcenübersicht |
Organization Calendar | Kalenderorientiertes Buchungserlebnis für die gesamte Organisation |
Resource Page | Detail- und Buchungsseite für eine einzelne Ressource |
Resource Calendar | Kalenderansicht für eine einzelne Ressource |
3D Map | Visuelle Flächennavigation mit buchbaren Bereichen |
Subscription Page | Mitgliedschaften & Abo-Pakete direkt abschließen |
Panel-Widgets eignen sich, wenn du eigenen Seiteninhalt hast und nur den Buchungsflow einbetten möchtest – z. B. auf einer Landingpage neben einem Beschreibungstext:
Widget | Am besten für |
|---|---|
Resource Booking Panel | Buchungsflow für eine einzelne Ressource |
Service Booking Panel | Buchungsflow für einen einzelnen Service |
Button-Widgets öffnen den Buchungsflow per Klick in einem Modal – ideal für Navigation, Hero-Bereiche oder als dezenter Call-to-Action:
Widget | Am besten für |
|---|---|
Organization Button | Gesamtes Angebot im Modal öffnen |
Resource / Service Button | Gezielt eine Ressource oder einen Service buchen |
Subscription Button | Mitgliedschaft direkt im Modal abschließen |
Globale Hilfs-Widgets runden das Erlebnis ab:
Login Button – ermöglicht Nutzer-Login direkt auf der Website
Cart Button – zeigt den Warenkorb mit Live-Badge in der Navigation
Eine vollständige Übersicht aller Widget-Typen mit technischen Details findest du im anny Helpcenter-Artikel zur Widget-Einbettung. Wie all diese Widgets in der Praxis aussehen und funktionieren, kannst du auf der Basecamp Demo-Seite live ausprobieren.
Schritt-für-Schritt: Buchungssystem in deine Website einbetten
Das Einbetten eines anny Widgets ist auch ohne technisches Vorwissen in wenigen Schritten erledigt:
1. anny Account erstellen: Bevor du loslegen kannst, brauchst du eine anny Buchungsseite. Falls du noch kein Konto hast, kannst du anny hier kostenlos testen und dein Buchungssystem in wenigen Minuten einrichten.
2. Widget-Ebene und -Typ wählen: Entscheide zunächst, was du einbetten möchtest: die gesamte Buchungsseite deiner Organisation oder eine einzelne Ressource. Wähle dann den passenden Widget-Typ – z. B. ein Seiten-Widget für eine vollständige Buchungsübersicht oder ein Panel-Widget, wenn du den Buchungsflow neben eigenem Content einbetten möchtest.
3. Widget im anny Dashboard konfigurieren: Navigiere im Admin-Bereich zur Buchungsseite der entsprechenden Ebene (Organisation oder Ressource). Dort wählst du die gewünschte Komponente aus und konfigurierst die verfügbaren Optionen – z. B. welche Filter angezeigt werden, welche Ressourcen sichtbar sind oder welche Standard-Ansicht geladen wird.
4. Design anpassen: Damit das Widget nicht wie ein Fremdkörper auf deiner Seite wirkt, passe es unter Organisation → Einstellungen → Buchungsseite → Design anpassen an deine Corporate Identity an: Primär- und Sekundärfarbe, Schrift- und Hintergrundfarben, Eckenradius und Logo. Das Design gilt für den gesamten Account – du musst es nicht für jede Ressource neu einstellen.
5. Einbettcode kopieren: anny generiert automatisch den passenden Einbettcode. Füge zunächst das globale Widget-Script einmalig in den <head> deiner Website ein, dann die eigentliche Widget-Komponente an der gewünschten Stelle.
6. In die Website einfügen: Füge den Code in dein CMS ein – egal ob WordPress, Webflow, Squarespace oder eine individuelle Website. Ein HTML-Block oder Embed-Element reicht aus; Entwicklerkenntnisse sind nicht notwendig.
7. Testen – auf Desktop und Mobile: Prüfe, ob das Widget korrekt lädt, der Buchungsflow vollständig durchführbar ist und das Layout auf mobilen Geräten stimmt. Gerade auf Smartphones zeigen sich häufige Darstellungsfehler, die auf dem Desktop unsichtbar bleiben.
8. Live schalten: Alles sieht gut aus? Dann veröffentliche die Änderung – dein Buchungssystem ist jetzt direkt in deine Website eingebettet.
🔗 Die vollständige technische Anleitung mit allen Konfigurationsoptionen findest du im anny Helpcenter-Artikel.
Diese Fehler kosten dich Buchungen und wie du sie vermeidest
Wer sein Buchungssystem einbettet, hat den wichtigsten Schritt bereits getan. Damit das Widget auch wirklich so funktioniert wie gewünscht, lohnt sich ein kurzer Blick auf die häufigsten Stolperstellen – die meisten lassen sich mit wenigen Handgriffen beheben:
Wrong Sizing
Das Widget ist zu groß oder zu klein für den vorgesehenen Container und wirkt dadurch unfertig.
So gehst du es an: Teste das Widget in seinem tatsächlichen Container und passe die Höhe explizit im anny Dashboard an.
Scroll in Scroll
Wenn das Widget einen eigenen Scrollbereich innerhalb der Seite erzeugt, entsteht ein doppeltes Scrollen – besonders auf mobilen Geräten störend.
So gehst du es an: Nutze die Fullscreen-Option oder setze die Widget-Höhe so, dass der gesamte Inhalt ohne internen Scroll sichtbar ist.
No Theming / Wrong Theming
Ein Widget ohne Design-Anpassung wirkt wie eine eingebettete Fremdsoftware und passt nicht zur restlichen Seite.
So gehst du es an: Passe Primärfarbe, Hintergrund, Schriftfarbe und Eckenradius konsequent an dein Corporate Design an.
Low Contrast
Zu geringer Farbkontrast zwischen Text und Hintergrund erschwert die Lesbarkeit.
So gehst du es an: Prüfe nach der Design-Anpassung alle Farbkombinationen auf ausreichenden Kontrast – ein einfacher Online-Kontrastcheck reicht dafür aus.
Redundant Content
Wird dieselbe Information doppelt ausgespielt – etwa der Name der Ressource im Widget-Header und erneut im Seitentext direkt darüber – entsteht Verwirrung.
So gehst du es an: Überlege, welche Informationen das Widget selbst liefert, und entferne doppelte Inhalte aus dem umliegenden Seitentext.
Multiple Inline
Mehrere großformatige Widgets auf einer Seite verlangsamen die Ladezeit und verwässern den Fokus. So gehst du es an: Setze pro Seite maximal ein primäres Inline-Widget ein – für weitere Angebote lieber auf separate Unterseiten oder Button-Widgets setzen.
Calendar Non-Fullscreen
Ein Kalender-Widget in einem zu kleinen Container wird auf mobilen Geräten schwer nutzbar.
So gehst du es an: Bette Kalender-Widgets grundsätzlich im Fullscreen-Modus oder in einem ausreichend großen Container ein und teste zwingend auf dem Smartphone.
Best Practices: So holst du das Maximum aus deinen anny Widgets heraus
Die technische Einbettung ist nur der erste Schritt. Ob das Widget tatsächlich zu mehr Buchungen führt, hängt maßgeblich davon ab, wie du es einsetzt und pflegst. Diese Grundregeln haben sich in der Praxis bewährt:
Nur das passende Widget für den jeweiligen Use Case: Ein Buchungs-Panel für einen einzelnen Raum braucht keinen vollständigen Kalender – und umgekehrt. Weniger ist hier fast immer mehr.
Mobile First testen: Der Großteil deiner Website-Besucher kommt heute vom Smartphone. Ein Widget, das auf dem Desktop perfekt aussieht, aber auf dem Handy Scroll-in-Scroll-Probleme erzeugt oder unlesbar klein wird, verfehlt seinen Zweck.
Platzierung entscheidet: Ein Widget, das tief in einer Unterseite versteckt ist, wird kaum jemand finden. Platziere den primären Buchungs-Einstiegspunkt – etwa einen Booking Button – prominent in der Navigation oder direkt im Hero-Bereich deiner Startseite.
Theming konsequent durchziehen: Farben, Schriftarten, Rundungen – je näher das Widget an deinem Corporate Design ist, desto mehr wirkt es wie ein integrierter Bestandteil deiner Website. Das schafft Vertrauen und senkt die Hemmschwelle zur Buchung.
Performance im Blick behalten: Nach dem Go-live lohnt es sich, regelmäßig zu prüfen, wie das Widget genutzt wird. Hilfreiche Fragen dabei:
Wie viele Nutzer starten den Buchungsflow – und wie viele schließen ihn ab?
An welcher Stelle im Prozess steigen Nutzer aus?
Lohnt sich das Widget auf der Startseite mehr als auf der Angebotsseite?
Fazit
Wer sein Buchungssystem in die eigene Website einbettet, gibt Interessenten genau das, was sie im entscheidenden Moment brauchen: einen direkten, reibungslosen Weg zur Buchung – ohne Umwege, ohne externe Seiten, ohne Medienbruch.
Die anny Widgets machen das technisch einfach umsetzbar, ohne Entwicklerkenntnisse vorauszusetzen. Entscheidend ist jedoch nicht nur die Einbettung selbst, sondern wie sie umgesetzt wird: das richtige Widget für den richtigen Use Case, sauberes Theming, mobile Optimierung und eine Platzierung, die Nutzer auch wirklich erreicht.
Bereit, dein eigenes Buchungssystem einzubetten? Vereinbare eine persönliche Demo und lass dich von unserem Team begleiten.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg"><path d="M 55.501 13.158 L 59.216 13.158 L 59.216 30.294 L 55.501 30.294 L 55.501 27.83 C 54.088 29.78 52.094 30.741 49.482 30.741 C 47.113 30.741 45.112 29.883 43.427 28.138 C 41.743 26.393 40.919 24.23 40.919 21.729 C 40.919 19.192 41.743 17.073 43.427 15.321 C 45.112 13.576 47.106 12.718 49.482 12.718 C 52.094 12.718 54.088 13.678 55.501 15.599 Z M 50.071 27.207 C 51.616 27.207 52.925 26.693 53.955 25.667 C 54.986 24.604 55.501 23.306 55.501 21.729 C 55.501 20.153 54.986 18.855 53.955 17.821 C 52.925 16.758 51.616 16.245 50.071 16.245 C 48.526 16.245 47.216 16.758 46.186 17.821 C 45.156 18.848 44.641 20.153 44.641 21.729 C 44.641 23.306 45.156 24.611 46.186 25.667 C 47.216 26.693 48.526 27.207 50.071 27.207 Z M 79.191 19.771 L 79.191 30.294 L 75.475 30.294 L 75.475 20.153 C 75.475 17.586 73.997 16.179 71.628 16.179 C 69.016 16.179 67.265 17.792 67.265 21.113 L 67.265 30.294 L 63.549 30.294 L 63.549 13.158 L 67.265 13.158 L 67.265 15.357 C 68.398 13.612 70.149 12.718 72.591 12.718 C 76.542 12.718 79.191 15.387 79.191 19.771 Z M 98.82 19.771 L 98.82 30.294 L 95.104 30.294 L 95.104 20.153 C 95.104 17.586 93.626 16.179 91.257 16.179 C 88.645 16.179 86.894 17.792 86.894 21.113 L 86.894 30.294 L 83.178 30.294 L 83.178 13.158 L 86.894 13.158 L 86.894 15.357 C 88.027 13.612 89.778 12.718 92.22 12.718 C 96.171 12.718 98.82 15.387 98.82 19.771 Z M 114.049 13.158 L 118 13.158 L 111.401 30.836 C 109.753 35.258 106.964 37.384 103.013 37.142 L 103.013 33.689 C 105.353 33.828 106.655 32.691 107.59 30.33 L 107.759 29.986 L 100.468 13.158 L 104.522 13.158 L 109.642 25.593 Z M 36.232 8.186 C 36.188 5.033 35.879 2.203 35.827 1.77 C 35.798 1.066 35.371 0.458 34.694 0.164 C 33.959 -0.151 33.113 -0.004 32.539 0.531 C 19.487 12.828 19.413 12.916 19.377 12.96 C 19.229 13.128 19.156 13.224 19.082 13.334 L 19.075 13.348 C 19.053 13.385 19.031 13.414 19.009 13.451 C 18.84 13.737 18.744 14.147 18.766 14.477 C 18.788 14.807 18.862 15.152 19.001 15.511 C 19.023 15.592 19.046 15.665 19.075 15.739 C 19.2 16.091 19.568 17.161 19.641 21.003 C 19.722 25.102 19.207 26.965 18.935 27.962 C 18.884 28.138 18.847 28.292 18.81 28.438 C 18.766 28.578 18.656 28.952 18.759 29.465 C 18.81 29.707 18.906 29.912 18.965 30.022 C 18.994 30.074 19.023 30.125 19.06 30.176 C 19.119 30.264 19.215 30.404 19.369 30.536 L 26.712 37.487 C 27.065 37.824 27.536 38 28.014 38 C 28.271 38 28.536 37.949 28.779 37.839 C 29.456 37.545 29.875 36.929 29.875 36.218 L 29.875 24.42 C 29.875 23.504 29.419 22.924 29.073 22.565 L 28.978 22.462 C 29.706 21.803 31.943 19.764 34.452 17.227 C 35.717 15.944 36.298 12.989 36.232 8.186 Z M 27.624 34.605 C 27.624 34.847 27.33 34.972 27.153 34.803 L 21.363 29.326 L 21.378 29.311 L 21.407 29.282 L 21.495 29.194 L 21.532 29.157 C 21.569 29.12 21.606 29.091 21.643 29.054 C 21.65 29.047 21.665 29.04 21.672 29.025 C 21.724 28.981 21.775 28.93 21.827 28.878 L 21.841 28.864 C 21.893 28.82 21.937 28.776 21.988 28.724 C 22.003 28.71 22.018 28.702 22.033 28.688 C 22.084 28.636 22.136 28.592 22.194 28.541 C 22.261 28.482 22.319 28.424 22.386 28.365 L 22.665 28.116 L 22.754 28.035 L 27.308 23.958 L 27.44 24.098 C 27.447 24.105 27.455 24.112 27.455 24.12 C 27.631 24.303 27.631 24.34 27.631 24.428 L 27.631 34.605 Z M 32.848 15.658 C 29.875 18.657 27.278 20.967 27.256 20.989 L 27.249 20.989 L 26.623 21.546 L 25.792 22.294 C 24.586 23.372 23.173 24.633 22.187 25.52 C 21.996 25.689 21.701 25.535 21.724 25.285 C 21.841 24.171 21.915 22.756 21.885 20.945 C 21.804 16.743 21.378 15.511 21.194 14.983 C 21.186 14.969 21.179 14.954 21.179 14.939 C 21.157 14.844 21.135 14.778 21.12 14.741 C 21.106 14.705 21.091 14.668 21.083 14.639 C 21.047 14.536 21.076 14.426 21.157 14.353 C 22.239 13.326 29 6.954 33.252 2.951 C 33.422 2.789 33.694 2.899 33.716 3.127 C 33.826 4.293 33.966 6.214 33.995 8.23 C 34.062 13.971 33.135 15.365 32.848 15.658 Z M 17.302 27.955 C 17.03 26.957 16.522 25.095 16.596 20.996 C 16.669 17.146 17.044 16.076 17.162 15.731 C 17.184 15.658 17.214 15.585 17.236 15.504 C 17.368 15.152 17.449 14.8 17.471 14.47 C 17.493 14.147 17.39 13.737 17.228 13.444 C 17.206 13.407 17.184 13.378 17.162 13.341 L 17.155 13.326 C 17.081 13.224 17.008 13.121 16.86 12.952 C 16.824 12.908 16.743 12.828 3.698 0.538 C 3.125 -0.004 2.278 -0.144 1.543 0.172 C 0.866 0.465 0.439 1.074 0.41 1.778 C 0.358 2.21 0.049 5.041 0.005 8.193 C -0.061 12.996 0.52 15.951 1.793 17.234 C 4.316 19.786 6.568 21.839 7.267 22.47 L 7.171 22.572 C 6.825 22.932 6.369 23.511 6.369 24.428 L 6.369 36.211 C 6.369 36.922 6.788 37.545 7.465 37.831 C 7.715 37.941 7.973 37.993 8.23 37.993 C 8.709 37.993 9.172 37.817 9.533 37.479 L 16.912 30.499 C 17.044 30.382 17.133 30.25 17.184 30.184 C 17.221 30.132 17.25 30.081 17.272 30.044 C 17.346 29.92 17.442 29.722 17.486 29.472 C 17.581 28.974 17.478 28.6 17.434 28.446 C 17.398 28.284 17.353 28.13 17.302 27.955 Z M 3.389 15.658 C 3.102 15.365 2.168 13.979 2.249 8.237 C 2.278 6.221 2.426 4.3 2.529 3.134 C 2.551 2.907 2.823 2.797 2.992 2.958 C 7.245 6.962 14.006 13.334 15.087 14.36 C 15.161 14.433 15.19 14.543 15.161 14.646 C 15.154 14.675 15.139 14.712 15.124 14.749 C 15.109 14.785 15.087 14.851 15.065 14.947 C 15.058 14.961 15.058 14.976 15.051 14.991 C 14.867 15.519 14.44 16.75 14.359 20.952 C 14.322 22.763 14.396 24.178 14.521 25.293 C 14.55 25.542 14.249 25.696 14.057 25.527 C 13.071 24.64 11.659 23.379 10.452 22.301 L 9.621 21.553 L 8.988 20.989 C 8.871 20.893 6.325 18.62 3.389 15.658 Z M 9.077 34.81 C 8.9 34.979 8.606 34.854 8.606 34.612 L 8.606 24.42 C 8.606 24.34 8.606 24.296 8.782 24.112 C 8.79 24.105 8.797 24.098 8.797 24.09 L 8.929 23.951 L 13.476 28.028 L 13.792 28.314 L 13.851 28.365 C 13.866 28.38 13.881 28.394 13.895 28.402 C 13.932 28.438 13.976 28.475 14.013 28.512 C 14.035 28.534 14.057 28.548 14.072 28.57 C 14.109 28.607 14.153 28.644 14.19 28.68 C 14.212 28.695 14.227 28.717 14.249 28.732 C 14.293 28.776 14.337 28.812 14.381 28.856 L 14.41 28.886 C 14.462 28.937 14.513 28.981 14.558 29.025 L 14.587 29.054 C 14.624 29.091 14.661 29.12 14.69 29.157 L 14.727 29.194 C 14.756 29.223 14.793 29.26 14.815 29.289 L 14.837 29.311 L 14.852 29.326 Z" fill="rgb(0, 0, 0)" height="38px" id="bH388uk2E" transform="translate(1 1)" width="118.00000395534607px"/></svg>)