Designing the booking process with the Design Manager

With the Design Manager, the individual booking steps in the iFrame can be designed with a high degree of flexibility. It is up to you to decide which information from the offer should be visible to the person making the booking in the front end, and you have the freedom to define the visual appearance of the booking process yourself.

A specific design can be defined for each main category - and for experienced users also for each sub-category. This allows the templates (e.g. the participant form) and the widgets (e.g. form fields and text blocks) to be tailored to a specific offer.

Please note: Closing page

The template Closing page always takes the settings from the standard design.

Overview: Design Manager

The Design Manager is located in the main navigation in the app menu.

Tip: see adjustments made immediately

To check the adjustments you have made directly in the Design Manager, first select a specific offer and navigate to "Preview - Share" to open the standard view. Then start the Design Manager. In the browser, you can then easily switch between the browser tab, the preview and the Design Manager. To view the latest version in the preview, use the Refresh button (or press the F5 function key).

Once in the Design Manager, the central elements of the tool are available to you: the design A itself, the templates B and the widgets C.

The templates are divided into the header, body and footer areas. The templates in the "Body" area represent the booking process that a person making a booking goes through. Each time you switch to a different template, the selection of available widgets on the right-hand side changes accordingly, as each template has different widgets.

Create a new design

The edoobox start design cannot be changed, it is suitable for all bookings with normal requirements. Do you have other requirements and want to customize the booking process? Then we recommend that you create a new design.

You can create a new design by clicking on "+ Add design" D. The new design is always a copy of an existing design. Give the copy a new name and select the design to be copied. You can set the design created in this way as the standard for all offers or assign it specifically to a certain category. Select the most frequently used design by ticking the "Set as default design" box.

Categories with this design

Each design can be assigned to different categories. Select here for which categories the currently open design can be used.

Design for different output devices

In the Design Manager, you have the option of adapting the templates for various devices such as computers, tablets and smartphones. Depending on the size of the screen, the iFrame selects the appropriate display. Less important widgets can be omitted in the smartphone display.

The iFrame is fully responsive in the edoobox Start design and adapts to the width of the output device.

Bookingflow (booking process using templates)

For each step in the booking flow, from the offer overview to registration and payment to the summary, there is a separate template that can be edited individually. To access the templates available in the body, simply click on "Template | Body" E. All templates available in the body area are then displayed below. Then select the template you want to edit. The selected template will be displayed in the center of the screen for editing.

Widget arrangement

If a template is selected, the specific widgets F appear in the right-hand column for each template. You can add new widgets to the workspace by dragging and dropping them. You can also adjust the position of the widgets within the workspace using drag-and-drop. The plus (+) and minus (-) symbols can be used to increase or decrease the width of the respective widgets. Depending on the type of widget, additional customization options are available. You can access these settings either by double-clicking on the widget or by clicking on the gear icon. To remove a widget from your design, use the cross symbol (x).

Tip: Create tile view

You can present the offer categories with images (tile view) to your visitors first, so that these can be selected and only those specific offers in the selected category are displayed. Only the instructions for version 1 are currently available. How to set up tile view in the design manager

Widget settings

The settings for all widgets can be opened as explained above, but not all widgets have the same number of configuration options. Settings that can be made for all widgets include the "General settings" G for alignment, height adjustment and display options, which can be found on the right-hand side of the window. The "Widget-specific settings" H can be found on the left-hand side of the window. If specific data is available for selection within a widget, these can also be adjusted in their order using drag-and-drop.

Note: Display options

In all widget settings, you will find the setting "Visibility for participants" I in the bottom right-hand column, in which you can set whether the widget should be visible to all visitors, only to registered visitors or to registered participants in this offer.

Header / Footer

Only one template is available in the header and footer. These two templates appear consistently in the header and footer of all other templates and are therefore intended for static information that should be present throughout the entire booking process.

For example, the header offers the option of inserting the "Navigation menu" J widget. Within this widget, you can specify whether bookers can change the language of the booking page or log in to their participant account, among other things. The header is also ideal for adding your company logo, which is then displayed throughout the entire booking process. To do this, insert the "Text block" K widget into the template. An editor is available within this widget, which you can use to write text and upload images.

If you have knowledge of CSS or JavaScript and would like to make the booking process even more individual, the "Code widget" L in the footer is a good option. In this widget, you can insert your own code to further customize the design and behaviour of the booking process.

The "Cookie banner" M widget is only available in the footer. If you include this widget, bookers have the option of accepting or rejecting tracking cookies.

In both templates - both in the header and in the footer - you also have the option of inserting the "Voucher sale button" widget, which redirects the booker directly to the "Voucher sale" template. The advantage of placing this button in the header or footer is that customers are offered the voucher sale on every page of the booking process, which increases the visibility and accessibility of this offer.

Related instructions

• Template | Body - Tender - 1 Offers overview

• Available widgets in the Closing page template

• Template | Header and Template | Footer

Keywords for these instructions

Bookingflow ¦ Booking process ¦ Cookie banner ¦ Design manager ¦ Code widget ¦ Header - footer