Integration

1. Kitaboo SDK Inject

To integrate SDK into project we need to place sdk folder into our application and then we need to inject its javascript, css in our index file.

SDK is minified and compiled into two JS files sdk.js and component.js

Add below lines in your index file
<script src="../sdk/kitaboo-sdk-lib.js"></script>
<script src="../sdk/kitaboo-sdk.js"></script>
<script src="../sdk/kitaboo-components.js"></script>
CSS:
<link rel="stylesheet" href="../sdk/css/kitaboo-sdk.css">

Folder:
keep worker folder and kitaboo-sdk.js at same level 

2. Book Integration

Assuming bookshelf is available we need some basic book information to make our reader with SDK up and running. Following data has to be passed from Bookshelf to the Reader : Usertoken , Bookurl, service url, bookID, bookVersion, ClientID

• Create an index.html file; this file will act as a reader and will also be used to interact with Kitaboo Web SDK.
• Load all the basic dependencies in index.html related to the reader and sdk files mentioned above.
• Create the basic view of the reader and add one main div to render the book.
• The main div to render the book should have the id and class as "epubviewer".

3. SDK Initialization

Next initialize the SDK and pass the client ID. If you do not have a client ID already, please get in touch with the support team. In the main.js file, add below lines of code and change the client id value with yours.

var config = {
        clientID: '11111111'
    };
var sdk = new KitabooSDK(config);

4. Renderer Initialization

Once SDK is initialized we need to initialize the Renderer. Renderer is responsible for loading the book and rendering the epub in main div.

Once loaded, Renderer Object contains all required information of book object which can be used later to customize the Reader.

// kitaboo render options
    var option = {
        defaultnavigation: true, // default navigation button visible
        continueScrolling: false, // need for reflow default scroll Mode
        defaultHighlightsupport: true, // default kitaboo highlight support
        defaultDoublepage: isTouchMode ? false : true, // show page in 1 or 2 page spread's. default is 2 page spread's
        defaultHorizontalPageScrolling: true, // pagination vertical or horizontal
        maxPagesCacheLimit: 6, // number of pages to be cached
        pageBackgroundColor: '#FFFFFC', // color for page background
        searchBackgroundColor: '#FFFF00', // color to highlight the searched text
        audioSyncBGColor: '#6F73FF' // color to highlight the audio sync word text
    };

Initialize the SyncManager as this has the syncAdapter which will be used everywhere for service calls, and so it needs to be initialized and passed with ServiceAdapater and set service url in setHost to fetch and save UGC data. If you want to use reader without service calls then you can make the isServiceAdapator = false, as this variable is always validated before making the service calls to avoid making service calls if not needed.

//Intialize
var ServiceAdapater;
var syncManager = new SyncManager(ServiceAdapater);
           syncManager.syncAdapter.setHost(serviceUrl); // service url to use for fetching and saving the data.
        isServiceAdapator = true; // mark it to true if working on UGC

// initilaized the kitaboo render
var render = new KitabooRenderer(option);
// @variable vieweroption : viewer option used for book layout setting
var vieweroption = {
height: 500,
width: 500,
css: '
}
render.setRendererView('epubView', vieweroption);

/**
  * @param {string} bookpath : contains book path that needs to be loaded
  * @example render.playBook(bookpath, )
  */
render.playBook(bookpath,{lastSyncPage: syncManager.syncAdapter.lastPageFolioId});
}
} 

SDK will be integrated and now reader can use all the basic functionalities of SDK.

5. Epub Type Supported

Kitaboo SDK Supports below mentioned ePub Contents:

1. Fixed
2. Reflowable
3. HTML (HTML format is the custom format of HURIX with additional information like search.json and Highlight span structure).

To identify the book type in SDK book object contains layout details

Example

book.bookdata.metadata.layout != "pre-paginated" // it is for fixed Epub else it is other format

AudioBook - Coming soon

AudioBook will be available soon in SDK.

Interface to launch AudioBook that can be customized and modified to meet the specific business requirements.

Video Player - Coming soon

Video Player will be available soon in SDK.

Interface to launch Video player that can be customized and modified to meet the specific business requirements.