Das sollten Sie wissen:

  • 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:

  1. Anpassungsoptionen für ein Buchungs-Widget als Overlay

  2. Anpassungsoptionen für ein Buchungs-Widget als iFrame oder Direktlink

  3. Anpassungsoptionen über unsere REST API

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

SCHRITT 1:
Wählen Sie in Ihrem TIMIFY Account unter "Buchung -> Integration -> Buchungsbutton" und wählen Sie die Option "Flexible Button Position":

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.

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:

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 Layout bezogene Attribute

Attributes

Description

Example

data-account-id

Use this to load your account or a specific branch to the widget.

data-account-id="5f6cbd042e148e11ac2acaad"

data-is-external-id
OR
data-company-external-id

Use this to load a specific branch from your Branch Manager to the widget by using a pre-defined external id.
Note: Works only in combination with the attribute data-enterprise-id.

data-is-external-id="branch07"

data-enterprise-id

Use this to load the location finder as a first step of your widget. Works only if you have a TIMIFY Branch Manager account with more then 1 location.

Note: If you want to load the location finder you should not include the attribute data-account-id

data-enterprise-id="5c79487bed89503cfac758b3"

data-hide-close-button

Use this to hide the close button of the widget. This is a 'boolean'. The value can be only true or false.

data-hide-close-button="true"

OR

data-hide-close-button="false"

data-fullscreen

Use this to open the widget in full screen mode. This is a 'boolean'. The value can be only true or false.

data-fullscreen="true"

OR

data-fullscreen="false"

data-overlay-color

Use this to change the background colour of the overlay that covers your website when the widget is triggered (the background colour behind the widget).

Note: Always use HEX colour codes. If you don't know your HEX code, you can generate a one from here.

data-overlay-color="#F09368"

data-overlay-opacity

Use this to change the opacity of the background colour of the overlay.

data-overlay-opacity="0.2"

data-locale

Use this to pre-select a specific language for the booking widget.

Available language codes:
German: de-de
English: en-gb

French: fr-fr

Italian: it-it

Spanish: es-es
Catalan: ca-es

Dutch: nl-nl

Danish: da-dk
Norwegian: nn-no
Finnish: fi-fi
Swedish: sv-se

Bulgarian: bg-bg
Polish: pl-pl
Estonian: et-ee
Cymraeg (Scottish): cy-gb

data-locale="fr-fr"

data-position

Use this to allow multiple buttons to be positioned on the same page.

data-position="multiple"

data-custom-button-image

Use this to replace the standard TIMIFY button that appears on the right or left hand side of your website with an individual button graphic of your choice.

Note: The graphic needs to be uploaded on a FTP server and the URL should be added as a value to this attribute.

data-custom-button-image="https://www.yourwebsite.com/images/button.jpg"

data-button-attribute

Use this to allow the attribute data-account-id to be re-named. For example you can replace data-account-id=“your-TIMIFY-Company-ID" with timify-id="your-TIMIFY-Company-ID”

data-button-attribute="data-account-id"

data-show-company-name-in-header

Use this if you have multiple accounts/locations via the TIMIFY Branch Manager to display the name of the selected location from the Location Finder. This is a boolean.

data-show-company-name-in-header=“true”

data-placeholder

Use this if you want to dynamically place the widget within a DIV element in your page layout.

data-placeholder=“htmlElementID”

data-display-weekly-view

Use this to overwrite the company setting of displaying the weekly view in the booking slots step. It defaults to showing the slots with the day by day layout.

data-display-weekly-view=“false”

data-horizontal-calendar-layout

Use this to force-display a horizontal week day picker instead of the default Date selectbox.

data-horizontal-calendar-layout="true"

1.2 Leistungs bezogene Attribute

Attributes

Description

Example

data-show-services

Use this to only show a number of pre-defined services in the first step of the booking widget.
Make sure to use the ID of the respective service - you can find this on the service details page. You may use multiple service IDs - just make sure to separate them with commas.

data-show-services="5f6cbdb98e434611ef5bbf73"

OR

data-show-services="5f6cbdb98e434611ef5bbf73,5f6cc872471ac511d7e7afe4"

