Frames

With our views especially made for iframes you can easily embed Openki into your own webpage.

For now we have the following views:

• Courselist (simple list of courses)
• Propose (easily propose a course on Openki)
• Calendar (a list of events grouped by date)
• Schedule (a classic timetable-like overview of events)
• Events (event boxes)
• Week (event boxes grouped by date)

Filters and other options

With every frame you can use the filters and options described here to define what exactly you want to be shown.

Additionally there's special options for some of the frame views which you can find below in the respective section.

Courselist

openki.net/frame/courselist

A simple list of courses, useful for sidebars etc. Clicking on a course shows the course description and a link to the course details page on openki.net

Options and filters

For general options and filters which can be used for all the frames see here.

Number of courses shown

• Param: count
• Value: Number of courses to be shown at first
• Default: 5
• Example: openki.net/frame/courselist?count=10

Style

In order to make the embedded course list blend in nicely with your webpage you can choose a custom set of colors and set the font size. See here: Style queries

Embed code example:

Click here to show the code snippet

<iframe
    name="Openki Courselist"
    scrolling="yes"
    seamless=""
    src="https://openki.net/frame/courselist/?group=90aa41f3&bgcolor=000"
    width="1000"
    height="860"
    frameborder="0">
</iframe>

Propose

openki.net/frame/propose

Course proposal form to directly propose a course on Openki from your website.

Options and filters

For general options and filters which can be used for all the frames see here.

Needed roles

• Param: neededRoles
• Value: One or more roles which are needed (for now you can choose host and mentor)
• Default: mentor
• Example: openki.net/frame/propose?neededRoles=host

Internal

Needs a group id to be passed too.

• Param: internal
• Value: 1 (for true) or anything else for false
• Default: false
• Example: openki.net/frame/propose?group=90aa41f3&internal=1

Embed code example:

Click here to show the code snippet

<iframe
    name="Openki Course Propose"
    scrolling="yes"
    seamless=""
    src="https://openki.net/frame/propose/?group=90aa41f3&region=4Je2iee208aLHS1Km&lg=de"
    width="1000"
    height="860"
    frameborder="0">
</iframe>

Calendar

openki.net/frame/calendar

A simple list of upcoming events grouped by date, useful for sidebars etc. Clicking on an event shows the event details and a link to the event details page on openki.net

Options and filters

For general options and filters which can be used for all the frames see here.

Number of events shown

• Param: count
• Value: Number of events to be shown at first
• Default: 200
• Example: openki.net/frame/calendar?count=10

Style

In order to make the embedded calendar blend in nicely with your webpage, the styling options described here can be used to customize the look of the calendar frame.

Embed code example:

Click here to show the code snippet

<iframe
    name="Openki Calendar"
    scrolling="yes"
    seamless=""
    src="https://openki.net/frame/calendar/?group=90aa41f3&lg=de"
    width="1000"
    height="860"
    frameborder="0">
</iframe>

Screenshot:

Click here to show the screenshot

Schedule

openki.net/frame/schedule

A classic and colorful timetable-like overview of events. Clicking on one of the events opens a new tab with the event details page on openki.net

Events are shown without dates if they take place in start-week and in any of the 3 following ones. if they start in one of the next 3 weeks they are shown with start:<date> if they appear only once they appear with <date> only.

Options and filters

For general options and filters which can be used for all the frames see here.

Startday

• Param: start
• Value: YYYY-MM-DD
• Default: First day of current week (depending on locale)
• Example: openki.net/frame/schedule/?start=2018-02-03

Time interval

• Param: interval
• Value: Time in minutes
• Default: 60
• Example: openki.net/frame/schedule/?interval=120

Custom Time separators

• Param: sep
• Value: Time(s) at which separators should be displayed as HHMM. Multiple values are accepted.
• Default: None
• Example: openki.net/frame/schedule/?sep=8,1230,14,1715

Events that start later than a (automatic or manual) separator are shown with <starttime>.

Embed code example:

Click here to show the code snippet

<iframe
    name="Openki Schedule"
    scrolling="yes"
    seamless=""
    src="https://openki.net/frame/schedule/?sep=1030,14,17,18,19&group=90aa41f3&lg=de"
    width="1000"
    height="860"
    frameborder="0">
  <p>
    Your browser can't display iframes. In order to check the Schedule use this link: 
    <a href="https://openki.net/frame/schedule/?sep=1030,14,17,18,19&group=90aa41f3&lg=de">Schedule</a>
  </p>
</iframe>

Screenshot:

Click here to show the screenshot

Events

openki.net/frame/events

A simple list of upcoming events as event boxes. Clicking on an event opens a new tab with the event details page on openki.net

Options and filters

For general options and filters which can be used for all the frames see here.

Number of shown events

• Param: count
• Value: Number of events to be shown
• Default: 6
• Example: openki.net/frame/events/?count=20

Embed code example:

Click here to show the code snippet

<iframe
    name="Openki Events"
    scrolling="yes"
    seamless=""
    src="https://openki.net/frame/events/?group=90aa41f3&count=15"
    width="1000"
    height="860"
    frameborder="0">
</iframe>

Screenshot:

Click here to show the screenshot

Week

openki.net/frame/week

A simple list of upcoming events as event boxes grouped by day. Clicking on an event opens a new tab with the event details page on openki.net

Options and filters

For general options and filters which can be used for all the frames see here.

Embed code example:

Click here to show the code snippet

<iframe
    name="Openki Week"
    scrolling="yes"
    seamless=""
    src="https://openki.net/frame/week/?group=90aa41f3"
    width="1000"
    height="860"
    frameborder="0">
</iframe>