Alle Kollektionen
Buchungsseite
Buchungseite mit iFrame / Widget einbetten
Die anny Buchungsseite auf deiner eigenen Webseite einbetten in deinem Design
Die anny Buchungsseite auf deiner eigenen Webseite einbetten in deinem Design

Mit dem anny Widget bettest du deine Buchungsseite oder deine Ressource auf deiner eigenen Website ein. Wie? Erfährst du hier.

Lucian Holtwiesche avatar
Verfasst von Lucian Holtwiesche
Vor über einer Woche aktualisiert

Eine eigene Internetpräsenz ist für fast jedes Geschäft heutzutage unabdinglich. Genauso wichtig ist es, deinen Kunden einen schnellen Weg zu deinen Services zu geben. Mit dem anny Widget bettest du deine Buchungsseite oder einzelne Ressourcen direkt auf deiner Webseite ein und bietest so ein nahtloses Buchungserlebnis. Stelle dein Widget außerdem in deinem Design dar.

Wo finde ich das Widget?

Auf Accountebene findest du das Widget hier (Account bearbeiten > Buchungsseite). Hier findest du die Komponente, um deine gesamte Buchungsseite einzubetten. Das macht vor Allem dann Sinn, wenn du mehrere Ressourcen hast, die durchsuchbar sein sollen.

Auf Ressourcenebene findet du das Widget ebenfalls im Reiter Buchungsseite (Ressourcen > Ressourcen auswählen > Buchungsseite). Hiermit bettest du nur diese einzelne Ressource ein. Das macht zum Beispiel Sinn, um auf deiner Webseite ein unverbindliches Erstgespräch anzubieten.

Die technische Anleitung

Das Widget (iFrame) wird technisch in 2 Schritten eingebettet.

  1. Skript global laden

Füge als Erstes das Skript einmalig auf deiner Webseite ein (nicht auf jeder Seite). Wir empfehlen, es als globales Skript zu verwenden. Wenn du nur ein Widget auf einer einzigen Seite verwendest, kannst du diesen Code direkt darüber einfügen.
Das globale Script legst du in den Header. Die Komponente an der Stelle, wo sie erscheinen soll.

<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdn.anny.co/widget/annyComponents.umd.latest.min.js"></script>

2. Einstellungen und Design festlegen

Lege fest, ob alle Einstellungen korrekt sind, bevor du die Komponente einbettest

3. Komponenten verwenden

Sobald das obige Skript geladen ist, kannst du verschiedene Komponenten überall auf deiner Webseite verwenden. Du kannst das Design darüber hinaus vollständig an deine Corporate Identity anpassen.

Pro Tipp: Das Script (der erste Teil des Codes) kann auch mehrmals geladen werden, wenn es Probleme bei der Einbettung gibt kann es helfen, überall beide Teile des Codes einzubetten.

Wie passe ich das Design für mein Widget an?

An dieser Stelle kannst du dich voll austoben und das Erscheinungsbild ganz nach deinen Wünschen - oder ganz nach deinem Corporate Design - anpassen. anny merkt sich übrigens dein Design für deinen ganzen Account.

Öffne das Design Panel über die Schaltfläche "Design anpassen". Du kannst ändern:

  • Primary Color

  • Secondary Color

  • Text Color

  • Background Color

  • Input Background

  • Border Color

  • Corners (abgerundet oder eckig)

  • Schlagschatten (ja oder nein)

Du kannst außerdem entscheiden, ob du die Bildergalerie oder (auf der Buchungsseite) den Header inkludieren oder ausblenden möchtest.

In der Live Vorschau links siehst du sofort deine Änderungen, was die Gestaltung noch einfacher macht! 🎨


Wie bette ich das Widget in meinem Editor ein?

Hat dies Ihre Frage beantwortet?