data-show-services-external-ids

This attribute has the same function as data-show-services, but using the external Id of the services instead.

data-show-services-external-ids="service01,service03"

data-hide-services

Use this to hide some pre-defined services in the first step of the booking widget. Make sure to use the ID of the respective service - you can find this on the service details page. You may use multiple service IDs - just make sure to separate them with commas.

data-hide-services="5f6cbdb98e434611ef5bbf73"

OR

data-hide-services="5f6cbdb98e434611ef5bbf73,5f6cc872471ac511d7e7afe4"

data-hide-services-external-ids

This attribute has the same function as data-hide-services, but using the external Id of the services instead.

data-hide-services-external-ids="service01,service03"

data-service-id

Use this to pre-select a service of your choice and skip the first step of the widget by using the ID of the service in TIMIFY

data-service-id="5f6cbdb98e434611ef5bbf73"

data-service-external-ids

Use this to pre-select a service of your choice and skip the first step of the widget by using the external ID you've defined for it.

data-service-external-ids="service03"

data-course-id

Use this to pre-select a group service of your choice and skip the first step of the widget by using the ID of the group.

data-course-id="5f6d9ceeda9f6046487ed20b"

1.3 Ressourcenbezogene Attribute

Attributes

Description

Example

data-resource-id

Use this to automatically pre-select a resource of your choice using its ID.
Note: If you use this in combination with the attribute data-service-id make sure the pre-selected resource is really assigned to that service.

data-resource-id="5f6ebc35533f6711c4c2e545"

data-resource-externalids

Use this to automatically pre-select a resource of your choice using the external ID you've defined for it.
Note: If you use this in combination with the attribute data-service-id make sure the pre-selected resource is really assigned to that service.

data-resource-externalids="room1"

data-filter-resources

Use this to filter the resources in the booking widget and only show the selected resources using their TIMIFY IDs.

data-filter-resources="5f72f486cfaace11d20d64bd,5f6cbe07d07c8611aae6b1dd"

data-filter-resources-by-external-id

Use this to filter the resources in the booking widget and only show the selected resources using the external ID you've defined for them.

data-filter-resources-by-external-id="room01,room03"

data-show-selected-resource-only

Use this to display only the pre-selected resource in the resource overview. This is a boolean.

Note: Works only in combination with data-resource-id and data-resource-externalids.

data-show-selected-resource-only="true"

data-show-resources

Use this to overwrite the Widget Setting that hides the resources by default. In order for this to work you should first go to Settings > Bookings > Booking Widget and from there activate the switch-box in the section Resource Display. This will lead to hiding by default your resources from all customers that see your widget. When you use this attribute you can overwrite this setting and display the resource select component in some cases to your customers.
This is a boolean.

data-show-resources="true"

1.4 Datumsbezogene Attribute

Attributes

Description

Example

data-date

Use this to automatically pre-fill and display the free slots on a specific date.
Note: The date format is YYYY-MM-DD

data-date="2021-05-17"

data-date-range

Use this to filter a pre-defined period for the date selection and display ONLY the available slots within this period.
Note: The date format is YYYY-MM-DD:YYYY-MM-DD.

data-date-range="2021-05-17:2021-05-23"

data-disable-other-dates

Use this to block the user from selecting any other date then the pre-filled one. This is a boolean.

data-disable-other-dates="true"

1.5 Kundenbezogene Attribute

Attributes

Description

Example

data-show-guest-booking-form

Use this to display only the guest booking as the authentication method for your bookers. This is a boolean.

data-show-guest-booking-form="true"

data-skip-customerfields-section

Use this to skip showing the guest booking form and directly display the booking confirmation view.
Note: This works only if you have pre-filled all necessary data fields in the form using the params below. If any of the data-fields is not pre-filled (even if not mandatory) the booking the form will be displayed and the booker will be asked to fill-in the information.

data-skip-customerfields-section="true"

data-external-customer-id

Use this to pre-select an already existing customer in TIMIFY by providing it's external ID.

data-external-customer-id="CONT-19991882-CRM2"

data-guest-firstname

Use this to pre-fill the booker's first name automatically in the guest form.

