Adding widgets

Quick description about how to add widgets to the page.

First step is to add the script and styles to enable widgets to your page. To do this insert the following HTML code.

First the code to load the CSS styles

<link rel="stylesheet" type="text/css" href="https://www.bubiapp.de/widgets/styles.css" />

Second the code to load widget configuration:

<script type="text/javascript" src="https://www.bubiapp.de/widgets/config.js" ></script>

The previous script would load the partner specific configuration needed for the widget. The server will identify the partner site using the Referer HTTP header. Note: The Bubi API Server has a CORS policy restricting access to API from sites that are not in the white list for partners. If your site is being blocked, please contact Bubi Support to add you site to the white list.

Then finally add the script to for the widgets themselves.

<script src="https://www.bubiapp.de/widgets/main.es5.js" nomodule ></script>
<script src="https://www.bubiapp.de/widgets/main.es2015.js" type="module" defer ></script>

The first script loads only for older browser that don't support ES2015 while the other is smaller in size and faster for modern browsers that support it.

The next step is to add the widget itself. For example if you want to insert the login widget add the following snippet within an appropriate location in the page.

<bubi-header-login></bubi-header-login>

This widget will show a login button when the user it not logged in:

And when the user is logged in it looks like this:

More information about other widgets in the following sections.