In diesem Artikel wird erklärt, wie man einen individualisierten "Jetzt buchen" Button erreichen kann, die auf unserer Webseite mit verändertem CSS-Stil angezeigt wird.
WARNUNG 15. Nov 2022 - Kürzlich haben wir einige Änderungen am Buchungs-Widget vorgenommen, um seine Funktionalitäten zu verbessern, was sich möglicherweise auf die Anpassungen ausgewirkt hat, die Sie auf den Button auf Ihrer Seite angewendet haben. Bitte sehen Sie unten den Beispielcode, der von nun an für solche Anpassungen verwendet werden sollte.
Benötigen Sie den Button auf eine Art und Weise, die von unseren Basisanpassungen nicht unterstützt wird?
Keine Sorge, es ist möglich, den Stil des Button "Jetzt buchen" weiter anzupassen, indem Sie Änderungen am CSS-Stil vornehmen.
Damit die Änderungen erkannt werden, müssen wir einen Verweis auf unsere Buchungs-Widget-Schaltfläche "Jetzt buchen" mit folgendem Satz machen:
::part(trekksoft-booking-widget-button)
Beispiel
Im Folgenden finden Sie ein Beispiel für die Anwendung eines benutzerdefinierten Stils mit Hilfe einer externen CSS-Datei, die die Position und Breite der Schaltfläche "Jetzt buchen" auf allen Seiten Ihrer Website ändert.
Beachten Sie, dass wir vor dem 15. November 2022 auf die Schaltfläche einfach mit "button" verwiesen haben und nun "::part(trekksoft-booking-widget-button)" verwenden müssen.
"customStyle.CSS"
/* Button Customisation */
.bookNowButtonCustom ::part(trekksoft-booking-widget-button) {
width: 400px;
margin-left: 100px;
}
/* Button Container Customisation */
.bookNowContainerCustom ::part(trekksoft-booking-widget-container) {
display: block;
}
Damit die Änderungen funktionieren, ist es wichtig, dass wir die genaue Referenz wie im obigen Beispiel verwenden.
<html>
<head>
<link rel="stylesheet" href="customStyle.CSS">
</head>
<body>
<h1>My Custom Webpage</h1>
<div class='bookNowButtonCustom'>
<!-- Code for the "book now" button as we can find it in our backoffice -->
<script src="https://bw.trekksoft.com/loader.js" async data-owner="trekksoft" data-type="activity-booking" data-id="306804" data-client-id="BOOKIE-ba2e7051e5ed434d754806b06" data-token="378146dd3dff8511365f003a624513a64e3f86a8da5054f4"></script>
</div>
</body>
</html>
Sie finden den Code für die Integration des "Jetzt buchen" Buttons im Backoffice. Für weitere Anweisungen, wie Sie ihn erhalten, können Sie den Artikel Wie Sie das Buchungs-Widget in Ihre Website integrieren.
Vorschau auf das obige Beispiel, wie es auf der Webseite zu sehen wäre
Beachten Sie den breiteren und umrandeten Knopf.
Wenn Sie weitere Fragen haben oder Hilfe bei der Anpassung der Schaltfläche benötigen, wenden Sie sich bitte an unseren Support unter support@trekksoft.com. Wir helfen Ihnen gerne bei der Anpassung.