data-guest-firstname="Max"

data-guest-lastname

Use this to pre-fill the booker's last name automatically in the guest form.

data-guest-lastname="Smith"

data-guest-email

Use this to pre-fill the booker's email automatically in the guest form.

data-guest-email="maxsmithdemotest@gmail.com"

data-guest-phone

Use this to pre-fill the booker's phone number automatically in the guest form.
Note: Do not include 0 or + or any empty spaces, just the number without country code. If you have a local / mobile operator code, e.g 0179 77 88 99 then the value should look like this 179778899

data-guest-phone="1786655322"

data-guest-phonecountry

Use this to pre-fill the booker's phone country code automatically in the guest form.

These are the currently allowed ISO 3166-1 Alpha-2-code values are:

‘fi’, ‘ae’, ‘ar’, ‘at’, ‘au’, ‘be’, ‘bn’, ‘br’, ‘bg’, ‘ca’, ‘us’, ‘ch’, ‘cn’, ‘cz’, ‘de’, ‘dk’, ‘eg’, ‘es’, ‘ee’, ‘fr’, ‘gb’, ‘gr’, ‘hk’, ‘hr’, ‘hu’, ‘id’, ‘ie’, ‘in’, ‘il’, ‘it’, ‘jp’, ‘kr’, ‘lu’, ‘mo’, ‘mt’, ‘mx’, ‘my’, ‘nl’, ‘no’, ‘ph’, ‘pl’, ‘pt’, ‘ro’, ‘ru’, ‘sa’, ‘sg’, ‘sk’, ‘se’, ‘th’, ‘tr’, ‘tw’, ‘co’, ‘cl’

More on ISO 3166-1 country code values can be found here.

data-guest-phonecountry="de"

data-customer-field-1
data-customer-field-2
data-customer-field-N

Use this to pre-fill any custom data field that you've enabled in the booking form.

The format is data-customer-field-1="<ID>-<VALUE>" where <ID> is the id of your data field in TIMIFY and the <VALUE> is the pre-filled value for that field. Let's say you have a field VIP Member ID and you want to pre-fill it. In this case the code will look like:

data-customer-field-1="5f6cbe62587de011ff6c68f7-MemberID9998881"

If you have multiple custom data fields that you want to pre-fill it is important to give each of them a unique attribute name. So in the above example if now I want to pre-fill another field, where I ask my booker what food they prefer, since we already use the attribute name data-customer-field-1 we will have to simply replace the number at the end to data-customer-field-2.

If you use as a data field type a checkbox the value should be replaced simply with true.

data-customer-field-1="5f6cbe62587de011ff6c68f7-MemberID9998881"

data-customer-field-2="5f6cbd052e148e11ac2acac1-vegetarian"

data-customer-field-3="5f6cbd052e148e11ac2acab9-true"

data-ext-customer-field-1
data-ext-customer-field-2
data-ext-customer-field-N

Use this to pre-fill any custom data field that you've enabled in the booking form using an external Data Field ID.

The format is data-customer-ext-field-1="<ID>-<VALUE>" where <ID> is the external id of your data field in TIMIFY and the <VALUE> is the pre-filled value for that field. Let's say you have a field VIP Member ID and you want to pre-fill it. In this case the code will look like:

data-ext-customer-field-1="5f6cbe62587de011ff6c68f7-MemberID9998881"

data-ext-customer-field-1="5f6cbe62587de011ff6c68f7-MemberID9998881"

data-ext-customer-field-2="5f6cbd052e148e11ac2acac1-vegetarian"

data-ext-customer-field-3="5f6cbd052e148e11ac2acab9-true"

1.6 Anpassungsbezogene Attribute

Attributes

Description

Example

data-customization-id

Use this to overwrite the default company or enterprise widget customisation. For example you can trigger a special widget customisation when a specific service or a resource is pre-filled.

data-customization-id="5dd6a2fcfefe8710f1d45ba6"

data-template-customization-id

Use this to overwrite the default company or enterprise email template customisation. For example you can trigger a special email template customisation when a specific service is pre-filled or you are triggering the widget from a different medium - let's say you have one customised widget for your website and a different one for your mobile app.

