- Help Center
- Sell
- Booking Widget 3.0
-
Getting Started
-
Sell
-
Manage
-
Grow
-
FAQs
-
Documentación en Español
- Add-ons
- Integración avanzada de Facebook
- Hacer rebooking, cancelar y reembolsar reservas
- Visualización de los Detalles en la Canasta y Ajustando el Balance de las Cuentas
- Consiga toda la información sobre sus clientes con los Campos personalizados
- Gestiona tus agentes
- Colores, Fuentes, Logos y Temas
- Customiza tus emails
- Customiza tus Términos y condiciones
- Customiza tus mensajes de texto
- Integración básica de Facebook
- Reglas de Programación - Vale
- Crear páginas
- Orden de Páginas y Navegación del Menú
- Crear actividades
- Customiza tus entradas en PDF
- Genera un botón de reserva para tu página web oficial
- ExperienceBank
- Visualizar y Gestionar su Programación de Actividades
- Agregar Categorías de Precios
- Usa tu propio dominio con TrekkSoft
- Códigos de descuento y tarjetas regalo
- Crear Reglas para Programas
- Artículos de tienda
-
Deutsche Dokumentation
- Expedia Integration
- Checkout, Steuern und Gebühren
- Rückerstattungen und Gutschriften an Kunden
- Ertrags-Management
- Informationen von Ihren Gästen abrufen - Benutzerdefinierte Felder
- Farben, Schriftarten, Logos und Designs
- Aktivitäten erstellen
- Aktivitäten-Add-Ons
- Rabattcodes und Geschenkkarten
- Passen Sie Ihre SMS an
- Aktivitätenkategorien
- Konfigurieren Sie PDF-Tickets
- Mit der Musement-Plattform verbinden
- Konfigurieren Sie Emails
- Zahlungslinks
- Seitenreihenfolge und Navigationsmenü
- Konfigurieren Sie Ihre AGB
- Preise zu Touren und Aktivitäten hinzufügen
- Zeitpläne erstellen
- Auszahlungsmethoden
- Partnerschaften und Reselling
- Agenten
- Anfragen und Private Touren erstellen
- Anzeigen und Verwalten von Zeitplänen
- Zeitpläne für Verleih
- Detailansicht Warenkorb / Kontoguthaben
- ExperienceBank
- Anzahlungen
- "Jetzt buchen!" Buttons für externe Website erstellen
- Shop-Artikel
- Kalender Synchronisation Für Google Kalender und andere
-
Documentazione in Italiano
- Connetti a Esperienze TripAdvisor (precedentemente noto come Viator)
- Crea tu perfil
- Personalizza i tuoi termini e condizioni
- Commissioni per Agenti e Partner e Tassi netti
- Partnership e rivendita
- Campi personalizzati
- Creare regole di programma
- Categoria di prezzo esclusiva/privata
- Sincronizzazione calendario per Google Calendar e altri
- Gestione del rendimento
- Gestisci le disponibilità di posti in base alle risorse di inventario
- Crea una Pagina
- Attività
- Dettagli carrello - Link di pagamento
- Creare richieste e tour privati/personalizzati
- Colori, Caratteri, Logo e Temi
- Menù di navigazione
- Aggiungere categorie di prezzo
- Voucher
- Acquista articoli ed estensioni attività
- Cancellare e rimborsare un cliente
- Creare Attività
- Funzionalità notifica SMS
- Visualizzare e gestire i tuoi programmi di attività
- Musement & TrekkSoft
- Noleggio
- Agenti e diritti utente
- Codici sconto e Buoni regalo
- Personalizza i tuoi biglietti PDF
- L’integrazione di Expedia
-
Product updates
Advance customisation of book now button
This article explains how to achieve customised "book now" button to be displayed on our webpage with changing CSS style.
WARNING 15. Nov 2022 - Recently we made some changes to booking widget, in order to improve it's functionalities, which might have had impacted customisations that you applied to the button on your page. Please see below the example code that should be used for such customisations from now on.
Do you need the button to be displayed in a way that is not supported by our basic customisations?
No worries as it is possible to further customise the style of the "book now" button by doing changes to the CSS style.
In order for the changes to be recognised we need to make a reference to our booking widget "book now" button with using following sentence:
::part(trekksoft-booking-widget-button)
Example
Find bellow an example when applying a custom style by using external CSS file sheet that changes the position and width of book now button on all the sites of your webpage.
Note that before Nov 15th 2022 we were referring to the button simply with "button" and now we have to use "::part(trekksoft-booking-widget-button)"
"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;
}
For the changes to work it is important that we use the exact reference as mentioned in the example above.
"yourPage.HTML"
<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>
You can find the code to integrate your "book now" button in the backoffice. For further instructions on how to obtain it, you can follow the article How to integrate the Booking Widget into your website.
Preview of the example above as we would see it on the webpage
Note the wider and margined button.
If you have any further questions or need help with customising the button, feel free to reach out to our support at support@trekksoft.com and we will help you with customisations.
Last Updated [22/11/2022]