Embed a widget on your site or app

The quickest way to build dynamic widgets, hosted on Kublau.

Kublau has the ability to embed a widget in a remote site. This allows you to easily display any information available on the Kublau platform through a fully customizable widget.

Example widget showing card status

It works on any web context (inside your site or a WebView in your app) and is designed to be fully customizable and secure. Kublau widgets makes it easy to build first-class tracking experiences without the extra work normally required:

• Designed to remove friction—Embed any information on the Kublau platform without any of the integration hassle.

• Secure—Limit where and how the widget is displayed.

• Customization and branding—The widgets are liquid powered and allow the use of custom CSS.

• Additional features—Allow opening tickets, triggering an action, and more.

Building your widget

Right now this feature is in a private Beta, to request access contact your administrator from Kublau.

Configuring your widget for Embedding

1. From your Kublau dashboard, go to Widgets.

2. Click on create a new widget.

   1. Optional: Provide a valid liquid template.

   2. Optional: The Kublau team can configure the template when provided the desired design, contact your Kublau admin for more info.

3. Create at least one embeddable host. This should be the hostname (domain) where you want to embed your widget. In this case the host is example.com – note the lack of http:// and path.

   • Class Name is a class name that will be attached every time your iframe is rendered. You can use it for styling purposes.

   • Path Whitelist allows you to specify the paths on the remote host that would accept your embed.

4. Insert the following embed code on the web page at http://example.com/blog/entry-123.html

Embed code

A widget can be installed on virtually any website using the JavaScript embed code. This embed code loads and displays your widget on your site. This embed code can be retrieved from the detail page of the widget you wish to embed.

An example embed code will look like:

<div id="kublau-widget"></div>
<script src="https://embed.kublau.com/widgets/WIDGET_ID/embed.js" data-target="kublau-widget" data-widget-="DATA_REQUIRED_BY_WIDGET_JSON_ENCODED" async></script>

The kublau-widget ID is where the widget will be mounted, this id can be any of your choosing and is configured by changing the data-target attribute.

Setting async on the script tag will ensure that Kublau doesn't block anything on your site.

Widget data freshness

Widgets will display the latest up-to-date information in the Kublau platform at the time it is rendered. No additional work is necessary.