API integration process
API integration process
Sandbox (Test environment):
You will have products at your disposal that you can test on Partnerships bookingkit GmbH (44001).
You can preview the various events and availabilities here.
API Documentation: https://developers.bookingkit.de/api_v3/ui
Sandbox (test environment) API URL: https://api-sandbox.bookingkit.de/
Auth Client ID: shared after commercial agreement signing.
Auth Client Secret: shared after commercial agreement signing
Once you think you are finished and ready for the production environment you will need to inform us of test bookings so that we can check on our side.
If you are using a bookingkit widget including the checkout or just bookingkit checkout, you can test payment methods with Stripe here. For more information about this please refer widget documentation.
Test Event - appointments with fixed durations
1 participant: 10 am Monday: Default duration (60 minutes) - standard price-list
2 participants: 3 pm Monday: Additional duration (30 minutes) - standard price-list
1 participant: 10 am Saturday: Default duration (60 minutes) - weekend price list
2 participants: 3 pm Saturday: Additional duration (30 minutes) - weekend price-list
Test Event - appointments with opening hours
1 participants: 3 pm Sunday: Additional duration (30 minutes) - weekend price-list
Please send us bookingkit reference codes and let us know which part of the integration has been completed from the following list: List of events (experiences), orders and cancellations, availability, product content (images & text), prices, tickets, additional products, opening hours, on request bookings.
Production environment:
!PLEASE DO NOT MAKE TEST ORDERS!
API URL: https://api.bookingkit.de/v3/
We will send you credentials to the live production environment.
!PLEASE DO NOT MAKE TEST ORDERS!
bookingkit Widget/checkout documentation
bookingkit Widget/checkout documentation
When integrating bookingkit widget/checkout, you can decide which elements you want to integrate from bookingkit experience page widget.
For implementing bookingkit widget, the following code must be implemented on your website. The two lines of code simply add all the HTML to bookingkit container.
<div id="bookingkitContainer" data-e="eventID"></div>
<script src="https://vendorID.widget.bookingkit.net/bkscript/?e=eventID&ref=ref" async></script>
How to get eventID and vendorID ?
via bookingkit API
VendorID - using v3/vendors - API endpoint, you can see the list of vendor IDs available to you.
eventId - using v3/events - API endpoint, you can see the list of events that are available to you.
In the activation email sent by bookingkit after a supplier activates the connection in bookingkit
How to get the ref? It will be given by bookingkit technical team and will allow bookingkit to attribute the sales correctly.
As said before you can also choose to only use bookingkit checkout to charge end-customers. In that case, you need to use your own calendar and retrieve the checkout URL linked to a specific date and event (Using the /dates API endpoint).
Customising: All the CSS of the surrounding page can be customised. Note: just copy the blocks and paste behind the integration code, if more then CSS code is used, the <style>....</style> is needed only once, all the CSS must be in between. Below are some examples. Variable values are in italics.
Customising
Customising
You can hide what you need from the bookingkit widget (for example only keep the calendar and hide the descriptions). The example below will hide everything but the “book now button”:
.bk-detail-description,
.bk-detail-map,
.bk-detail-info-item.only-desktop,
.bk-detail-left-column,
.bk-detail-extra-info,
.bk-voucher-btn,
a#bk-sticky-btn,
.bk-detail-payments-logos,
.bk-events-footer,
.bk-header-language {
display: none !important;
}
.bk-detail-right-column.no-mobile {
grid-column: 1/13 !important;
}
div#bookingKitContainer_inner {
min-height: 50px !important;
}
div#bookingKitContainer {
overflow: visible !important;
}
.bk-detail-buttons {
display: block !important;
}
#bookingKitContainer .bk-detail-buttons {
margin: 0px !important;
}
.bk-detail-content,
.bk-detail-grid {
padding: 0px !important;
margin: 0px !important;
}
You can change the colour of the widget:
<style>
#bookingKitContainer .alphaBg,
#bookingKitContainer .betaColorFill {
background: #e9a625 !important;
fill: #e9a625 !important;
}
</style>
You can change the colour of the book now and buy a voucher:
<style>
.bk-voucher-btn {
background: #eeeeff !important;
}
.bk-voucher-btn span {
color: #3a3a3a !important;
}
</style>
You can change the font of the widget:
<style>
#bookingKitContainer {
font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
}
</style>
You can choose between a
pop-up checkout or redirection (for widget+checkout only)
redirection (for checkout only)
No customisation is possible in the checkout.
Tracking:
you can add tracking codes in the widget (not checkout)
No tracking is possible in the checkout.
Tickets: The tickets used are the ones of the supplier (no branding possible)
Customer Success: customer success is handled by the supplier
Activation notification: You will receive an email when the supplier activates the connection in bookingkit backend with:
supplier contact information
supplier list of active events
A link to the preview of the widget
bookingkit verticals
Please find our vertical tree under this link. Through the API, the third category is always transmitted (if selected by the vendor). A mapping with your categories or our categories must then be carried out on your site.
Go live
Once the testing phase is complete, we will create the live API credentials + ref for you. As soon as this has been implemented on your side, we will switch you to live in our backend in order to make you available to our suppliers.