In order to integrate your doo events into your website, doo offers different solutions: You have the choice between integrating a doo widget in your own website or using the standard event website hosted by doo:

1. Integration in your homepage via widget: As Pro or Enterprise customer you can use widgets to integrate the registration form of either one specific event or an overview of all your upcoming doo events into your website. Widgets are windows that can be embedded in websites. Via this window your attendees can see the doo registration form on your site and directly sign up without having to leave your homepage.
2. Link to doo event website: Alternatively, you can use the link to the doo event website and ask your invitees to sign up there, you could publish the link on your homepage, integrate it in email campaigns or share it via other channels.

1. Integrate the doo registration into your website via widget 

1.1. General information about the doo widgets

1.1.1. Widget types

doo offers different types of widgets that can be integrated into your homepage as embedded HTML element:

• Event specific booking widgets allow you to integrate the booking mask of one specific event into your website.
• With the help of cross event widgets, you can display an overview of all of your live doo events or a selection of them on your website.

1.1.2. Design

All widget types can be adapted to the design of your website. You can choose from seven fonts for headlines and text as well as select the colors via the color field or by entering the hex code. Further adjustments of your widget design might be possible on request with the help of our developers. For an individual offer please contact your doo counterpart or send an email to upgrade@doo.net. 

1.1.3. Width

The minimum width of the widgets is 320px, the maximum width is 960px. Exception: The cross event table widget has a maximum width of 640px. Please make sure that the HTML element you use for the integration in your website is big enough. The doo widgets automatically adjust to the screen size of the booker.

1.1.4. HTML Integration

By clicking “Display widget code” you will see the HTML snippet for the selected widget. It consists of two parts: <div>…</div> and <script>…</script>. The script part is the same for all doo widgets. In case you would like to insert several widgets on one page, it is sufficient to insert the script part once at the end of the page.

In order to optimize the loading time of the website, the HTML code can be divided into two parts:

• The first part (<div>…</div>) needs to be inserted where the widget should appear on your site.
• The second part (<script>…</script>) can be inserted at the end of the page, before the closing body tag (</body>).

1.1.5. Preview

“View preview” allows you to see how the widget looks like with your current settings. You can also make a test booking via the widget preview.

1.2. Event widgets

The event widget is event-specific and is recommendable if you are building a landing page for one specific event on your website. Event widgets can be created with or without event information.

1.2.1 Event widgets layouts

1.2.1.1. Event widget with event info

This widget contains all the information about the event you specified when you created it, including title and subtitle, time, address, title picture, contact, event description and event fields.

 

1.2.1.2. Event widgets without event info

This widget shows only the ticket selection without any further information about the event like name, date or location. Choose this widget if you intend to create a specific subpage for the event that contains all the relevant event information on your webseite and only want to add the booking process to the site.

 

1.2.2. Event widget creation and settings

To integrate an event widget into your website, please open the event detail page in your doo event manager and select “Integrate in website” in the “Actions” menu on the right.

You can use the existing widget templates to customize one or more events widgets for your website by clicking on “Edit Widget”. If you would like to add further widgets, just click on “Add new widget” in the top right corner.

1. Widget name
2. Language (German/English)
3. Layout (Widget with/without event information)
4. Font for texts and headings
5. Highlight color (e.g. for buttons or links)
6. Background color
7. Restrict embedding to these domains (with this security function you can ensure that your widget only works on selected domains)

1.2.3. Preview and website integration

Once you have created your event widget you can proceed to the preview. Back on the widget overview page, you can open the widget code, copy the code from the window that opens and integrate it as HTML element at the desired position into your website.

1.3. Cross-event widgets

If you would like to create a general event page on your website, where your visitors can see several or all of your events and can directly register for the desired date, you can use one of the cross-event widgets.

1.3.1 Cross-event widget layouts

1.3.1.1. Event calender widget

The event calender widget lists all events with details such as location, date, short description and attributes. Optionally, a search function and a list of available cities can be activated, which allows your bookers to filter the overview.

 

1.3.1.2. Table widget

The table widget lists all events in table form and thus represents the compact version of the event calendar widget. Also here you can allow your bookers to filter the events by keyword, location or date.

 

1.3.2. Widget creation and settings

To create a cross-event widget, open the event overview in your doo event manager by clicking on “Events” in the main menu on the left and then select “Integration in your website”.

 

You can make the following changes to the integration of your event overview:

1. Widget name
2. Language (German/English)
3. Layout (event calendar widget or table widget)
4. Switch search function on or off
5. Display configuration (define whether fully booked events should appear in the overview or not)
6. Select the type of the booking interface (define which booking page should be opened when clicking on “Register”: the doo standard event site or one of the booking widgets)
7. Font type for texts and headings
8. Highlight color (e.g. for buttons and links)
9. Background color
10. Restrict embedding to these domains (with this security function you can ensure that your widget only works on selected domains)

1.3.3. Preview and website integration

Once you have created your cross-event widget you can proceed to the preview. Back on the widget overview page, you can open the widget code, copy the code from the window that opens and integrate it as HTML element on the desired position into your website.

1.3.4. Hide individual events from the widget

Not all events of your doo account should appear in the widget, but only selected ones? All information on how to customize the widget can be found here.

1.3.5. Direct link to the booking interface of a specific event

If you are using a cross-event widget on your website and need the direct link to the booking interface of one specific event (e.g. for sending out invitations or for integrating the link somewhere else on your website), you can easily create a deep link yourself for each event.

Simply append the parameter “/?vv_event_id=EVENT-ID” to the URL where you have integrated the widget. You can find the respective event ID on the event overview of your doo event manager. By using the link with the parameter, your bookers can access the booking interface of the corresponding event without having to scroll through your cross-event widget and can directly register.