data-template-customization-id="5de4f70480e1ae10f731a56c"

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.

Attributes

Description

Example

data-event-id

This is the id of the booking in TIMIFY.

data-event-id="5f748b0296782111e4eed9e9"

data-secret

This is the secret for the booking in TIMIFY.

data-secret="5e1c4da96456f911e04bc18c-xx991882owks00921ms0923109381872m8dn3872nmds983kksiahdhd"

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.

Attributes

Description

Example

data-pre-reservation-key

The secret key for the pre-reservation.

data-pre-reservation-key="882owks00921ms0923109381872m8dn3872nmds983kksi"

1.9 Tracken von Marketingkampagnen-Konvertierungen

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:

Attributes

Description

Example

data-meta-utmcontent

Use this attribute to parse and save the UTM Content with the booking. This is usually an optional field. If you have multiple links in the same campaign, like two links in the same email, you can fill in this value so you can differentiate between them.

data-meta-utmcontent="HeaderLink"

data-meta-utmsource

Use this attribute to parse and save the UTM Source with the booking. This is usually a required parameter and is used to identify which site sent the traffic and made the conversion.

data-meta-utmsource="Google"

data-meta-utmmedium

Use this attribute to parse and save the UTM Medium with the booking. This is usually used to identify what type of link was used, such as cost per click or email.

data-meta-utmmedium="cpc"

data-meta-utmcampaign

Use this attribute to parse and save the UTM Campaign with the booking. This is usually used to identify a specific product promotion or strategic campaign.

data-meta-utmcampaign="spring_promotion"

data-meta-utmterm

Use this attribute to parse and save the UTM Search Term with the booking. This is usually used to identify the search term in Google Ads.

data-meta-utmterm="contact lenses+consultation"

-----------------------------------------------------------------------------------------------------------------------------

2. Anpassungsoptionen für ein Buchungs-Widget iFrame

Um ein Live-Beispiel zu sehen, wie ein Benutzer sein iFrame-Widget angepasst hat, klicken Sie hier

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

Use this to load your account or a specific branch to the widget.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad

companyExternalId

OR

iscompanyExternalId (deprecated)

Use this to load a specific branch from your Branch Manager account to the widget by using a pre-defined external id.
Note: It should be always in combination with the parameter 'enterpriseId'.

https://book.timify.com/services?enterpriseId=5c79487bed89503cfac758b3&companyExternalId=branch07

enterpriseId

Use this to load the location finder as a first step of your widget. Works only if you have a TIMIFY Branch Manager account with more then 1 location.

Note: If you want to load the location finder you should not include the attribute data-account-id.

https://book.timify.com/locations?enterpriseId=5c79487bed89503cfac758b3

hideCloseButton

Use this to hide the close button of the widget. This is a 'boolean'. The value can be only true or false.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&hideCloseButton=true

fullscreen

Use this to open the widget in full screen mode. This is a 'boolean'. The value can be only true or false.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&fullscreen=true

overlayColor

Use this to change the background colour behind the widget.

Note: Always use HEX colour codes. If you don't know your HEX code, you can generate a one from here.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&overlayColor=#F09368

overlayOpacity

Use this to change the opacity of the background colour behind the widget.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&overlayColor=#F09368&overlayOpacity=0.2

locale

Use this to pre-select a specific language for the booking widget.

Available language codes:
German: de-de
English: en-gb

French: fr-fr

Italian: it-it

Spanish: es-es
Catalan: ca-es

Dutch: nl-nl

Danish: da-dk
Norwegian: nn-no
Finnish: fi-fi
Swedish: sv-se

Bulgarian: bg-bg
Polish: pl-pl
Estonian: et-ee
Cymraeg (Scottish): cy-gb

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&locale=da-dk

showCompanyNameInHeader

Use this if you have multiple accounts/locations via the TIMIFY Branch Manager to display the name of the selected location from the Location Finder. This is a boolean.

https://book.timify.com/locations?enterpriseId=5c79487bed89503cfac758b3&showCompanyNameInHeader=true

horizontalCalendarLayout

Use this to force-display a horizontal week day picker instead of the default Date selectbox.

