Ebook widgets allow you to extend the functionality of your ebook by inserting entire apps inside your ebook. In Kotobee Author there are two types of widgets: popup widgets and page widgets. They will allow the widget's app display either within the pages of the ebook, or inside a popup window.




Page widgets


Page widgets allow you to embed any HTML5 app into your page, running inside an iframe. This means you can use your favorite HTML5-animation software, such as Adobe Animate or Google Web Designer to create HTML5 apps that can run smoothly inside your ebook, and easily added by a single click. The root HTML file of the app must be named either index.html or main.html. As of Kotobee Author v1.3.0 page widgets may have the same structure as popup widgets.



Popup widgets


Popup widgets are similar to Apple iBooks Author widgets. They allow you through a single button, display respective apps inside a popup window. Common examples of popup widgets include calculators, drawing apps, games, quizzes, surveys, and much more. Ebook widgets were initially introduced by Apple iBooks Author, using their own file format and structure. Apple iBooks Author creates interactive ebooks exclusively for iPad. With Kotobee Author, you can use these same widgets as in Apple iBooks Author, but have them displayed on all the possible platforms: web, desktop, and mobile, including Android!


There are thousands of widgets available online, both free and commercial. Two popular and successful ebook widget websites are:  www.bookry.com and www.bookwidgets.com





To add a widget to your ebook, you need to have the widget file available on your computer. The widget extension is .zip. Simply click on the widget tool, and select the widget file. You will find the widget button appear in the page. To preview the actual behavior of the widget, enter preview mode for this chapter, or go to the Customize tab to preview the entire ebook.



How to create a popup widget


An ebook widget is basically an HTML5 app packaged in a certain way. The HTML5 app may consist of a root HTML file along with a collection of images, javascript, and CSS files. Here are some guidelines for the structure:

  • The root file name should be one of the following names: index.html, index.htm, main.html, main.htm
  • 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
  • If you would like to specify further details for the widget, such as the width and height of the container, you may include an Info.plist file. The Info.plist file also allows you to change other things such as the location of the root file. 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>

 

  •  All the files must be placed into a folder postfixed with ".wdgt". This folder should be altogether compressed into a zip file. This zip file is the widget file you need to include in Kotobee Author.


    For any difficulties you may face with widgets, please contact customer support.