The agenda component
This page explains how to integrate the agenda component into your own web page. Some JavaScript knowledge is required.
Before you start
To integrate koliseo-agenda with your web page you first need to:
- Create the r4p and select the talks to be part of your agenda.
- Create the agenda and integrate it into your web page.
- 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.
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.