Das sollten Sie wissen:
Wenn Sie nur die Grundlagen für die Integration unseres Buchungs-Widgets wünschen, lesen Sie unseren Artikel über die Einbettung des TIMIFY-Buchungs-Widgets in Ihre Website oder Ihr CMS.
In diesem Artikel tauchen wir tief ein und zeigen Ihnen, wie Sie Anpassungen vornehmen können, die wirklich beeindruckende Ergebnisse liefern. Wir geben Ihnen das Skript an die Hand, das Sie benötigen, um Dinge wie die Farbe Ihres Widget-Overlays zu ändern, eine Vorauswahl einer Dienstleistung zu treffen oder Kundendaten vorauszufüllen.
So ist der Artikel aufgebaut:
Anpassungsoptionen für ein Buchungs-Widget als Overlay
1.1 Allgemeine und layoutbezogene Attribute
1.2 Leistungsbezogene Attribute
1.3 Ressourcenbezogene Attribute
1.4 Datumsbezogene Attribute
1.5 Kundenbezogene Attribute
1.6 Anpassungsbezogene Attribute
1.7 Auslösen der Neuplanung für eine bestimmte Buchung
1.8 Versteckte Buchungsslots aus einer Vorreservierung anzeigen
1.9 Tracken von Conversions aus MarketingkampagnenAnpassungsoptionen für ein Buchungs-Widget als iFrame
2.1 Allgemeine und layoutbezogene Parameter
2.2 Leistungsbezogene Parameter
2.3 Ressourcenbezogene Parameter
2.4 Datumsbezogene Parameter
2.5 Kundenbezogene Parameter
2.6 Anpassungsbezogene Parameter
2.7 Auslösen der Neuplanung für eine bestimmte Buchung
2.8 Versteckte Buchungsslots aus einer Vorreservierung anzeigen
2.9 Tracken von Conversions aus Marketingkampagnen
Scrollen Sie nach unten zu Ihrer bevorzugten Option, und wir führen Sie durch die von uns angebotenen Anpassungen.
1. Anpassungsoptionen für ein Buchungs-Widget als Overlay
![](https://timify-b6365082e8ee.intercom-attachments-1.com/i/o/255075397/c1f2aa69c71c562b93e81c62/Bildschirmfoto+2020-10-13+um+09.17.37.png?expires=1725117300&signature=7bd8cb61a4744c674acca9547e5d11487b247c5e713f9f88fdf962d3d111504e&req=diUiFs57nohYFb4f3HP0gFPVNDsT%2FYdv26JMFON7Cvq7M%2B7CI89TCOawu6DV%0A9YM%3D%0A)
SCHRITT 1:
Wählen Sie in Ihrem TIMIFY Account unter "Buchung -> Integration -> Buchungsbutton" und wählen Sie die Option "Flexible Button Position":
![](https://timify-b6365082e8ee.intercom-attachments-1.com/i/o/180933395/afdabebea1ce1ef735fcf34f/Bildschirmfoto+2020-01-30+um+16.04.06.png?expires=1725117300&signature=4626792048be53fd37de3ba2e594453e5a57ab45d9eba440da81412ad1f3f571&req=dSgnH8p9nohaFb4f3HP0gBw48P90zfVW0f4R2hj%2BU%2Ff6Qh96UbOlxloz%2FVUw%0ACW4%3D%0A)
SCHRITT 2:
Diese Option enthält nicht das Attribut "data-id". Das liegt daran, dass Ihre Buchungs-ID innerhalb des HTML-Elements liegt, das Sie gerade als Ihren Buchungs-Button definiert haben.
Da Sie das Aussehen und die Position des Buttons manipulieren, sollte der Parameter "data-position" den Wert "flexible" enthalten.
![](https://timify-b6365082e8ee.intercom-attachments-1.com/i/o/180931209/7827b7845bab317c300b6b5e/Bildschirmfoto+2020-01-30+um+15.58.09.png?expires=1725117300&signature=8b6916d949bd42af4aa31585b8c87454ced808d2104faaaf10ef74b5bf3b3f2e&req=dSgnH8p%2Fn4FWFb4f3HP0gGwDu2YmybFQLLD1RcwPo%2FnJf44liJVp%2FOknNJlv%0A1VA%3D%0A)
Nachdem Sie den Snippet-Code kopiert haben, fügen Sie ihn vor dem
</head> oder das </body>-Tag Ihrer Vorlage.
SCHRITT 3:
Jetzt müssen Sie das HTML-Element auf Ihrer Website definieren, das ermöglicht, das Buchungs-Widget zu öffnen. Normalerweise haben Sie eines der folgenden HTML-Elemente:
![](https://timify-b6365082e8ee.intercom-attachments-1.com/i/o/180932937/5c9aee2e3ca1f4da0e62300b/Bildschirmfoto+2020-01-30+um+15.58.22.png?expires=1725117300&signature=83d99c71f6bb515d0ac098892e8f79fc2c1c67e982d92acdab9c8cbd0aee777a&req=dSgnH8p8lIJYFb4f3HP0gP4t%2FDU6HUyGs3Qlf0p2yRQcdBkKK0vBIMZdsvH6%0AZUo%3D%0A)
Alternativ können Sie jedes andere HTML-Tag für Ihren Button wählen. Bitte beachten Sie dabei stets, dass Sie:
eine Klasse "timify-button" für das Element hinzuzufügen auf das sich das snippet bezieht
das Attribut "data-account-id=" hinzufügen, das Ihre TIMIFY-Buchungs-ID innerhalb der "" enthalten soll
Attribute, die Sie zu Ihrem Code hinzufügen können, um das Widget und/oder den Buchungsablauf anzupassen
Verwenden Sie die untenstehende Liste von Attributen (wir haben praktische Erklärungen hinzugefügt!), um Ihr Widget so anzupassen, dass es genau so aussieht, wie Sie es wünschen. Attribute können wie folgt in bestehende Buttons integriert werden.
Nehmen wir an, Sie möchten eine Vorauswahl einer Leistung treffen, wenn eine bestimmte Buchungstaste auf Ihrer Seite angeklickt wird. In diesem Fall müssten Sie das Attribut data-service-id="5f6cbdb98e434611ef5bbf73"
an Ihr Button-Element anhängen:
<div class="timify-button" data-account-id="5f6cbd042e148e11ac2acaad" data-service-id="5f6cbdb98e434611ef5bbf73">Book a massage</div>
Wenn Sie über Ihren JavaScript-Code eine globale Vorauswahl einer Leistung für alle Ihre Buttons treffen möchten, fügen Sie das Attribut einfach dem TIMIFY JS-Snippet hinzu:
<script async
src="//book.timify.com/widget/widget.min.js"
id="timify-widget"
data-position="flexible"
data-account-id="5f6cbd042e148e11ac2acaad"
data-service-id="5f6cbdb98e434611ef5bbf73">
</script>
Wenn Sie Ihre Schaltflächenelemente dynamisch laden, nachdem Ihre Seite geladen wurde, dann können Sie die folgende JS-Funktion verwenden, um ein Öffnen des Widgets auszulösen:
TimifyWidget.openIframe({ accountId: '...' });
Für diesen speziellen Fall sollten Sie die Parameter wie hier definiert verwenden.
Hier finden Sie eine Liste mit allen unterstützten Attributen für die Integration des TIMIFY-Buchungs-Widgets als Overlay:
1.1 Allgemeine und layoutbezogene Attribute
Attribute | Beschreibung | Beispiel |
data-account-id | Verwenden Sie dies, um Ihr Konto oder einen bestimmten Standort in das Widget zu laden. |
|
data-is-external-id | Verwenden Sie dies, um ein bestimmtes Konto aus Ihrem Branch Manager in das Widget zu laden, indem Sie eine vordefinierte externe ID verwenden. Hinweis: Funktioniert nur in Kombination mit dem Attribut |
|
data-enterprise-id | Verwenden Sie dies, um die Standortsuche als ersten Schritt Ihres Widgets zu laden. Funktioniert nur, wenn Sie ein TIMIFY Branch Manager-Konto mit mehr als einem Standort haben. Hinweis: Wenn Sie die Standortsuche laden möchten, sollten Sie das Attribut |
|
data-hide-close-button | Verwenden Sie diese Option, um die Schaltfläche "Schließen" des Widgets auszublenden. Dies ist ein 'Boolean'. Der Wert kann nur true oder false sein. |
|
data-fullscreen | Verwenden Sie dies, um das Widget im Vollbildmodus zu öffnen. Dies ist ein 'boolescher' Wert. Der Wert kann nur true oder false sein. |
|
data-overlay-color | Verwenden Sie dies, um die Hintergrundfarbe des Overlays zu ändern, das Ihre Website bedeckt, wenn das Widget ausgelöst wird (die Hintergrundfarbe hinter dem Widget).
|
|
data-overlay-opacity | Hiermit können Sie die Deckkraft der Hintergrundfarbe des Overlays ändern. |
|
data-locale | Verwenden Sie diese Option, um eine bestimmte Sprache für das Buchungs-Widget vorzuwählen. Verfügbare Sprachcodes: Französisch: Italienisch: Spanisch: Niederländisch: Dänisch: Bulgarisch: |
|
data-position | Verwenden Sie diese Option, um mehrere Schaltflächen auf derselben Seite zu platzieren. |
|
data-custom-button-image | Verwenden Sie diese Option, um die standardmäßige TIMIFY-Schaltfläche, die auf der rechten oder linken Seite Ihrer Website erscheint, durch eine individuelle Schaltflächengrafik Ihrer Wahl zu ersetzen. Hinweis: Die Grafik muss auf einen FTP-Server hochgeladen werden und die URL sollte als Wert zu diesem Attribut hinzugefügt werden. |
|
data-button-attribute | Damit kann das Attribut |
|
data-show-company-name-in-header | Verwenden Sie diese Option, wenn Sie den Namen des Kontos anzeigen lassen möchten. Dies ist ein boolescher Wert. |
|
data-placeholder | Verwenden Sie dies, wenn Sie das Widget dynamisch innerhalb eines DIV-Elements in Ihrem Seitenlayout platzieren möchten. |
|
data-display-weekly-view | Verwenden Sie diese Option, um die Firmeneinstellung zu überschreiben, die wöchentliche Ansicht im Buchungsschritt Slots anzuzeigen. Standardmäßig werden die Slots mit dem täglichen Layout angezeigt. |
|
data-horizontal-calendar-layout | Verwenden Sie diese Option, um die Anzeige einer horizontalen Wochentagsauswahl anstelle der Standard-Datumsauswahlbox zu erzwingen. |
|
1.2 Leistungsbezogene Attribute
Attribute | Beschreibung | Beispiel |
data-show-services | Hiermit zeigen Sie im ersten Schritt des Buchungs-Widgets nur eine bestimmte Anzahl von vordefinierten Leistungen an. Stellen Sie sicher, dass Sie die ID der jeweiligen Leistung verwenden - Sie finden diese auf der Seite mit den Leistungsdetails. Sie können mehrere Service-IDs verwenden - stellen Sie nur sicher, dass Sie diese durch Kommas trennen. |
|
data-show-services-external-ids | Dieses Attribut hat die gleiche Funktion wie data-show-services, verwendet aber stattdessen die externe Id der Leistungen. |
|
data-hide-services | Verwenden Sie dies, um einige vordefinierte Leistungen im ersten Schritt des Buchungs-Widgets auszublenden. Stellen Sie sicher, dass Sie die ID der jeweiligen Leistung verwenden - Sie können diese auf der Seite mit den Leistungs-details finden. Sie können mehrere Service-IDs verwenden - stellen Sie nur sicher, dass Sie sie durch Kommas trennen. |
|
data-hide-services-external-ids | Dieses Attribut hat die gleiche Funktion wie data-hide-services, verwendet aber stattdessen die externe Id der Leistungen. |
|
data-service-id | Verwenden Sie dies, um eine Leistung Ihrer Wahl vorauszuwählen und den ersten Schritt des Widgets zu überspringen, indem Sie die ID der Leistung in TIMIFY verwenden. |
|
data-service-external-ids | Verwenden Sie diese Funktion, um eine Vorauswahl einer Leistung Ihrer Wahl zu treffen und den ersten Schritt des Widgets zu überspringen, indem Sie die externe ID verwenden, die Sie für diese Leistung definiert haben. |
|
data-course-id | Hiermit können Sie eine Vorauswahl für eine Gruppenleistung Ihrer Wahl treffen und den ersten Schritt des Widgets überspringen, indem Sie die ID der Gruppe verwenden. |
|
1.3 Ressourcenbezogene Attribute
Attributes | Description | Example |
data-resource-id | Verwenden Sie dies, um eine Ressource Ihrer Wahl anhand ihrer ID automatisch vorauszu-wählen. |
|
data-resource-externalids | Verwenden Sie diese Option, um eine Ressource Ihrer Wahl unter Verwendung der externen ID, die Sie für sie definiert haben, automatisch vorauszuwählen. Hinweis: Wenn Sie dies in Kombination mit dem Attribut |
|
data-filter-resources | Verwenden Sie dies, um die Ressourcen im Buchungs-Widget zu filtern und nur die ausgewählten Ressourcen anhand ihrer TIMIFY-IDs anzuzeigen. |
|
data-filter-resources-by-external-id | Verwenden Sie diese Option, um die Ressourcen im Buchungs-Widget zu filtern und nur die ausgewählten Ressourcen mit der externen ID anzuzeigen, die Sie für sie definiert haben. |
|
data-show-selected-resource-only | Verwenden Sie diese Option, um nur die vorausgewählte Ressource in der Ressourcenübersicht anzuzeigen. Dies ist ein boolescher Wert. Hinweis: Funktioniert nur in Kombination mit |
|
data-show-resources | Damit können Sie die Widget-Einstellung überschreiben, die die Ressourcen standard-mäßig ausblendet. Damit dies funktioniert, sollten Sie zunächst zu Einstellungen > Buchungen > Widget gehen und dort das Schaltkästchen im Abschnitt Ressourcen-anzeige aktivieren. Dies führt dazu, dass Ihre Ressourcen standardmäßig vor allen Kunden, die Ihr Widget sehen, verborgen werden. Wenn Sie dieses Attribut verwenden, können Sie diese Einstellung überschreiben und die Ressourcenaus-wahlkomponente in einigen Fällen für Ihre Kunden anzeigen. |
|
1.4 Datumsbezogene Attribute
Attributes | Description | Example |
data-date | Verwenden Sie diese Funktion, um die freien Slots an einem bestimmten Datum automatisch auszufüllen und anzuzeigen. Hinweis: Das Datumsformat ist JJJJ-MM-TT |
|
data-date-range | Verwenden Sie dies, um einen vordefinierten Zeitraum für die Datumsauswahl zu filtern und NUR die verfügbaren Slots innerhalb dieses Zeitraums anzuzeigen. Hinweis: Das Datumsformat ist JJJJ-MM-TT:JJJJ-MM-TT. |
|
data-disable-other-dates | Verwenden Sie diese Option, um den Benutzer daran zu hindern, ein anderes als das vorausgefüllte Datum auszuwählen. Dies ist ein Boolescher Wert. |
|
1.5 Kundenbezogene Attribute
Attributes | Description | Example |
data-show-guest-booking-form | Verwenden Sie dies, um nur die Gastbuchung als Authentifizierungsmetho-de für Ihre Bucher anzuzeigen. Dies ist ein Boolescher Wert. |
|
data-skip-customerfields-section | Verwenden Sie diese Option, um die Anzeige des Buchungsformulars für Gäste zu überspringen und direkt die Buchungsbestätigungs-ansicht anzuzeigen. Hinweis: Dies funktioniert nur, wenn Sie alle erforderlichen Datenfelder im Formular mit den unten aufgeführten Parametern vorausgefüllt haben. Wenn eines der Datenfelder nicht vorausgefüllt ist (auch wenn es nicht obligatorisch ist), wird das Buchungsformular angezeigt und der Buchende wird aufgefordert, die Informationen auszufüllen. |
|
data-hide-filled-fields | Verwenden Sie dies, um vorausgefüllte Datenfelder in der Buchungsübersicht auszublenden. Hinweis: Dies funktioniert für alle Datenfelder mit Ausnahme der Checkbox-Datenfelder. |
|
data-external-customer-id | Verwenden Sie dies, um einen bereits bestehenden Kunden in TIMIFY durch Angabe seiner externen ID vorauszuwählen. |
|
data-guest-firstname | Verwenden Sie diese Option, um den Vornamen des Buchenden automatisch in das Gästeformular einzutragen. |
|
data-guest-lastname | Verwenden Sie diese Option, um den Nachnamen des Buchenden automatisch in das Gästeformular einzutragen. |
|
data-guest-email | Verwenden Sie diese Option, um die E-Mail des Buchenden automatisch in das Gästeformular einzutragen. |
|
data-guest-phone | Verwenden Sie diese Option, um die Telefonnummer des Buchenden automatisch in das Gästeformular einzutragen. Hinweis: Geben Sie keine 0 oder + oder Leerzeichen ein, sondern nur die Nummer ohne Landesvorwahl. Wenn Sie eine Orts-/Mobilfunk-vorwahl haben, z. B. 0179 77 88 99, sollte der Wert wie folgt aussehen 179778899 |
|
data-guest-phonecountry | Verwenden Sie diese Option, um die Landesvorwahl des Buchenden automatisch in das Gästeformular einzutragen, wobei die derzeit zulässigen ISO 3166-1 Alpha-2-Codes verwendet werden können: Mehr über die ISO 3166-1 Ländercodes finden Sie hier. |
|
data-customer-field-1 | Verwenden Sie dies, um ein beliebiges benutzerdefiniertes Datenfeld, das Sie im Buchungsformular aktiviert haben, vorauszufüllen. Das Format ist data-customer-field-1="<ID>-<VALUE>", wobei <ID> die ID Ihres Datenfeldes in TIMIFY und <VALUE> der vorausgefüllte Wert für dieses Feld ist. Nehmen wir an, Sie haben ein Feld VIP Member ID und möchten es vorausfüllen. In diesem Fall würde der Code wie folgt aussehen: Wenn Sie mehrere benutzerdefinierte Datenfelder haben, die Sie vorausfüllen möchten, ist es wichtig, dass Sie jedem dieser Felder einen eindeutigen Attribut-namen geben. Wenn ich also im obigen Beispiel ein weiteres Feld vorausfüllen möchte, in dem ich meinen Bucher frage, welches Essen er bevorzugt, müssen wir, da wir bereits den Attribut-namen |
|
data-ext-customer-field-1 | Verwenden Sie dies, um ein beliebiges benutzerdefiniertes Datenfeld vorzufüllen, das Sie im Buchungsformular mit einer externen Datenfeld-ID aktiviert haben. |
|
1.6 Anpassungsbezogene Attribute
Attribute | Beschreibung | Beispiel |
data-customisation-id | Verwenden Sie dies, um die Standardanpassung des Firmen- oder Unternehmens-Widgets zu überschreiben. Sie können zum Beispiel eine spezielle Widget-Anpassung auslösen, wenn eine bestimmte Leistung oder eine Ressource vorausgefüllt wird. |
|
data-template-customisation-id | Verwenden Sie dies, um die Standardanpassung der E-Mail-Vorlage für Unternehmen zu überschreiben. Sie können zum Beispiel eine spezielle E-Mail-Vorlagenanpassung auslösen, wenn eine bestimmte Leistung vorausgefüllt ist oder Sie das Widget über ein anderes Medium auslösen - sagen wir, Sie haben ein angepasstes Widget für Ihre Website und ein anderes für Ihre mobile App. |
|
1.7 Auslösen der Neuplanung für eine bestimmte Buchung
Wenn Sie die TIMIFY REST API verwenden und sagen wir, Sie möchten alle gebuchten Termine, die in der Zukunft stattfinden werden, im Kundenbereich Ihrer App oder Website anzeigen, damit Ihre Kunden eine bestimmte Buchung von dort aus einfach umplanen können. Sie können einen Umplanungsprozess für eine bestimmte Buchung auslösen, indem Sie sowohl die data-event-id
als auch das data-secret
der Buchung bereitstellen. Normalerweise erhalten Sie diese, wenn Sie sich für den Empfang eines Webhooks mit dem Scope EVENT-CREATED angemeldet haben. Das Geheimnis für die Stornierung oder Neuplanung kann nur per Webhook bezogen werden und ist in den metadaten
zu finden.
Attribute | Beschreibung | Beispiel |
data-event-id | Das ist die ID der Buchung in TIMIFY. |
|
data-secret | Das ist der secret key für die Buchung in TIMIFY. |
|
1.8 Versteckte Buchungsslots aus einer Vorreservierung anzeigen
In TIMIFY, das derzeit nur über die Booking Links App verfügbar ist, können Sie einen bestimmten Slot oder eine Reihe von Slots innerhalb eines Datumsbereichs vorreservieren und diese nur für Kunden verfügbar machen, die einen speziellen Zugang zu Ihrem Widget haben, der sie durch Parsen eines geheimen Schlüssels dieser Vorreservierung offenbart. Mit Hilfe des data-pre-reservation-key
können Sie diesen geheimen Schlüssel in das Widget parsen und die ansonsten verborgenen Slots offenlegen. Nehmen wir an, Sie möchten den Donnerstag, den 25. Oktober 2021 zwischen 15:00 und 17:00 Uhr NUR für einige ausgewählte Kunden von Ihnen verfügbar machen. Sie können eine Vorreservierung für diesen Tag und Zeitbereich erstellen und diese für alle Ihre Stammkunden sperren. Dann können Sie durch Parsen des geheimen Schlüssels der Vorreservierung in Ihrem Buchungs-Widget dieses Datum und Zeitfenster nur für diese wenigen ausgewählten Kunden sichtbar machen.
Attribute | Beschreibung | Beispiel |
data-pre-reservation-key | Der secret key für die Vorreservierung. |
|
1.9 Tracken von Conversions aus Marketingkampagnen
Wenn Sie verfolgen möchten, von welcher Quelle, welchem Medium oder welcher Kampagne eine Buchung kommt, können Sie das tun, indem Sie Ihre UTM-Parameter an das Buchungs-Widget übergeben. Die Daten werden dann in der Buchungsstatistik Ihres Kontos angezeigt. Hier ist eine Liste mit den aktuell unterstützten Attributen:
Attribute | Beschreibung | Beispiel |
data-meta-utmcontent | Verwenden Sie dieses Attribut, um den UTM-Inhalt mit der Buchung zu analysieren und zu speichern. Dies ist normalerweise ein optionales Feld. Wenn Sie mehrere Links in derselben Kampagne haben, z. B. zwei Links in derselben E-Mail, können Sie diesen Wert ausfüllen, um zwischen ihnen zu unterscheiden. |
|
data-meta-utmsource | Verwenden Sie dieses Attribut, um die UTM-Quelle mit der Buchung zu analysieren und zu speichern. Dies ist in der Regel ein erforderliches Attribut und wird verwendet, um festzustellen, von welcher Website der Traffic gesendet und die Konvertierung vorgenommen wurde. |
|
data-meta-utmmedium | Verwenden Sie dieses Attribut, um das UTM-Medium mit der Buchung zu analysieren und zu speichern. Dies wird in der Regel verwendet, um festzustellen, welche Art von Link verwendet wurde, z. B. Kosten pro Klick oder E-Mail. |
|
data-meta-utmcampaign | Benutzen Sie dieses Attribut, um die UTM-Kampagne mit der Buchung zu analysieren und zu speichern. Dies wird in der Regel verwendet, um eine bestimmte Produktwerbung oder strategische Kampagne zu identifizieren. |
|
data-meta-utmterm | Dieses Attribut wird verwendet, um den UTM-Suchbegriff mit der Buchung zu analysieren und zu speichern. Dies wird normalerweise verwendet, um den Suchbegriff in Google Ads zu identifizieren. |
|
2. Anpassungsoptionen für ein Buchungs-Widget als iFrame
Um ein Live-Beispiel zu sehen, wie ein Benutzer sein iFrame-Widget angepasst hat, klicken Sie hier
![](https://timify-b6365082e8ee.intercom-attachments-1.com/i/o/184618900/ea37782f5853c7097b622cf6/Screenshot+2020-02-11+at+20.10.01.png?expires=1725117300&signature=b68a9e83dc032d6a263c2a0648e9a0dafb6b81b50200c156c9eb16e02c04f88c&req=dSgjEMh2lIFfFb4f3HP0gG1JPObHLhbk1S0pXXIEvw%2BKEtf4M7hpsCWD%2FMGG%0AHr8%3D%0A)
Der Codeschnipsel für den iFrame sollte etwa so aussehen:
<iframe src="https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&hideCloseButton=true" style="border:0px #ffffff none;" name="myTimifyWidget" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="800px" width="700px" allowfullscreen></iframe>
Kopieren Sie diesen Code und fügen Sie ihn in den HTML-Code der Seite ein, auf der das Widget auf Ihrer Seite erscheinen soll. Vergessen Sie nicht, die URL im "src
"-Attribut entsprechend Ihrem Konto anzupassen, indem Sie die individuelle accountId
für Ihr TIMIFY-Konto verwenden. Sie können auch die Höhe und Breite des iFrames ändern, indem Sie die Werte der Parameter ("height" oder "width") im obigen Code ändern.
Mit den folgenden Parametern können Sie weitere Anpassungen in Ihrem Widget vornehmen und den Buchungsprozess perfekt an Ihre Bedürfnisse anpassen.
Ein Parameter wird immer mit einem "&
" an die bestehende Widget-URL angehängt. Nehmen wir an, Sie möchten den Schließen-Button des Widgets ausblenden, wenn ein Kunde von Ihnen den Widget-Link öffnet. In diesem Fall müssen Sie den Parameter &hideCloseButton=true
hinzufügen. So würde Ihr Link aussehen:
https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&hideCloseButton=true
2.1 Allgemeine und layout bezogene Parameter
Parameters | Description | Example |
accountId | Verwenden Sie dies, um Ihr Konto oder einen bestimmten Standort in das Widget zu laden. | https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad |
companyExternalId | Verwenden Sie dies, um ein bestimmtes Konto aus Ihrem Branch Manager in das Widget zu laden, indem Sie eine vordefinierte externe ID verwenden. Hinweis: Funktioniert nur in Kombination mit dem Parameter | https://book.timify.com/services?enterpriseId=5c79487bed89503cfac758b3&companyExternalId=branch07 |
enterpriseId | Verwenden Sie dies, um die Standortsuche als ersten Schritt Ihres Widgets zu laden. Funktioniert nur, wenn Sie ein TIMIFY Branch Manager-Konto mit mehr als einem Standort haben. Hinweis: Wenn Sie die Standortsuche laden möchten, sollten Sie den Parameter | https://book.timify.com/locations?enterpriseId=5c79487bed89503cfac758b3 |
showLocations | Verwenden Sie dies, um bestimmte Standorte in der Standortsuche des Widgets zu laden. | |
hideCloseButton | Verwenden Sie diese Option, um die Schaltfläche "Schließen" des Widgets auszublenden. Dies ist ein 'Boolean'. Der Wert kann nur true oder false sein. | https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&hideCloseButton=true |
fullscreen | Verwenden Sie dies, um das Widget im Vollbildmodus zu öffnen. Dies ist ein 'boolescher' Wert. Der Wert kann nur true oder false sein. | https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&fullscreen=true |
overlayColor | Verwenden Sie dies, um die Hintergrundfarbe des Overlays zu ändern, das Ihre Website bedeckt, wenn das Widget ausgelöst wird (die Hintergrundfarbe hinter dem Widget). | https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&overlayColor=#F09368 |
overlayOpacity | Hiermit können Sie die Deckkraft der Hintergrundfarbe des Overlays ändern. | |
locale | Verwenden Sie diese Option, um eine bestimmte Sprache für das Buchungs-Widget vorzuwählen. Verfügbare Sprachcodes: Französisch: Italienisch: Spanisch: Niederländisch: Dänisch: Bulgarisch: | https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&locale=da-dk |
showCompanyNameInHeader | Verwenden Sie diese Option, wenn Sie den Namen des Kontos anzeigen lassen möchten. Dies ist ein boolescher Wert. | https://book.timify.com/locations?enterpriseId=5c79487bed89503cfac758b3&showCompanyNameInHeader=true |
horizontalCalendarLayout | Verwenden Sie diese Option, um die Anzeige einer horizontalen Wochentagsauswahl anstelle der Standard-Datumsauswahlbox zu erzwingen. | |
displayWeeklyView | Verwenden Sie diese Option, um die Firmeneinstellung zu überschreiben, die wöchentliche Ansicht im Buchungsschritt Slots anzuzeigen. Standardmäßig werden die Slots mit dem täglichen Layout angezeigt. | https://book.timify.com/locations?enterpriseId=5c79487bed89503cfac758b3&displayWeeklyView=false |
2.2 Leistungsbezogene Parameter
Parameters | Description | Example |
showServices | Hiermit zeigen Sie im ersten Schritt des Buchungs-Widgets nur eine bestimmte Anzahl von vordefinierten Leistungen an. Stellen Sie sicher, dass Sie die ID der jeweiligen Leistung verwenden - Sie finden diese auf der Seite mit den Leistungsdetails. Sie können mehrere Service-IDs verwenden - stellen Sie nur sicher, dass Sie diese durch Kommas trennen. | https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&showServices=5f6cbdb98e434611ef5bbf73 |
showServicesExternalIds | Dieser Parameter hat die gleiche Funktion wie showServices, verwendet aber stattdessen die externe Id der Leistung. | |
hideServices | Verwenden Sie dies, um einige vordefinierte Leistungen im ersten Schritt des Buchungs-Widgets auszublenden. Stellen Sie sicher, dass Sie die ID der jeweiligen Leistung verwenden - Sie können diese auf der Seite mit den Leistungsdetails finden. Sie können mehrere Service-IDs verwenden - stellen Sie nur sicher, dass Sie sie durch Kommas trennen. | https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&hideServices=5f6d9ceeda9f6046487ed20b |
hideServicesExternalIds | Dieses Attribut hat die gleiche Funktion wie hideServices, verwendet aber stattdessen die externe Id der Leistungen. | |
serviceId | Verwenden Sie dies, um eine Leistung Ihrer Wahl vorauszuwählen und den ersten Schritt des Widgets zu überspringen, indem Sie die ID der Leistung in TIMIFY verwenden. | |
serviceExternalIds | Verwenden Sie diese Funktion, um eine Vorauswahl einer Leistung Ihrer Wahl zu treffen und den ersten Schritt des Widgets zu überspringen, indem Sie die externe ID verwenden, die Sie für diese Leistung definiert haben. | https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&serviceExternalIds=service03 |
courseId | Hiermit können Sie eine Vorauswahl für eine Gruppenleistung Ihrer Wahl treffen und den ersten Schritt des Widgets überspringen, indem Sie die ID der Gruppe verwenden. |
2.3 Ressourcenbezogene Parameter
Parameters | Description | Example |
resourceId | Verwenden Sie dies, um eine Ressource Ihrer Wahl anhand ihrer ID automatisch vorauszuwählen. | |
resourceExternalIds | Verwenden Sie diese Option, um eine Ressource Ihrer Wahl unter Verwendung der externen ID, die Sie für sie definiert haben, automatisch vorauszuwählen. Hinweis: Wenn Sie dies in Kombination mit dem Parameter | https://book.timify.com/conflict?accountId=5f6cbd042e148e11ac2acaad&resourceExternalIds=room02 |
filterResources | Verwenden Sie dies, um die Ressourcen im Buchungs-Widget zu filtern und nur die ausgewählten Ressourcen anhand ihrer TIMIFY-IDs anzuzeigen. | |
filterResourcesbyExternalId | Verwenden Sie diese Option, um die Ressourcen im Buchungs-Widget zu filtern und nur die ausgewählten Ressourcen mit der externen ID anzuzeigen, die Sie für sie definiert haben. | |
showSelectedResourcesOnly | Verwenden Sie diese Option, um nur die vorausgewählte Ressource in der Ressourcenübersicht anzuzeigen. Dies ist ein boolescher Wert. Hinweis: Funktioniert nur in Kombination mit | |
showResources | Damit können Sie die Widget-Einstellung überschreiben, die die Ressourcen standardmäßig ausblendet. Damit dies funktioniert, sollten Sie zunächst zu Einstellungen > Buchungen > Widget gehen und dort das Schaltkästchen im Abschnitt Ressourcen-anzeige aktivieren. Dies führt dazu, dass Ihre Ressourcen standardmäßig vor allen Kunden, die Ihr Widget sehen, verborgen werden. Wenn Sie dieses Attribut verwenden, können Sie diese Einstellung überschreiben und die Ressourcenaus-wahlkomponente in einigen Fällen für Ihre Kunden anzeigen. Das ist ein Boolean. | https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&showResources=true |
2.4 Datumsbezogene Parameter
Parameters | Description | Example |
date | Verwenden Sie diese Funktion, um die freien Slots an einem bestimmten Datum automatisch auszufüllen und anzuzeigen. Hinweis: Das Datumsformat ist JJJJ-MM-TT | https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&date=2021-08-17 |
dateRange | Verwenden Sie dies, um einen vordefinierten Zeitraum für die Datumsauswahl zu filtern und NUR die verfügbaren Slots innerhalb dieses Zeitraums anzuzeigen. Hinweis: Das Datumsformat ist JJJJ-MM-TT:JJJJ-MM-TT. | |
disableOtherDates | Verwenden Sie diese Option, um den Benutzer daran zu hindern, ein anderes als das vorausgefüllte Datum auszuwählen. Dies ist ein Boolescher Wert. |
2.5 Kundenbezogene Parameter
Parameters | Description | Example |
showGuestBookingForm | Verwenden Sie dies, um nur die Gastbuchung als Authentifizierungsmetho-de für Ihre Bucher anzuzeigen. Dies ist ein Boolescher Wert. | https://book.timify.com/customer-fields?accountId=5f6cbd042e148e11ac2acaad&showGuestBookingForm=true |
skipCustomerFieldsSection | Verwenden Sie dies, um die Anzeige des Gast-buchungsformulars zu überspringen und direkt die Buchungsbestäti-gungsansicht anzuzeigen. Hinweis: Dies funktioniert nur, wenn Sie alle notwendigen Datenfelder im Formular mit den unten aufgeführten Parametern vorausgefüllt haben und Sie den Parameter | |
hideFilledFields | Verwenden Sie dies, um vorausgefüllte Datenfelder in der Buchungsübersicht auszublenden. Hinweis: Dies funktioniert für alle Datenfelder mit Ausnahme der Checkbox-Datenfelder. | |
externalCustomerId | Verwenden Sie dies, um einen bereits bestehenden Kunden in TIMIFY durch Angabe seiner externen ID vorauszuwählen. | https://book.timify.com/success?accountId=5f6cbd042e148e11ac2acaad&externalCustomerId=customer-123 |
guestFirstName | Verwenden Sie diese Option, um den Vornamen des Buchenden automatisch in das Gästeformular einzutragen. | |
guestLastName | Verwenden Sie diese Option, um den Nachnamen des Buchenden automatisch in das Gästeformular einzutragen. | |
guestEmail | Verwenden Sie diese Option, um die E-Mail des Buchenden automatisch in das Gästeformular einzutragen. | |
guestPhone | Verwenden Sie diese Option, um die Telefonnummer des Buchenden automatisch in das Gästeformular einzutragen. Hinweis: Geben Sie keine 0 oder + oder Leerzeichen ein, sondern nur die Nummer ohne Landesvorwahl. Wenn Sie eine Orts-/Mobilfunk-vorwahl haben, z. B. 0179 77 88 99, sollte der Wert wie folgt aussehen 179778899 | |
guestPhoneCountry | Verwenden Sie diese Option, um die Landesvorwahl des Buchenden automatisch in das Gästeformular einzutragen, wobei die derzeit zulässigen ISO 3166-1 Alpha-2-Codes verwendet werden können: hier. | |
customerField[ID] | Verwenden Sie dies, um ein beliebiges benutzerdefiniertes Datenfeld, das Sie im Buchungsformular aktiviert haben, vorauszufüllen. | |
hideCustomerFields | Sie können diesen Parameter verwenden, um Datenfelder in Ihrem Buchungsformular auszublenden. Format: hideCustomerFields=ID1,ID2,... Sie können die IDs aller Datenfelder, die Sie ausblenden möchten, durch Kommata trennen. Datenfelder, die als Pflichtfelder im Buchungsformular aktiviert sind, werden nicht ausgeblendet. | |
externalCustomerField[ID] | Verwenden Sie dies, um ein beliebiges benutzerdefiniertes Datenfeld mit einer externen ID auszufüllen, die Sie im Buchungsformular aktiviert haben.
Wenn Sie als Datenfeld-typ ein Checkboxfeld verwenden, sollte der Wert einfach durch | |
hideExternalCustomerFields | Sie können diesen Parameter verwenden, um Datenfelder in Ihrem Buchungsformular auszublenden. Format: hideExternalCustomerFields=externalId1,externalId2,... Sie können die IDs aller externen Datenfelder, die Sie ausblenden möchten, durch Kommata trennen. Datenfelder, die als Pflichtfelder im Buchungsformular aktiviert sind, werden nicht ausgeblendet. |
2.6 Anpassungsbezogene Parameter
Parameters | Description | Example |
customisationId | Verwenden Sie dies, um die Standardanpassung des Firmen- oder Unternehmens-Widgets zu überschreiben. Sie können zum Beispiel eine spezielle Widget-Anpassung auslösen, wenn eine bestimmte Leistung oder eine Ressource vorausgefüllt wird. | |
templatesCustomisationId | Verwenden Sie dies, um die Standardanpassung der E-Mail-Vorlage für Unternehmen zu überschreiben. Sie können zum Beispiel eine spezielle E-Mail-Vorlagenanpassung auslösen, wenn eine bestimmte Leistung vorausgefüllt ist oder Sie das Widget über ein anderes Medium auslösen - sagen wir, Sie haben ein angepasstes Widget für Ihre Website und ein anderes für Ihre mobile App. |
2.7 Auslösen der Neuplanung für eine bestimmte Buchung
Wenn Sie die TIMIFY REST API verwenden und sagen wir, Sie möchten alle gebuchten Termine, die in der Zukunft stattfinden, im Kundenbereich Ihrer App oder Website anzeigen, damit Ihre Kunden eine bestimmte Buchung von dort aus leicht umplanen können. Sie können einen Umplanungsprozess für eine bestimmte Buchung auslösen, indem Sie sowohl die eventId
als auch das secret
der Buchung angeben. Normalerweise erhalten Sie diese, wenn Sie sich für den Empfang eines Webhooks mit dem Umfang EVENT-CREATED angemeldet haben. Das Geheimnis für die Stornierung oder Neuplanung kann nur per Webhook bezogen werden und ist in den Metadaten zu finden.
Parameters | Description | Example |
eventId | Dies ist die ID der Buchung in TIMIFY. Dieser Parameter funktioniert nur in Kombination mit | |
secret | Dies ist das Secret für die Buchung in TIMIFY. Dieser Parameter funktioniert nur in Kombination mit |
2.8 Versteckte Buchungsslots aus einer Vorreservierung anzeigen
In TIMIFY, derzeit nur über die Booking Links App verfügbar, können Sie einen bestimmten Slot oder eine Reihe von Slots innerhalb eines Datumsbereichs vorreservieren und diese nur für Kunden verfügbar machen, die einen speziellen Zugang zu Ihrem Widget haben, der sie durch Parsen eines geheimen Schlüssels dieser Vorreservierung offenbart. Mit dem preReservationKey
können Sie diesen geheimen Schlüssel in das Widget parsen und die ansonsten verborgenen Slots aufdecken. Angenommen, Sie möchten den Donnerstag, den 25. Oktober 2021 zwischen 15:00 und 17:00 Uhr NUR für einige ausgewählte Kunden von Ihnen verfügbar machen. Sie können eine Vorreservierung für diesen Tag und Zeitbereich erstellen und diese für alle Ihre Stammkunden sperren. Dann können Sie durch Parsen des geheimen Schlüssels der Vorreservierung in Ihrem Buchungs-Widget dieses Datum und Zeitfenster nur für diese wenigen ausgewählten Kunden sichtbar machen.
Parameters | Description | Example |
preReservationKey | Der secret key für die Vorreservierung. |
2.9 Tracken von Conversions aus Marketingkampagnen
Wenn Sie verfolgen möchten, von welcher Quelle, welchem Medium oder welcher Kampagne eine Buchung kommt, können Sie das tun, indem Sie Ihre UTM-Parameter an das Buchungs-Widget übergeben. Die Daten werden dann in der Buchungsstatistik Ihres Kontos oder, wenn Sie unser Branchenmanager-Tool verwenden, im Statistik-Dashboard angezeigt. Hier ist eine Liste mit den aktuell unterstützten Attributen:
Parameters | Description | Example |
meta[utmcontent] | Verwenden Sie diesen Parameter, um den UTM-Inhalt mit der Buchung zu analysieren und zu speichern. Dies ist normalerweise ein optionales Feld. Wenn Sie mehrere Links in derselben Kampagne haben, z. B. zwei Links in derselben E-Mail, können Sie diesen Wert ausfüllen, um zwischen ihnen zu unterscheiden. | https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&meta[utmcontent]=HeaderLink |
meta[utmsource] | Verwenden Sie diesen Parameter, um die UTM-Quelle mit der Buchung zu analysieren und zu speichern. Dies ist in der Regel ein erforderlicher Parameter und wird verwendet, um festzustellen, von welcher Website der Traffic gesendet und die Conversion vorgenommen wurde. | https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&meta[utmsource]=Google |
meta[utmmedium] | Verwenden Sie diesen Parametet, um das UTM-Medium mit der Buchung zu analysieren und zu speichern. Dies wird in der Regel verwendet, um festzustellen, welche Art von Link verwendet wurde, z. B. Kosten pro Klick oder E-Mail. | https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&meta[utmmedium]=cpc |
meta[utmcampaign] | Benutzen Sie diesen Parameter, um die UTM-Kampagne mit der Buchung zu analysieren und zu speichern. Dies wird in der Regel verwendet, um eine bestimmte Produktwerbung oder strategische Kampagne zu identifizieren. | |
meta[utmterm] | Dieser Parameter wird verwendet, um den UTM-Suchbegriff mit der Buchung zu analysieren und zu speichern. Dies wird normalerweise verwendet, um den Suchbegriff in Google Ads zu identifizieren. |
-----------------------------------------------------------------------------------------------------------------------------
3. Anpassungsoptionen über unsere REST API
![](https://timify-b6365082e8ee.intercom-attachments-1.com/i/o/180958937/8b3887942c3dcd3ef82da1ad/Dev+Platform.png?expires=1725117300&signature=c714ee061604ac1d965b48f4d986e0b709bb6090c30c9bc4413b4bb6d115c9bd&req=dSgnH8x2lIJYFb4f3HP0gAm6SfFsPqB6valTsVyHTXSOkabONXltSPfCY1o4%0AHcs%3D%0A)
Wenn Sie ein Online-Buchungserlebnis haben möchten, das Ihr Corporate Branding und Ihre spezifischen Buchungsabläufe berücksichtigt, ist dies genau das Richtige für Sie. Wir greifen tief in Ihre bestehende IT-Infrastruktur ein, zerlegen unser Widget und bauen es neu auf, sodass es eine nahtlose Erweiterung Ihrer API-Schnittstelle wird. Wir berücksichtigen die Bedürfnisse und Vorlieben Ihrer Kunden, so dass die Online-Buchung zu einem integralen Bestandteil Ihrer Omni-Channel-Erfahrung wird.
Diese Option beinhaltet den Zugang zu unserer Entwicklerplattform und ein wenig Training mit einem engagierten technischen Spezialisten. Um mehr zu erfahren, kontaktieren Sie bitte unseren Kundensupport über die Chat-Blase in der unteren rechten Ecke Ihres Browsers.