Book Widgets: Everything You Need to Know
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.
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, 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.
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">
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.
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
Pingback: Animation techniques for ebooks - Kotobee Blog
MyLibreto, book mktgSeptember 25, 2016
A really interesting article! Book widgets open a new world of experience for ebook readers and are the bridge to the future merge of ebook and web in the ePUB web format. Thank you for this awesome state of the art post!
KotobeeSeptember 25, 2016
Glad you found it helpful.
flowneySeptember 24, 2019
Curious as to why Hype 3 and/or Hype 4 were not mentioned. They have explicit exports to HTML 5 widgets.
KotobeeSeptember 25, 2019
This article was to give an introduction to book widgets, and how to get ready-made ones. Regarding tools for creating book widgets, we did mention Tumult Hype here: http://support.kotobee.com/en/support/solutions/articles/8000070032-add-your-interactive-animation-or-html5-app