Using Kraft Booking with Divi, Gutenberg, Elementor and Bricks

Place search, calendar, booking form and appointment booking in your page builder, and manage day to day with Kraft Console.

Kraft Booking does not impose any theme on you. Its elements fit into your pages with the builder you already use: Divi 5, the Gutenberg block editor or Elementor. For Bricks, native integration is coming soon; in the meantime, the shortcodes work everywhere. The output is the same in every case: blocks, widgets, modules and shortcodes call the same functions.

Available elements

Gutenberg and Elementor offer six elements, in the Kraft Booking category:

Element	Purpose
Availability search	Dates + guests, leading to the results page.
Search results	The accommodations available for the dates searched.
Availability calendar	An accommodation's availability and nightly prices; this is where the guest picks their dates.
Booking form	The guest's contact details and confirmation of the selected stay (dates chosen in the calendar or the search).
Customer area	The client's stays and appointments: documents, messages, cancellation.
Book an appointment	Online appointment booking (service, staff member, slot, contact details, payment).

Divi 5 also offers more granular modules for building an accommodation page or a booking funnel: “DiviKraft · Prix” (price), “· Détail prix” (price breakdown), “· Extras”, “· Code promotionnel” (promo code), “· En-tête hébergement” (accommodation header), “· Avis voyageurs” (guest reviews), “· Finalisation” (checkout), “· Paiement” (payment), “· Confirmation”.

Divi 5

In the Visual Builder, add a module and search for “DiviKraft”.
Choose the module you want (“DiviKraft · Réservation” (booking), “· Calendrier” (calendar), “· Recherche” (search), etc.). On an accommodation page, combine “DiviKraft · Calendrier”, “DiviKraft · Prix” and “DiviKraft · Réservation”.
Content tab: the module's own settings (for example “Payment mode”, “Show guest selector”, “Show phone field” for the form). There is no language or deposit option in the modules.
Design tab: colours, typography, spacing, as with any Divi module.

The modules support Divi 5 presets and responsive mode.

Gutenberg (block editor)

Click + and type “Kraft” to display the Kraft Booking category.
Insert the block. Its options are in the Settings panel on the right: for example “Payment”, “Show guests”, “Show phone”, “Show summary” for the form; “Unit (ID, 0 = automatic)”, “Number of months”, “Show prices” for the calendar; “Service (ID, 0 = all)” and “Staff member (ID, 0 = any)” for appointments.
The blocks support wide and full-width alignments.

The blocks also work in the site editor (Full Site Editing) and in templates.

Elementor

In the widget panel, under the Kraft Booking category (or by searching for “booking”), drag the widget onto your page.
Content tab: the same options as the Gutenberg blocks.
The widget has no Style tab of its own: use Elementor's Advanced tab (margins, background, border) and your kit's styles.

The widgets work with free Elementor as well as with Elementor Pro.

Bricks

Coming soon. Bricks support arrives in an upcoming Kraft Booking update. Meanwhile, use the shortcodes (see below) in a Bricks “Shortcode” element.

Another theme or builder

If you use another tool, each element is also available as a shortcode: [divikraft_booking_search], [divikraft_booking_results], [divikraft_booking_calendar], [divikraft_booking_form], [divikraft_booking_portal] and [divikraft_booking_appointments]. Output and features are identical.

Kraft Console: your front-end dashboard

Kraft Console is a management area on your own site, accessible only to administrators and to accounts with the “Manager” (Gérante) role, which shows in particular:

arrivals and departures for the next 14 days and bookings to accept;
bookings, the schedule, clients and messaging;
payments to follow up and the month's revenue;
invoices, rates, iCal calendars and the site's translations.

To set it up:

Create a page (for example at the address /gestion/) and place the Divi module “Kraft Console — Tableau de bord” (dashboard) on it (or the [kraft_console] shortcode).
Create the account of the person who manages the site with the “Manager” role: they receive an email to choose their password, then log in on the console page.

Kraft Console lets a manager work without ever entering the WordPress admin. Details: Kraft Console, the front-end dashboard.

Kraft Fields: your custom fields

Kraft Fields (the “Custom fields” module in Kraft Booking › Modules) manages the custom fields of your records and content types, with the same API and the same data as ACF: there is no need to install ACF. Field groups assigned to accommodations appear in the accommodation record, on the “07 ACF fields” tab, and remain usable as dynamic content in Divi.

Kraft Fields does not add any question to the booking form: for information specific to a stay, use the form's message field or the booking record's messaging. See Custom fields with Kraft Fields.

Key points

Six common elements in Gutenberg and Elementor, more complete “DiviKraft” modules in Divi 5; shortcodes for Bricks and other cases.
Kraft Console provides a front-end dashboard for the manager, with no access to the admin.
Kraft Fields manages the custom fields of your records, compatible with ACF.