Benutzerdefinierter Code

In der Welt von Bookablesites, die Personalisierung geht weit über die Standardkonfigurationsoptionen hinaus. Für Benutzer, die ein wirklich individuelles Erlebnis wünschen, “Benutzerdefinierter Code” Abschnitt öffnet die Tür für tiefere Modifikationen. Es ermöglicht Ihnen, Ihre eigenen einzufügen CSS oder JavaScript Direkt auf Ihre Buchungsseite für erweiterte visuelle und funktionale Anpassungen.

Egal, ob Sie ein einzigartiges Widget einbetten, das Layout verfeinern möchten, um Ihr Branding widerzuspiegeln, oder eine Verbindung zu Tools von Drittanbietern herstellen möchten, die Benutzerdefinierter Code Die Funktion gibt Ihnen die volle kreative Kontrolle über das Design und Verhalten Ihrer Website. Lassen Sie uns erkunden, wie Sie mit benutzerdefiniertem Code ein unverwechselbares Buchungserlebnis für Ihre Kunden schaffen können.

Benutzerdefiniertes CSS

Innerhalb der “Benutzerdefiniertes CSS” Bereich, können Sie Ihren eigenen hinzufügen Cascading Style Sheets (CSS) um das Aussehen Ihrer Buchungswebsite zu optimieren. Mit dieser leistungsstarken Option können Sie Schriftarten, Farben, Abstände, Sichtbarkeit von Elementen und mehr ändern— und bieten volle Flexibilität, um Ihre Website genau so zu gestalten, wie Sie sie sich vorstellen.

Beispiel:
Standardmäßig Bookablesites’ Das Buchungsformular zeigt die Startzeit der Termine an. Wenn Sie die Endzeiten lieber ausblenden möchten, können Sie dies ganz einfach mit einem kurzen benutzerdefinierten CSS-Snippet tun:

/Endzeitausblenden/<br>.bs-dt.booking-tsdiv:letztesKind<br>.bs-dt.booking-ts>span:not:erstes-Kind<br>Anzeige:keine<br><br>

So funktioniert es

Dieser CSS-Schnipsel zielt auf bestimmte Elemente innerhalb Bookablesites’ Buchungsformular, um die Sichtbarkeit der Terminendzeiten zu entfernen.

So implementieren Sie dieses benutzerdefinierte CSS:

  1. Gehen zu Anpassen → Benutzerdefinierter Code → Benutzerdefiniertes CSS in Ihrem Bookablesites Armaturenbrett.
  2. Kopieren Sie den CSS-Ausschnitt und fügen Sie ihn in den Benutzerdefiniertes CSS Editor.
  3. Klicken Speichern um Ihre Änderungen anzuwenden.

Nach dem Speichern werden im Buchungsformular keine Endzeiten für Termine mehr angezeigt, sodass Ihre Kunden eine sauberere und einfachere Buchungsoberfläche haben.

Benutzerdefiniertes JS

Die “Benutzerdefiniertes JS” Abschnitt in Bookablesites ist für Benutzer konzipiert, die die Funktionalität ihrer Website erweitern möchten mit JavaScript. Durch das Hinzufügen Ihres eigenen JS-Codes können Sie interaktive Elemente einführen, Aufgaben automatisieren oder Ihre Buchungsseite mit Tools und Diensten von Drittanbietern verbinden. Diese Flexibilität ermöglicht es Ihnen, Ihren Kunden ein dynamischeres, ansprechenderes und reaktionsschnelleres Buchungserlebnis zu bieten.

Beispiel:
Eine beliebte Anwendung von benutzerdefiniertem JavaScript ist die Einbettung eines Chat-Widget auf Ihrer Buchungswebsite. Viele Live-Chat-Anbieter stellen einen JS-Ausschnitt zur Verfügung, mit dem Sie ihr Chat-Tool einfach in Ihre Site integrieren können. Hier ist ein Beispiel, wie Sie benutzerdefiniertes JS verwenden könnten in Bookablesites um diese Integration zu erreichen:



So funktioniert es

Dieser JavaScript-Code konfiguriert die Chat-Widget bereitgestellt von Ihrem Chat-Support-Service.

Um Ihr Chat-Widget mit benutzerdefiniertem JS hinzuzufügen in Bookablesites:

  1. Ersetzen ‘AmQrTbkLePxDfHNsJyuRcWaZ’ mit Ihrem tatsächlichen Chat-Widget-AppId bereitgestellt von Ihrer Chat-Plattform.
  2. Kopieren Sie die bereitgestellten JavaScript Codeausschnitt.
  3. Navigieren Sie zu der Anpassen → Benutzerdefinierter Code → Benutzerdefiniertes JS Abschnitt in Ihrem Bookablesites Armaturenbrett.
  4. Fügen Sie den Codeausschnitt ein in die Benutzerdefiniertes JS Editor.
  5. Klicken Speichern um Ihre Änderungen anzuwenden.

Nach dem Speichern wird die Chat-Widget wird auf Ihrer Buchungsseite angezeigt, sodass Kunden bei der Terminvereinbarung ganz einfach direkt mit Ihrem Support-Team Kontakt aufnehmen können.

Screenshot einer Buchungsseite für Salondienste, die Optionen für Tiefenpflege, Haarfärbung und Haarverlängerungen mit Preisen zeigt, und ein Chatfenster mit der Frage „Hallo! Womit kann ich Ihnen helfen?