Blokks

Embed code

Embedding your schedule requires you to insert three small code snippets:

CSS

The first one is a <link> to a stylesheet and is placed in the <head> of your page. If you have created your own template just replace the href value with a link to your own CSS file.

<link href="[path-to-theme]" media="screen" rel="stylesheet">

Container

The second piece of code is the <div> container in which the schedule is embedded. You can add the container anywhere on your page as long as it is between <body> </body>:

<div blokks-container></div>

JavaScript

Finally, add the following <script> just above the </body> of your page:

<script defer src="[path-to-embed]"
  data-blokks-id="[schedule-id]"
  data-layout="columns">
</script>

The src and data-blokks-id attributes are required. All other attributes are optional. You can configure your schedule any way you want by adding or removing options.

All files are hosted on our servers and delivered to your users using our CDN. However, it’s possible to download all required files and host them on your own server: