/
Widgets

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

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

JSON stringify + encodeURIComponent

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

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

salutation

You need to pass the ID of the salutation answer option.

1 = Herr/Mr., 2 = Frau/Ms.

 

Title

title

You need to pass the ID of the title answer option.

1 = Dr., 2 = Prof.

First name

first_name

 

Last name

last_name

 

Company/organization name

company_name

 

Country

country

2-letter ISO country code, see ISO - ISO 3166 — Country Codes

Street name

street_name

 

Street number

street_number

 

ZIP

zip

 

City

city

 

Email

email

 

External customer ID

external_customer_id

 

Custom question

<question_name>

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

<product_name>

Attendee type

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

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/

  • comma-separated list of the attribute names

  • the attribute names must not contain spaces, commas or other special characters

  • applies listed attributes with logical AND

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

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

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/.