Book Widgets: Everything You Need to Know

Book widgets could be the next big thing in digital publishing. Ever since their introduction by Apple’s iBooks Author (discontinued in 2020), they’ve been used more frequently in interactive ebooks. They have the potential of rapid expansion in this industry, especially with their easy customization and integration. They resemble Lego blocks, with the difference that they can be reproduced and reused an infinite number of times. Because the contents of a widget are based on open web standards (HTML5), they can be created or edited in basic HTML/JavaScript editors. Thus, they’re very flexible.

However, book widgets are considered to be a new topic for many, as there are no confirmed standards yet (or are there?) to be employed by creators other than iBooks Author(discontinued in 2020). So you will find online resources about book widgets scarce. This is why we decided to collect as much information as we can about book widgets, and give it to you here.

A lot of visuals will be used to make this article light and easy to follow, so no worries. If you’re ready, jump into the first section.

Book widget examples

Let’s first look at a few practical examples of different book widgets that can be incorporated into ebooks of different topics.

Social media sharing

This generic type of widget can display a share button for each chapter. Clicking on the button will allow you to share a summary of the chapter through different social channels of the user’s choice.

BMI calculator

Imagine reading a health and fitness book and trying to determine your BMI (Body Mass Index) to know which fitness plan works for you. Instead of using an external source you can use a BMI calculator widget inside the ebook.

Cookbook recipe scaler

This is an actual widget we developed for a client’s cookbook. This kind of widget allows you to specify the number of servings for a recipe in order to see the specific ingredient quantities needed.

Interactive scientific experiments

In science books, it’s hard to explain a full experiment and the outcome of it only with words. This is where you use this widget to show how it’s done and even let the reader take part in the process.

Quizzes and exercises

There are various quiz widgets out there to help you test your readers. Easily integrate different kinds of exercises to the end of each chapter and have the results automatically calculated.

Types of book widgets

Believe it or not, the EPUB 3 standard supports a widget specification as you can see here. We haven’t been able to reach any other documentation nor find examples implemented by developers. Not to mention that these specifications must be supported by the ebook reader. So we will treat these definitions as young at this moment, and perhaps in the future, once it has become more mature and practiced, we can update this article. Let’s look at the commonly applied widgets instead. From what we have seen, every widget can be categorized into one of two groups: popup widget or page widget.

Popup widgets (a.k.a iBooks Author widgets)

Popup widgets are our best effort in naming this kind of widget in the most meaningful way. Those are the types of widgets used in Apple’s iBooks Author (discontinued in 2020). These book widgets are represented by a button on the page that can be placed anywhere. Once the user clicks the button, the widget app will open in an independent popup window, filling the screen. Popup widgets are better used for apps that need to take a big chunk of the screen and do not need to have the ebook content concurrently visible. Examples include interactive maps, exercises, and mini-games.

Page widgets

Page widgets, on the other hand, appear inside the ebook page itself, alongside the book content. In fact, the widget flows with the book content and preserves its order within the information. This is better for widgets such as animations, charts, forms, interactive info-graphics, or any kind of material that needs to be backed up by surrounding content. This is technically feasible using a canvas or iframe HTML element. The drawback here is that the available space for the widget is limited. Not to mention, having many widgets running simultaneously can affect the ebook’s performance.

Where to find book widgets?

There’s no better answer than to Google them. Different companies provide specialized widgets, focused on their cause. However, there are a number of websites dedicated to book widgets, which you can use to download common book widgets. You can even customize them with your own content and design. We’ve been using two for quite a while in our projects, and we greatly recommend them.

Bookry offers 34 free widgets available for download. Their widgets fall into three main categories: puzzles and games, web services and functions. Their widgets are cloud-based, which give you some benefits, such as tracking user behavior, collecting analytical data, and pushing updates to your widget automatically. The widgets are customizable such that you can be using your own data (for quizzes, tests, etc.) or your own imagery (for games and puzzles). Bookry can develop custom widgets for you at $499.95 or allow you to use their available free widgets in a single book, without the Bookry branding, for $124.95.

