The agenda component

This page explains how to integrate the agenda component into your own web page. Some JavaScript knowledge is required.

The agenda embedded in a web page

Before you start

To integrate koliseo-agenda with your web page you first need to:

  1. Create the r4p and select the talks to be part of your agenda.
  2. Create the agenda and integrate it into your web page.
  3. Optionally, create an Application and copy the Client ID into your component configuration (see an example). This task is required to enable the write operations on the agenda (add bookmark and submit feedback).

Once this is done, you are ready to integrate the JavaScript component.

Using the component

koliseo-agenda is a JavaScript component that you can integrate into your web page. You can import the component from npm:

# npm i --save koliseo-agenda

To use the component, invoke its render() method:

<div class="ka"></div>
<script src="koliseo-agenda.js" defer></script>
<script defer>
  Koliseo.agenda.render({
    element: document.querySelector('.ka'),
    c4pUrl: 'https://www.koliseo.com/<your c4p URL>',
    oauthClientId: '<Your Koliseo App Client ID>'
  });
</script>

Responsive design

The agenda is a responsive component. In devices with small screens like smartphones the agenda will be displayed as a list instead of a table. You can customize this behavior using CSS.

The agenda on mobile

Embed videos and slides

Speakers and event organizers can add slides and youtube recordings to their talks at any time (read more). You may choose to hide these videos on your website using CSS.

What’s next