Widgets
Table of content
- 1 Default Widget Code Snippets
- 2 Passing Parameters via Code or URL to Alter Default Behavior of Widgets
- 2.1 Code parameters
- 2.2 URL parameters
- 2.2.1 URL Encoding
- 3 Using Code Parameters with JSON Objects in the doo Website Module
- 4 Booking Process Prefill
- 5 Parameters for Table and Calendar Widgets
- 6 Booking Self-Service Mode
- 7 Forms in Widgets
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
These are the snippets that you will get from the Manager App when copying the widget code form the integration pages. They do not yet include any of the additional parameters.
Note that you can embed the script part at the end of the website for better performance.
Booking widget without or with event information
<div class="viovendi-booking-widget"
data-viovendi-locale="<locale>"
data-viovendi-event="<eventID>"
data-viovendi-organizer="<organizationID>"
data-viovendi-widget-config-name="<configName>"></div>
<script type="text/javascript" src="https://doo.net/viovendi-embed.js" data-viovendi-version="1"></script>
Short list widget (table widget) or long list widget (calendar widget)
<div class="viovendi-widget viovendi-event-list-widget"
data-viovendi-locale="<locale>"
data-viovendi-organizer="<organizationID>"
data-viovendi-widget-config-name="<configName>"></div>
<script type="text/javascript" src="https://doo.net/viovendi-embed.js" data-viovendi-version="1"></script>
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. If you provide a parameter both as widget code and URL parameter, the URL parameter will beat the widget code parameter.
Code parameters
Add the code parameters to the <div> tag of the widget code snippet in order to alter the widget behavior. See below for some special requirements when using parameters with JSON object in the doo Website Module.
URL parameters
Append the URL parameters to the link of the website where the widget is embedded. This allows to alter the widget behavior without having to change the code embedded on the event’s website. If a URL parameter and a code parameter is provided, the value from the URL parameter will beat the prefill via the widget code.
Please be mindful when it comes to prefilling PII data like email address or name: While it is technical possible, using the URL parameter exposes the unencrypted data and makes it easy for somebody with dubious intentions to retrieve this data. Therefore we do not recommend to use URL parameters for prefilling PII data. Also keep in mind that the parameters can easily be read and altered by everyone since it is visible in the URL.
To use URL parameters, you add them after the actual URL with a “?”. If you use several parameters, concatenate them with ”&”. Example: https://example-website.com/events/concress2024?parameterA=1¶meterB=2.
If you want to use an anchor to a page in combination with URL Parameters, you need to first list the parameters and after the anchor. Example: https://example-website.com/events/concress2024?parameterA=1¶meterB=2#Registration
URL Encoding
Since special characters are not supported within a URL, you need to escape them with URL encoding in order for the link to work. Example: replacing the “@” sign with “%40”.
To prefill object-shape or array-shape values through URL parameters, you can use the JSON.stringify and encodeURIComponent method:
var prefill = {
first_name: 'John'
};
encodeURIComponent(JSON.stringify(prefill))
// %7B"first_name"%3A"John"%7D
For more information on URL encoding and a list of symbols that need to replaced, you may refer to these external ressources:
Using Code Parameters with JSON Objects in the doo Website Module
In the doo Website Module, JSON objects are not support within the HTML when embedding the widget code using an HTML Element. Therefore the JSON objects cannot be included in the <div>, but they need to be passed using Javascript. In this code example for the booking widget, this is added by the first <script> </script>.
<div class="viovendi-booking-widget"
data-viovendi-locale="en-us"
data-viovendi-event="123456"
data-viovendi-organizer="12345"
data-viovendi-widget-config-name="booking-12345-987654"
data-viovendi-code-prefill="ANQW-NJMV-PQPD"
data-viovendi-ticket-selection-step-behavior="autosubmit"
data-viovendi-attendee-data-step-behavior="autosubmit"
data-viovendi-payment-option="novalnet"
data-viovendi-terms-accepted="true"
data-viovendi-payment-step-behavior="autosubmit">
</div>
<script type="text/javascript">
var bookingWidget = document.querySelector(".viovendi-booking-widget");
bookingWidget.dataset.viovendiTicketsPrefill = '{"777888": "1"}';
bookingWidget.dataset.viovendiBuyerPrefill = '{"first_name": "John", "last_name": "Doo", "title": "1", "salutation": "1", "company_name": "Muster GmbH", "country": "DE", "street_name": "Musterstr.", "street_number": "12", "zip": "34567", "city": "Hamburg", "email": "muster@doo.net"}';
bookingWidget.dataset.viovendiFirstAttendeePrefill = '{"first_name": "Hanna","last_name": "Tester","company_name": "Test GmbH","country": "DE","street_name": "Teststr.","street_number": "9","zip": "87654","city": "Hamburg","email": "test@doo.net"}';
</script>
<script type="text/javascript" src="https://doo.net/viovendi-embed.js" data-viovendi-version="1">
</script>
We first use the Document
method querySelector()
to return the first Element
within the document that matches the specified selector, in this example code the class ".viovendi-booking-widget"
and we save the value in a variable bookingWidget
.
After that, we define the prefill values, by getting the data attribute through the dataset
object and setting its value, as for example in bookingWidget.dataset.viovendiTicketsPrefill = '{"777888": "1"}';
.
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" | ?doo_access_code_field=active
?doo_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/ | data-viovendi-code-prefill="ABDE-DGIF-KOFP" | ?doo_code=ABDE-DGIF-KOFP |
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/ | data-viovendi-path-keys="<path_key_1>,<path_key_2>"
| ?doo_path_keys="<path_key_1>,<path_key_2>"
|
Prefill tickets | Prefilling the ticket selection | data-viovendi-tickets-prefill='{
"<ticket_category_id>": <amount>,
...
}'
// example
data-viovendi-tickets-prefill='{
"123": 1,
"124": 3
}' | JSON stringify + encodeURIComponent ?doo_tickets_prefill=%7B%22<ticket_category_id>%22%3A%20<amount>%7D
// example
?doo_tickets_prefill=%7B%22123%22%3A%201%2C%22124%22%3A%203%7D |
Skip ticket selection | Auto-submit for booking step 1 - ticket selection | data-viovendi-ticket-selection-step-behavior="autosubmit" | ?doo_ticket_selection_step_behavior=autosubmit |
Skip attendee data | Auto-submit for booking step 2 - attendee data (also see booker and attendee prefill below) | data-viovendi-attendee-data-step-behavior="autosubmit" | ?doo_information_step_behavior=autosubmit |
Set payment option | Prefill the payment option selection | data-viovendi-payment-option="<payment_option_internal_name>"
// example
data-viovendi-payment-option="paypal" | ?doo_payment_option=paypal
|
Accept terms & conditions | Check terms & conditions checkbox (this can happen on step 2 or 3, depending on whether the booking is paid or free) | data-viovendi-terms-accepted="true"
| ?doo_terms_accepted=true |
Skip payment step | Auto-submit for booking step 3 - payment step | data-viovendi-payment-step-behavior="autosubmit"
| ?doo_payment_step_behavior=autosubmit |
Booker and Attendee Data Prefill
Functionality | Description | Example for code parameter | Example for URL parameter |
---|---|---|---|
Booker data prefill | Prefill booker data | data-viovendi-buyer-prefill='{
"first_name": "Hans",
"last_name": "Maier",
"email": "hans.maier@doo.net"
}' | ?doo_buyer_prefill=%7B"first_name"%3A"Hans"%2C"last_name"%3A"Maier"%2C"email"%3A"hans.maier%40doo.net"%7D |
First attendee data prefill | Prefill attendee data of the first attendee of the booking | data-viovendi-first-attendee-prefill='{
"first_name": "Hans",
"last_name": "Maier",
"email": "hans.maier@doo.net"
}' | ?doo_first_attendee_prefill=%7B"first_name"%3A"Hans"%2C"last_name"%3A"Maier"%2C"email"%3A"hans.maier%40doo.net"%7D
|
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. | data-viovendi-buyer-prefill='{
# default questions
"salutation": 1,
"title": 1,
"first_name": "Hans",
"last_name": "Maier",
"company_name": "doo GmbH",
"country": "DE",
"street_name": "Hultschiner Str.",
"street_number": "8",
"zip": "81677",
"city": "München",
"email": "hans.maier@doo.net",
# external customer ID
"external_customer_id": "0123456789",
# additional questions (text, paragraph, dropdown, date, phone, simple selection),
"<question_name>": "<value>"
# additional questions (multiple selection),
"<question_name>": ["1","2","4"],
# additional questions (file)
"<question_name>": {
"file_name": "file-name.jpg",
"file_path": "https://file-path"
}
# product,
"<product_name>": 1,
# attendee type
"attendee_type": "Press"
}'
|
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 https://www.iso.org/iso-3166-country-codes.html | |
Street name |
|
| |
Street number |
|
| |
ZIP |
|
| |
City |
|
| |
|
| ||
External customer ID |
|
| |
Custom question |
| Custom questions type text, paragraph, dropdown, simple selection, date, phone "<question_name>": "<value>" Date: YYYY-MM-DD Phone: Formatted according to https://en.wikipedia.org/wiki/E.164, example: +498924881530 Multiple selection "<question_name>": ["1","2","4"] File "<question_name>": {
"file_name": "file-name.jpg",
"file_path": https://file-path
} | |
Product prefill |
| "<product_name>": 1, | |
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/ | data-viovendi-event-attributes="someAttributeName,canBeOtherName"
| ?doo_event_attributes="someAttributeName,canBeOtherName" |
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/ | data-viovendi-event-filters='[
{
"label": "selection-attribute-name",
"options": ["option1", "option2"]
}
]' | JSON stringify + encodeURIComponent var filters = [
{
label: "selection-attribute-name",
options: ["option1", "option2"]
}
];
encodeURIComponent(JSON.stringify(filters))
// ?doo_event_filters=%5B%7B%22label%22%3A%22selection-attribute-name%22%2C%22options%22%3A%5B%22option1%22%2C%20%22option2%22%5D%7D%5D
|
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. | data-viovendi-search-prefill='{
"keywords": "",
"location": "cityName", // or "virtual"
"from_date": "YYYY-MM-DD",
"to_date": "YYYY-MM-DD",
"filters": {
"selection-attribute-name": ["option1", "option2"]
}
}' | JSON stringify + encodeURIComponent var search = {
"keywords": "",
"location": "cityName",
"from_date": "2020-12-01",
"to_date": "2023-12-31",
"filters": {
"selection-attribute-name": ["option1", "option2"]
}
};
encodeURIComponent(JSON.stringify(search))
// ?doo_search_prefill=%7B%22keywords%22%3A%22%22%2C%22location%22%3A%22cityName%22%2C%22from_date%22%3A%222020-12-01%22%2C%22to_date%22%3A%222023-12-31%22%2C%22filters%22%3A%7B%22selection-attribute-name%22%3A%5B%22option1%22%2C%22option2%22%5D%7D%7D |
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 | ?doo_event_id=<Event_ID> |
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 (email + either booking ID or hash required for login depending on event settings) | data-viovendi-mode="booker-login" data-viovendi-mode="booking-details" | ?doo_mode=booker-login ?doo_mode=booking-details
|
Email credential | Used for logging in into the component when using the mode = booking-details or prefilling the login form | data-viovendi-email="john@doo.net"
| ?doo_email=john%40doo.net
|
Booking ID credential | Used for logging in into the component when using the mode = booking-details or prefilling the login form | data-viovendi-booking="TX-12345-12345" | ?doo_booking=TX-12345-12345
|
Booking hash credential | Used for logging in into the component when using the mode = booking-details or prefilling the login form | data-viovendi-booking-hash="abc123"
| ?doo_booking_hash=abc123
|
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 | data-viovendi-form-id=<Form_ID>
| ?doo_form_id="<Form_ID>"
|
Answer prefill | Prefill form answers. | data-viovendi-form-prefill='["text prefill",[2,3],4]'' 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. | ?doo_form_prefill="[%22text prefill%22,[2,3],4]" 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/. |