BookWidgets is a similar provider of book widgets like Bookry. They provide customizable widgets in diverse categories, but we realize there is a particular focus on education, such as exercises and school activities. Widgets are free to use, but they are overlayed with a watermark that is removed once you subscribe. The subscriptions are annual and give you access to all widgets in their library. Subscriptions are $49/year (for teachers) and $199/year (for publishers).  You may access the widget library from here.

*Any mentioned prices were checked at the time of publishing this article and is due to change in the future.

Adding book widgets in Kotobee Author

Kotobee Author supports both types of widgets: popup widgets and page widgets. This means that you can use any of the widgets available from the previously mentioned websites, even though they are thoroughly marketed for iBooks Author / iPad. The widgets will run correctly and consistently for web, desktop, and mobile (Android, iOS, and Windows Phone).

To add a widget into your ebook, click on the Widget tool from the toolbox.

You will first need to choose which type of widget you want to add.

With page widgets, in particular, you will have further options to set, such as the dedicated space for the widget, margin, and text-wrap. For popup widgets, you will be able to select a custom button image of your choice. Click on Create, and your widget will be added.

How to create book widgets from scratch?

Creating your own widget from scratch highly depends on your web programming proficiency. If you believe this is something difficult for you then stick to widget builders like the ones in Bookry and Book Widgets. If you need to create something very specific then here are some guidelines for the process.

As we’ve already mentioned, an ebook widget is basically an HTML5 app bundled into a Zip archive. The HTML5 app may consist of a root HTML file along with a collection of images, JavaScript, and CSS files. It does not mean that the entire functionality is limited to these files. It can be shared with a backend system, written in any language of your choice, such as PHP, Java, or .Net. If a backend system is used, then an internet connection is required for the widget to operate correctly. A smart widget may run without an internet connection, but once one is detected, it will utilize services from the backend.

JavaScript is perhaps the most important coding tool required since it’s what intercepts interaction from the user, as well as controls what displays on the screen. Entire games and apps may be developed using JavaScript. To develop your widgets, you can use JavaScript frameworks and libraries, that can ease the process for you, such as jQuery, Angular, Knockout, etc. Just be careful with the file size – many times you’re better off sticking with vanilla JavaScript (plain code) if you want to achieve simple functionality.

After your app is developed and ready, name the root index file as index.html. All that is left, to make the widget compatible with iBooks Author (discontinued in 2020), is to add an Info.plist file. This file defines some properties that are not mentioned elsewhere, such as the width and height of the container, and the location of the root file (index.html in our case). Also, if you would like to represent this widget with a certain icon as the button, the icon should be named Default.png and should sit at the root level. This is an example of an Info.plist file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0"><dict>
<key>BackwardsCompatibleClassLookup</key>
<true/>
<key>CFBundleDevelopmentRegion</key>
<string>English</string>
<key>CFBundleDisplayName</key>
<string>calculator</string>
<key>BRNotifiesOnReady</key>
<true/>
<key>CFBundleIdentifier</key>
<string>com.bookry.calculator.embed</string>
<key>CFBundleName</key>
<string>calculator</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleVersion</key>
<string>1.0</string>
<key>KFNotifiesOnReady</key>
<true/>
<key>Height</key>
<integer>768</integer>
<key>MainHTML</key>
<string>ibooks_container.html</string>
<key>Width</key>
<integer>1024</integer>
<key>IBNotifiesOnReady</key>
<true/>
</dict>
</plist>

Place all the files into one folder postfixed with “.wdgt”, compress it into a zipped file, and congratulations!

In a separate article, we will take a real-world example and implement a book widget completely step by step.

Conclusion

Widgets are potential game-changers in the industry. They just need the right exposure and creative implementation to make it spread. Book widgets will give a real boost to your ebook and add true interactive value to it. Luckily, with specialized providers such as Bookry and BookWidgets, it’s easy to get your feet wet immediately without requiring the expertise. Otherwise, you can develop your own widget using open web technologies. Whatever you create, let us know, and we’ll be happy to share it across our channels!

Read these posts.

Creating a BMI Calculator Widget for Your Ebook

Utilizing Anchors in Your Ebook

Turn Your Book into an Ebook App in Minutes