https://book.timify.com/locations?enterpriseId=5c79487bed89503cfac758b3&horizontalCalendarLayout=true&displayWeeklyView=false

displayWeeklyView

Use this to overwrite the company setting of displaying the weekly view in the booking slots step. It defaults to showing the slots with the day by day layout.

https://book.timify.com/locations?enterpriseId=5c79487bed89503cfac758b3&displayWeeklyView=false

2.2 Leistungs bezogene Parameter

Parameters

Description

Example

showServices

Use this to only show a number of pre-defined services in the first step of the booking widget.
Make sure to use the ID of the respective service - you can find this on the service details page. You may use multiple service IDs - just make sure to separate them with commas.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&showServices=5f6cbdb98e434611ef5bbf73

OR

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&showServices=5f6cbdb98e434611ef5bbf73,5f6cc872471ac511d7e7afe4

showServicesExternalIds

This attribute has the same function as showServices, but using the external Id of the services instead.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&overlayColor=#F09368&overlayOpacity=0.2&showServicesExternalIds=service01,service03

hideServices

Use this to hide some pre-defined services in the first step of the booking widget. Make sure to use the ID of the respective service - you can find this on the service details page. You may use multiple service IDs - just make sure to separate them with commas.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&hideServices=5f6d9ceeda9f6046487ed20b

OR

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&hideServices=5f6d9ceeda9f6046487ed20b,5f6cbdb98e434611ef5bbf73

hideServicesExternalIds

This attribute has the same function as hideServices, but using the external Id of the services instead.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&overlayColor=#F09368&overlayOpacity=0.2&hideServicesExternalIds=service01,service03

serviceId

Use this to pre-select a service of your choice and skip the first step of the widget.

https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&serviceId=5f6cbdb98e434611ef5bbf73

serviceExternalIds

Use this to pre-select a service of your choice and skip the first step of the widget by using the external ID you've defined for it.

https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&serviceExternalIds=service03

courseId

Use this to pre-select a group service of your choice and skip the first step of the widget by using the ID of the group.

https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&courseId=5f6d9ceeda9f6046487ed20b

2.3 Ressourcenbezogene Parameter

Parameters

Description

Example

resourceId

Use this to automatically pre-select a resource of your choice.
Note: If you use this in combination with the attribute data-service-id make sure the pre-selected resource is really assigned to that service.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&resourceId=5f6ebc35533f6711c4c2e545

resourceExternalIds

Use this to automatically pre-select a resource of your choice using the external ID you've defined for it.
Note: If you use this in combination with the attribute data-service-id make sure the pre-selected resource is really assigned to that service.

https://book.timify.com/conflict?accountId=5f6cbd042e148e11ac2acaad&resourceExternalIds=room02

filterResources

Use this to filter the resources in the booking widget and only show the selected resources using their TIMIFY IDs.

https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&filterResources=5f72f486cfaace11d20d64bd,5f6cbe07d07c8611aae6b1dd

filterResourcesbyExternalId

Use this to filter the resources in the booking widget and only show the selected resources using the external ID you've defined for them.

https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&filterResourcesbyExternalId=room01,room03

showSelectedResourcesOnly

Use this to display only the pre-selected resource in the resource overview. This is a boolean.

Note: Works only in combination with data-resource-id and data-resource-externalids.

https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&showSelectedResourcesOnly=true&resourceId=5f6ebc35533f6711c4c2e545

showResources

Use this to overwrite the Widget Setting that hides the resources by default. In order for this to work you should first go to Settings > Bookings > Booking Widget and from there activate the switch-box in the section Resource Display. This will lead to hiding by default your resources from all customers that see your widget. When you use this attribute you can overwrite this setting and display the resource select component in some cases to your customers.
This is a boolean.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&showResources=true

2.4 Datumsbezogene Parameter

Parameters

Description

Example

date

Use this to automatically pre-fill and display the free slots on a specific date.
Note: The date format is YYYY-MM-DD

https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&date=2021-08-17

dateRange

Use this to filter a pre-defined period for the date selection and display ONLY the available slots within this period.
Note: The date format is YYYY-MM-DD:YYYY-MM-DD.

