Creating an HTML Widget for iBooks Author to Embed a PDF File

apple_ibooks_authoriBooks Author is a free app that allows  you to create interactive eBooks for iOS devices. iBooks Author is simple to use and an appealing feature of the app is that media can be included in the iBook. An HTML widget allows you to create your own HTML tools to add extra functionality to an iBook. A limitation of iBooks Author is that you cannot embed a multi-page pdf into an ebook. You can create links to a website where a PDF is hosted, but you are then limited to reading the PDF when you have an active connection. I wanted to explore how to embed a pdf into an iBook using the HTML widget tool, so that PDFs can be included in the body of the book, and are not dependent upon an Internet connection.

I built my widget based off a project in GitHub by Trevor Burnham called the iBooks HTML Widget Boilerplate. To customize this widget for your needs, all you need is an HTML editor for the Mac (TextEdit works fine) and an image editor to create the widget image.

Here’s the steps I took to create my widget (Note: I kept all the filenames used in the boilerplate, replacing my own files for the examples (for, example, I renamed my widget icon “default.png,” replacing the default.png in the Widget Boilerplate folder and I did the same for the main.html file):

  • I copied my pdf into the Widget Boilerplate folder
  • I edited my widget image and renamed it default.png and copied and replaced the default image inside the folder
  • I opened main.html in TextEdit (set your preferences to ignore rich text so you can edit this file in plain text)
  • I deleted everything in the body and put this JavaScript in between the head tags (this is code for redirecting to a page or in this case, a file):
  • <script type=”text/javascript”>
    <!–
    window.location = “my_pdf_file_name.pdf
    //–>
    </script>
  • Once you are finished editing the files, add the extension .wdgt to the entire folder. This will make the folder contents a widget.
  • Open iBooks Author and drag and drop this widget into your iBook. To edit the size and text, use the iBooks Author Inspector and choose the widget section.

If you need to back and tweak your iBooks HTML widget, delete the .wdgt extension (go into the info of the widget (i+Command), and delete it in the name) and you’ll see your folder with all its files.

Also remember to optimize your pdfs so they balance legibility with the smallest possible file size. The more assets you add to an iBook, the bigger the file size, impacting load time on the device.

This entry was posted in Educational Technology and tagged , , , , , . Bookmark the permalink.