Skip to main content

HTML5 Widgets

Bloom pages can embed little custom HTML5 activities called “widgets”. When published as a BloomPUB, these widgets will work on the web, Bloom Reader, and RAB Apps. You can see examples of widgets in these interactive books in the Bloom Library.

Many of these widgets already exist on the web, because they work with Apple's iBooks and other software. You can also make your own using programs like Active Presenter. Most widgets don’t have any custom programming, but if software like Active Presenter is not sufficient for what you need, you can hire a web developer to do something even more advanced.

Format​

Bloom can import any of the following widget formats

  • a zipped set of files ending in ".wdgt". which contains a file named "index.html", or, if the .wdgt file is not zipped, you can import the index.html file.
  • the main .html file from a saved Active Presenter output.

Add a Widget to Bloom​

Steps to add a widget:

  1. Click Add Page

  2. Select one of the template pages. These have an image of a puzzle piece:

  3. Click on Choose Widget button in the corner of the widget:

  4. In the file chooser dialog, choose one of the following:

    1. .wdgt file
    2. .htm file
    3. .html file
note

Note: A “wdgt file is just a zip file containing all the files of the widget. If you instead choose an HTML file, Bloom will gather up and import all of the files in that same folder.

Captive Widgets​

Normally, when Bloom Player shows a widget, it also shows page navigation buttons:

If you want to hide these navigation buttons, follow these steps:

1: Use the Special Page Template​

In Bloom (version 5.1 or later) when you choose Add Page, you should see a Captive Widget Page:

Bloom Player will not give the user any way to navigate away from this page except by leaving the book entirely. It will be up to your widget to tell Bloom Player when you want the user to leave this page and go forward or backward in the book.

2: Send Navigation Messages​

To tell Bloom Player to navigate, you will need to add some JavaScript to a button:

  • Previous page button code:

    window.parent.postMessage('{"messageType":"control", "controlAction":"navigate-to-previous-page"}',"*");

  • Next page button code:

    window.parent.postMessage('{"messageType":"control", "controlAction":"navigate-to-next-page"}',"*");