YARD via Javascript

Integrating and using the YARD Javascript Integration is free of charge. Here are the steps to get up and running:

1. You have to register for installing the calendar (it's free) to receive your personal authorization code, which is necessary to run the Javascript on your website.
2. After your received your authorization code (see step 1), you can include the following HTML code in your website exactly at the position where you would like to show the YARD Calendar to appear:

   <script src="https://remote.yard.global/yard.js" defer></script>
<div class="yard" data-product="calendar" data-authcode="your_auth_code"></div>
Be sure to replace your_auth_code in the above example with your actual authorization code you received from YARD (see step 1). You can also separate these two tags on your page, for example if you want to move the element around.

3. After you copied the html code (see step 2) to your website and saved it, your calendar will appear. You can also include multiple calendars on the same page: simply include another <div class="yard"></div> tag on your web page with different criteria. To configure each call, see the details in the next section "Configuration".

Parameter Configuration

You can configure the YARD Plugin through these optional parameters:

• data-authcode="xxx" - pass your authentication code here, where xxx is your own custom auth code to display the plugin (see step 1).
• data-product=xxx - load a specific YARD product, must always be calendar to display the events calendar.
• data-tags=xxx - filter events by one or more keywords or topics (see "Topic Configuration" and "Tags Configuration"), where xxx is a keyword.
• data-city=xxx - filter events by one or more supported city names (see "Location Configuration"), where xxx is a city name.
• data-state=xxx - filter events by one or more supported state names (see "Location Configuration"), where xxx is a state name.
• data-country=xxx - filter events by one or more supported country names (see "Location Configuration"), where xxx is a country name.
• data-region=xxx - filter events by one or more supported formats (see "Location Configuration"), where xxx is a region name.
• data-displaylang=xxx - filter events by one supported display language (see "Display Language Configuration"), where xxx is a display language.
• data-talklang=xxx - filter events by one or more supported talk languages (see "Talk Language Configuration"), where xxx is a talk language.
• data-format=xxx - filter events by one or more supported region names (see "Location Configuration"), where xxx is a region name
• data-distribution=xxx - filter events by in-person or virtual events (see "Distribution Configuration"), where xxx is a distribution type
• data-maxwidth=xxx - override the default width of 100% to a specific value, where xxx is a width like '1200px' or '80%'.
• data-mode=xxx - override the default mode tiles, where xxx is a mode name.
• data-modal=xxx - show or hide a modal window when clicking on an event, where xxx turns the modal on (1) or off (0).
• data-headline=xxx - show a custom headline for your calendar integration, where xxx is your headline text.
• data-results_per_page=xxx - limit the rows to be displayed, where xxx is a number.

You can also combine the listed parameters as shown in the example above.

Example Integration

Make sure that the page containing the YARD Calendar is calling the YARD Javascript:

<script src="https://remote.yard.global/yard.js" defer></script>

After that call you can call one or several calendars on your webpage. This example will show fintech events in Germany:

<div class="yard" data-product="calendar" data-tags="fintech" data-country=Germany"></div>

Be sure to replace your_auth_code with your actual authorization code you received. YARD is working on creating a management interface for the parameters, so that you don't have to play around with programming code.

Topic Configuration

Please note that the parameter topic was renamed to tags.

The data-tags= parameter is accepting one or multiple values from this list:

• data-tags=blockchain - blockchain events
• data-tags=finance - finance events
• data-tags=fintech - fintech events
• data-tags=artificialintelligence - AI events
• data-tags=informationtechnology - IT events
• data-tags=business - business events
• data-tags=innovation - innovation events

You can also combine the above listed parameters for limiting the events to be shown, for example: data-tags=finance,fintech

Please note that the tag web3 was renamed to blockchain.

Tags Configuration

The data-tags= parameter is accepting one or multiple search keywords, for example: data-tags=bitcoin

This filter uses an AND search combination concerning other parameters, such as country.

Location Configuration

The data-city=, data-state=, data-country=, and data-region parameters are accepting one or multiple values from this list:

• data-city=Berlin - events in Berlin
• data-state=California - events in California
• data-country=France - events in France
• data-region=Europe - events in Europe

You can also include several locations for a given location parameter, for example: data-country=Germany,Austria,Switzerland

Currently, location names are supported using their English or German spelling.

Display Language Configuration

The data-displaylang= parameter is accepting one display language for the frontend, for example:

• data-displaylang=english - events shown in English language
• data-displaylang=german - events shown in German language

Currently, english is the recommended setting as other languages are under development to be used as display language for the frontend.

Talk Language Configuration

The data-languages= parameter is accepting one or multiple talk languages, for  example:

• data-languages=english - events conducted in English language
• data-languages=german - events conducted in German language
• data-languages=english,german - events conducted in English or German language

This filter uses an AND search combination concerning other parameters, such as country.

Event Format Configuration

The data-format= parameter is accepting one or multiple values from this list:

• data-format=conference - filter events by conferences or summits
• data-format=ceremony - filter events by ceremonies or galas
• data-format=dinner - filter events by dinners, lunches, or breakfasts
• data-format=fair - filter events by fairs or exhibitions
• data-format=hackathon - filter events by hackathons or technical events
• data-format=leisure - filter events by leisure or sport events
• data-format=livestream - filter events by live streams
• data-format=longterm - filter events by long-term events (5+ days)
• data-format=meetup - filter events by casual meetups
• data-format=panel - filter events expert panels, symposiums, or lectures
• data-format=party - filter events by parties or hanghouts
• data-format=questions - filter events by Q&A sessions or AMAs
• data-format=roadshow - filter events by roadshows, promotions, or pitches
• data-format=scholarship - filter events by scholarships or educational programs
• data-format=seminar - filter events by workshops or seminars
• data-format=call - filter events by call for papers or manuscripts
• data-format=press - filter events by media events or press conferences
• data-format=competition - filter events by pitches or competitions

You can also combine the above listed parameters for limiting the events to be shown, for example: data-format=conference,longterm,panel

Distribution Configuration

The data-distribution= parameter is accepting one or multiple values from this list:

• data-distribution=in-person - filter events by physical events
• data-distribution=virtual - filter events by online events

You can also combine the above listed parameters for limiting the events to be shown, for example: data-distribution=in-person,virtual

If you leave out the distribution parameter, the in-person is used by default.

Mode Configuration

The data-mode= parameter is accepting one value from this list:

• data-mode=details - show events in the detailed view
• data-mode=list - show events as a list
• data-mode=tiles - show events including preview images of the event website

If you leave out the mode parameter, the best mode is used by default for the given number of events displayed.

Modal Configuration

A modal is a popup window shown when you click on an event. The data-modal= parameter is accepting one value from this list:

• data-modal=1 - show a modal window when clicking on an event
• data-modal=0 - do not show a modal window when clicking on an event

If you leave out the modal parameter, data-modal=1 is used by default. 

Demo Calendars

You can see a demostration of how the YARD Calendar works as Javascript Integration on the YARD Hosted demo page.

Get a Calendar

To install a YARD Calendar on your website, simply register for it. It's free.