https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&dateRange=2021-08-05:2021-08-09

disableOtherDates

Use this to block the user from selecting any other date then the pre-filled one. This is a boolean.

https://book.timify.com/auth?accountId=5f6cbd042e148e11ac2acaad&date=2021-08-17&disableOtherDates=true

2.5 Kundenbezogene Parameter

Parameters

Description

Example

showGuestBookingForm

Use this to display only the guest booking as the authentication method for your bookers. This is a boolean.

https://book.timify.com/customer-fields?accountId=5f6cbd042e148e11ac2acaad&showGuestBookingForm=true

skipCustomerFieldsSection

Use this to skip showing the guest booking form and directly display the booking confirmation view.
Note: This works only if you have pre-filled all necessary data fields in the form using the params below and you use the parameter showGuestBookingForm. If any of the data-fields is not pre-filled (even if not mandatory) the booking the form will be displayed and the booker will be asked to fill-in the information.

https://book.timify.com/confirm?accountId=5f6cbd042e148e11ac2acaad&showGuestBookingForm=true&guestFirstName=Max&guestLastName=Smith&guestEmail=maxsmithdemo@gmail.com&guestPhone=1765544321&guestPhoneCountry=de&customerField[5f6cbe62587de011ff6c68f7]=MemberID999888777&skipCustomerFieldsSection=true

externalCustomerId

Use this to pre-select an already existing customer in TIMIFY by providing it's external ID.

https://book.timify.com/success?accountId=5f6cbd042e148e11ac2acaad&externalCustomerId=customer-123

guestFirstName

Use this to pre-fill the booker's first name automatically in the guest form.

https://book.timify.com/confirm?accountId=5f6cbd042e148e11ac2acaad&showGuestBookingForm=true&guestFirstName=Max

guestLastName

Use this to pre-fill the booker's last name automatically in the guest form.

https://book.timify.com/confirm?accountId=5f6cbd042e148e11ac2acaad&showGuestBookingForm=true&guestLastName=Smith

guestEmail

Use this to pre-fill the booker's email automatically in the guest form.

https://book.timify.com/confirm?accountId=5f6cbd042e148e11ac2acaad&showGuestBookingForm=true&guestEmail=maxsmithdemo@gmail.com

guestPhone

Use this to pre-fill the booker's phone number automatically in the guest form.
Note: Do not include 0 or + or any empty spaces, just the number without country code. If you have a local / mobile operator code, e.g 0179 77 88 99 then the value should look like this 179778899

https://book.timify.com/confirm?accountId=5f6cbd042e148e11ac2acaad&showGuestBookingForm=true&guestPhone=1765544321&guestPhoneCountry=de

guestPhoneCountry

Use this to pre-fill the booker's phone country code automatically in the guest form.

These are the currently allowed ISO 3166-1 Alpha-2-code values are:

‘fi’, ‘ae’, ‘ar’, ‘at’, ‘au’, ‘be’, ‘bn’, ‘br’, ‘bg’, ‘ca’, ‘us’, ‘ch’, ‘cn’, ‘cz’, ‘de’, ‘dk’, ‘eg’, ‘es’, ‘ee’, ‘fr’, ‘gb’, ‘gr’, ‘hk’, ‘hr’, ‘hu’, ‘id’, ‘ie’, ‘in’, ‘il’, ‘it’, ‘jp’, ‘kr’, ‘lu’, ‘mo’, ‘mt’, ‘mx’, ‘my’, ‘nl’, ‘no’, ‘ph’, ‘pl’, ‘pt’, ‘ro’, ‘ru’, ‘sa’, ‘sg’, ‘sk’, ‘se’, ‘th’, ‘tr’, ‘tw’, ‘co’, ‘cl’

More on ISO 3166-1 country code values can be found here.

https://book.timify.com/confirm?accountId=5f6cbd042e148e11ac2acaad&showGuestBookingForm=true&guestPhone=1765544321&guestPhoneCountry=de

customerField[ID]

Use this to pre-fill any custom data field that you've enabled in the booking form.

