With Kotobee you can 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 will run smoothly inside your ebook. 


The root HTML file of the app must be named either index.html or main.html. Have your widget's ZIP file ready.


1. Click the Widget button in the interactive content panel on the right side of the Edit Screen.


2. The Insert/Edit Widget window will open.



3.  You will have 2 choices for how the app will appear for your readers:

    Popup Widget:  The widget's icon will appear in the ebook.  After the reader clicks on the icon, the widget appears in a popup window.

    Page Widget: The widget will appear as part of the ebook page.

    Select the one you prefer.


4.  Click Add Widget File.


5.  Select the app's ZIP file on your computer, then click Open.


6.  Optional settings

    for Popup Widgets  

        a.  Add your own icon. The widget will come with an icon, but if you want, you can change it.

        b.  Close button position. You can set the close button to be on the Side, or Top.To remove the close button select None.

        c.  Class. If you're adding CSS or Java customization, add the class here.

        d.  SCORM.  If you already have objectives set up, select it from the dropdown box.


for Page Widgets

        a.  Width and Height.  Set the width and height of the app in pixels or as a percent of the original size.

        b.  MarginSet the amount of white space (in pixels) that you'd like around your app.

        c.  Text-wrap.   If you're using reflowable layout, which option would you like?  

App alone on a line without any text surrounding it, select None. 

App on the left and text on the right, select Push left.  

App on the right and text on the left, select Push right.  

        d.  Class. If you're adding CSS or Java customization, add the class here.

        e.  Interaction:  If your app is interactive, check this box.

        f.  Scrolling:  If your app is larger than the space you allotted for it in your ebook, add scrolling.


7.  Click Create.

    For Popup Widgets The widget' s button will appear in the Edit screen. 

    for Page Widgets The HTML5 App will instantly appear in the Edit screen. 


To test run your app, click the Preview button in the bottom right corner of Kotobee Author.


If you want to add your HTML5 App as popup widget, then follow these instructions to Turn an HTML5 App into a Popup Widget.


If you have a ready-made widget and would like to insert it in your ebook, read this Add a Ready-Made Widget.