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.
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.
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! 🎨