The format is customerField[ID]=VALUE where <ID> is the id of your data field in TIMIFY and the VALUE is the pre-filled value for that field. Let's say you have a field VIP Member ID and you want to pre-fill it. In this case the code will look like:

customerField[5f6cbe62587de011ff6c68f7]=MemberID999888777

If you use as a data field type a checkbox the value should be replaced simply with true.

https://book.timify.com/confirm?accountId=5f6cbd042e148e11ac2acaad&showGuestBookingForm=true&customerField[5f6cbe62587de011ff6c68f7]=MemberID999888777&skipCustomerFieldsSection=true

externalCustomerField[ID]

Use this to pre-fill any custom data field with an external ID that you've enabled in the booking form.

The format is externalCustomerField[ID]=VALUE where <ID> is the external id of your data field in TIMIFY and the VALUE is the pre-filled value for that field. Let's say you have a field VIP Member ID and you want to pre-fill it. In this case the code will look like:

externalCustomerField[5f6cbe62587de011ff6c68f7]=MemberID999888777

If you use as a data field type a checkbox the value should be replaced simply with true.

https://book.timify.com/confirm?accountId=5f6cbd042e148e11ac2acaad&showGuestBookingForm=true&externalCustomerField[memberid]=MemberID999888777&skipCustomerFieldsSection=true

2.6 Anpassungsbezogene Parameter

Parameters

Description

Example

customisationId

Use this to overwrite the default company or enterprise widget customisation. For example you can trigger a special widget customisation when a specific service or a resource is pre-filled.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&customisationId=5dd3b016a5c46410e5568fac

templatesCustomisationId

Use this to overwrite the default company or enterprise email template customisation. For example you can trigger a special email template customisation when a specific service is pre-filled or you are triggering the widget from a different medium - let's say you have one customised widget for your website and a different one for your mobile app.

https://book.timify.com/success?accountId=5f6cbd042e148e11ac2acaad&templatesCustomisationId=5de4f70480e1ae10f731a56c

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

This is the id of the booking in TIMIFY. This parameter works only in combination with secret.

https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&eventId=5f75e3295b3aa811f85822e9&secret=3fcd6975-3620-4874-a314-e07d7dd4dd71

secret

This is the secret for the booking in TIMIFY. This parameter works only in combination with eventId.

https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&eventId=5f75e3295b3aa811f85822e9&secret=3fcd6975-3620-4874-a314-e07d7dd4dd71

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.

2.9 Tracken von Marketingkampagnen-Konvertierungen

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]

Use this attribute to parse and save the UTM Content with the booking. This is usually an optional field. If you have multiple links in the same campaign, like two links in the same email, you can fill in this value so you can differentiate between them.

https://book.timify.com/availability?accountId=5f6cbd042e148e11ac2acaad&meta[utmcontent]=HeaderLink

meta[utmsource]

Use this attribute to parse and save the UTM Source with the booking. This is usually a required parameter and is used to identify which site sent the traffic and made the conversion.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&meta[utmsource]=Google

meta[utmmedium]

Use this attribute to parse and save the UTM Medium with the booking. This is usually used to identify what type of link was used, such as cost per click or email.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&meta[utmmedium]=cpc

meta[utmcampaign]

Use this attribute to parse and save the UTM Campagin with the booking. This is usually used to identify a specific product promotion or strategic campaign.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&meta[utmcampaign]=spring-promotion

meta[utmterm]

Use this attribute to parse and save the UTM Search Term with the booking. This is usually used to identify the search term in Google Ads.

https://book.timify.com/services?accountId=5f6cbd042e148e11ac2acaad&meta[utmterm]=contactlenses+consultation

-----------------------------------------------------------------------------------------------------------------------------


3. Anpassungsoptionen über unsere REST API

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.

Da Sie hierzu Zugang zu unserer s.g. Developer Plattform und den darin enthaltenen relevanten API References ist vorab eine Produktschulung mit unserem IT Team erforderlich. Bei Interessen buchen Sie daher bitte hier vorab einen entsprechenden Beratungstermin und wird helfen Ihnen gerne weiter. Eine Dokumentation zur API finden Sie hier: https://docs.timify.dev/

War diese Antwort hilfreich für dich?