Widgets
Table of content
In order to provide your events and the booking flow to your customers, you can either use the doo default event website that is automatically generated for every event, or you can embed one of our widgets in your websites. It does not matter if you manage your website via the doo Website Module or independently from doo. The widgets are embedded by inserting a code snippet in your website.
Within the doo Manager App, you can generate a widget with some custom configurations, such as colors, fonts, locale and so on. Then you can copy the code that you need to insert to your website. On top of the configurations that you can manage in the Manager App, there are some additional ways to alter the representation of the widget or prefill data for a lean and comfortable booking experience. The following documentation will inform you about these options. For more general information about widgets and the options you have within the doo Manager App, please refer to our HowTo.doo:
https://howto.doo.net/en/hc/integration-into-your-own-homepage/
Default Widget Code Snippets
Passing Parameters via Code or URL to Alter Default Behavior of Widgets
In order to change the behavior of the widgets using parameters, you have two options how to pass them. By doing this, you can prefill a widget or streamline what is displayed in order to personalize or facilitate the user experience of the booker.
Using Code Parameters with JSON Objects in the doo Website Module
Booking Process Prefill
Functionality | Description | Code example | URL example |
---|---|---|---|
Hide or open promotion code field | Hide the promotion code field or directly show the promotion code entry field. | data-viovendi-promo-code-field="active"
data-viovendi-promo-code-field="hidden" | ?doo_promo_code_field=active
?doo_promo_code_field=hidden |
Hide or open access code field | Hide the access code field or directly show the access code entry field. | data-viovendi-access-code-field="active"
data-viovendi-access-code-field="hidden" | |
Code prefill | Prefill an access or promotion code Also see howto.doo https://howto.doo.net/en/hc/access-and-promotion-codes/ | ||
Path key (payment methods) | If a path key is added, only payment options with this key will be displayed to the booker. Also see howto.doo https://howto.doo.net/en/hc/payment-process-manage-payment-options/ |
|
|
Prefill tickets | Prefilling the ticket selection | ||
Skip ticket selection | Auto-submit for booking step 1 - ticket selection | ||
Skip attendee data | Auto-submit for booking step 2 - attendee data (also see booker and attendee prefill below) | ||
Set payment option | Prefill the payment option selection |
| |
Accept terms & conditions | Check terms & conditions checkbox (this can happen on step 2 or 3, depending on whether the booking is paid or free) |
| |
Skip payment step | Auto-submit for booking step 3 - payment step |
|
Booker and Attendee Data Prefill
Functionality | Description | Example for code parameter | Example for URL parameter |
---|---|---|---|
Booker data prefill | Prefill booker data | ||
First attendee data prefill | Prefill attendee data of the first attendee of the booking |
|
You can prevent editing prefilled data using the advanced setting in the event creation step 3.
List of values for the booker and attendee data prefill
Question | Parameter | Notes | Example for code parameter |
Salutation |
| You need to pass the ID of the salutation answer option. 1 = Herr/Mr., 2 = Frau/Ms. |
|
Title |
| You need to pass the ID of the title answer option. 1 = Dr., 2 = Prof. | |
First name |
|
| |
Last name |
|
| |
Company/organization name |
|
| |
Country |
| 2-letter ISO country code, see ISO - ISO 3166 — Country Codes | |
Street name |
|
| |
Street number |
|
| |
ZIP |
|
| |
City |
|
| |
|
| ||
External customer ID |
|
| |
Custom question |
| Custom questions type text, paragraph, dropdown, simple selection, date, phone Date: YYYY-MM-DD Phone: Formatted according to https://en.wikipedia.org/wiki/E.164, example: +498924881530 Multiple selection File | |
Product prefill |
| ||
Attendee type |
| Only available on booker data prefill level Pass this to show ticket categories that are only available for a certain attendee type. If the value passed does not match any attendee type registration configured for the event, the attendee type information from the widget will be ignored (i.e. the system behaves as if no attendee type information was passed onto the widget). |
Parameters for Table and Calendar Widgets
Functionality | Description | Example for code parameter | Example for URL parameter |
---|---|---|---|
Pre-filter by custom event field | Only show events in the list which have a specific custom event field type free text. This filter does not introduce any filter options that your users can apply, but rather ensures that the user only sees specific events from your organization. Related howto.doo article: https://howto.doo.net/en/hc/filtered-cross-event-widgets-how-to-show-only-selected-events/ |
| |
Custom filters for bookers | Creates a custom filter with a label and selection options that you bookers can use to filter the events. When filtering e.g. for “option1”, the system will display all events which have any custom event field of the type checkbox where the value “option1” is selected for the event. The name of the checkbox event field is irrelevant. You can prefill a custom filter as described below. Howto.doo article about custom event fields: https://howto.doo.net/en/hc/what-are-event-fields/ | JSON stringify + encodeURIComponent
| |
Prefill the search filters | You can prefill the filters from the search bar as well as custom filters, so the booker sees a filtered view of your events. | JSON stringify + encodeURIComponent | |
Deep link to specific event | If you use a list widget, but you want it to display the booking process for a specific event, you can add this parameter. | n/a |
Booking Self-Service Mode
For further information about the booking self-service, see our howto.doo article https://howto.doo.net/en/hc/the-booking-self-service-center/
Functionality | Description | Example for code parameter | Example for URL parameter |
---|---|---|---|
Mode | booker-login: The widget shows booking self-service login screen. booking-details: The user is already logged into the booking self-service - This only works if you also provide the credential parameters (booking ID or hash and email) |
| |
Booking ID credential | Used for logging in into the component when using the mode = booking-details (or prefilling the login form) |
| |
Email credential | Used for logging in into the component when using the mode = booking-details (or prefilling the login form) |
|
|
Booking hash credential (Coming soon) | Used for logging in into the component when using the mode = booking-details (or prefilling the login form) |
|
|
Forms in Widgets
For more information on doo Forms, please refer to our howto.doo article https://howto.doo.net/en/hc/forms/.
Functionality | Description | Example for code parameter | Example for URL parameter |
---|---|---|---|
Form mode | Show a form in the widget |
|
|
Answer prefill | Prefill form answers. | JSON representation of the array containing answers. The prefill for questions should strictly follow the order in which the questions appear on the list. You cannot skip a question, but you need to include all answers in the array. Open question: Pass the text in quotation marks. Multiple selection: Pass an array with the answers to be checked by entering the position. The first selection option is represented by 1, and so on. Rating: The number of the rating given. Example: for a 5-star-rating, pass 2 for 2 stars and 5 for 5 stars. | Tipp: If you use this in email message or auto mail, you can also pass merge tags and use Liquid to alter them. Liquid also provides a filter for URL encoding. See our howto.doo https://howto.doo.net/en/hc/use-liquid-code-in-email-messages-for-individual-personalization/. |