Learn how to add custom interactivity with HTML, CSS or Javascript in Kotobee Author. The code editor for HTML, JS, and CSS provide keyboard shortcuts, color hinting, and code completion to assist you with the coding.

Editing the Source

Click on the Source Mode button at the bottom right of the screen, to edit the current chapter's HTML source. 

If you want to add HTML code for interactive content, simply add it here. Websites like Sketchfab, an online library of 3D models, provide an embed code (basically an iframe). Your readers will find 3D models in your ebook that they can rotate to view from different angles.

Chapter CSS and Global CSS

Click on Chapter CSS or Global CSS button at the bottom right of the screen, to add your own custom styles. This is a quick way to impose a certain formatting on certain elements, such as headings or paragraphs. 

Kotobee Author supports CSS3 allowing you to add various interactions, transitions, and animations. 

Chapter CSS applies to the current chapter only, while global CSS applies to all chapters in your ebook.

Chapter JS and Global JS

Click on Chapter JS or Global JS button at the bottom right of the screen, to add Javascript code. That's when the doors really open. 

Although this requires some Javascript coding experience, you can achieve any kind of interaction here. Along with events inserted through source mode, you can have any element respond by calling a Javascript function you have defined. 

As a scenario of how Javascript may be useful, imagine a children's storybook where the child may enter his name in a text field in the first page, and throughout the story finds his name used in place of the hero's name. Again, the sky's the limit!

Chapter JS applies to the current chapter only, while global JS applies to all chapters in your ebook.

Controlling the Reader Through an API

A way to extend interactivity in your ebook is by using the javascript API to send basic commands to Kotobee Reader. 

This feature is available only when exporting a web ebook. The normal process is to upload all your web ebook files to a directory and have that directory be the destination to access the ebook from. 

To use the javascript API, you will need to upload the web ebook files to a different (hidden) directory and refer to the ebook in your webpage using an iframe tag. Now, you will be able to send commands to the ebook from the same page. 

The list of possible commands is as follows.

• next: Go to the next chapter
• prev: Go to the previous chapter
• notebook: Open the user's notebook
• goto:x : Jump to a certain chapter, indicated by the number: x
  

The command will be issued as an iframe post message (i.e. postMessage). For a comprehensive example of issuing a command to jump to chapter 4, see the following:

<script>
        function action() {
            var book = document.getElementById("book");
            book.contentWindow.postMessage("goto:4", "*");
        }
</script>

<iframe id="book" width="100%" height="100%" src="ebook/index.html"></iframe>
<button  onclick="action()">Go to chapter 4</button>