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

1. Link to doo event website: You can publish the link to the doo event website on your homepage, integrate it in email campaigns or share it via other advertising channels. By clicking on the link your participants will be redirected to the doo event website where they can register.
2. Integration in your homepage via widget: Pro and Enterprise customers can use widgets to integrate either individual events or an overview of all upcoming doo events into their websites. Widgets are windows that can be embedded in websites. Via this window your participants can see your booking mask on your site and directly register without having to leave your homepage.

Both, the doo event websites and the doo widgets are "responsive", which means that they are optimized for different screen sizes and are automatically displayed correctly on computer as well as mobile devices such as smartphones or tablets.

1. Link to the event website

After you have gone live with your event, the contact person of your doo account will receive the link to the automatically created doo event website via email. Alternatively you can also find the URL on the event detail page in your doo event manager when clicking on "Event website".

You can include this URL for example as a link or button in your website, share it via social media or send it to your contacts via email.

2. Integration of an event into your homepage via widget  

2.1. General information about the doo widgets

2.1.1. Widget types

doo offers different types of widgets that can be integrated into your homepage:

• 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, an overview of all live events of your doo account can be displayed on your website.

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

2.1.3. Width

The minimum width of the widgets is 320px, the maximum width is 960px. Exception: The 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.

2.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>).

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

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

2.2.1 Event widgets layouts

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

Event widgets without event info

This widget shows the pure booking process and displays the ticket selection directly, without any further information about the event. Choose this widget if you have already created an event page with all the relevant event information on your website and only want to add the booking process to the site.

2.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 "Administration" menu on the left at the respective event:

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.

The following adjustments can be made during widget creation:

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 

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

2.3. Cross-event widgets

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

2.3.1 Cross-event widget layouts

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.

Table widget

The table widget lists all events in table form and thus represents the compact version of the event calendar widget.

2.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".

Using the two existing templates, you can customize the desired widget by clicking on "Edit Widget". Alternatively, you can select "Create new widget" in the upper right corner.

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 (only possible for event calendar widget)
5. 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)
6. Font type for texts and headings
7. Highlight color (e.g. for buttons and links)
8. Background color

2.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 at the desired position into your website.

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

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

If you are using a cross-event widget 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.