How to Create Web Widgets for iBooks Author - dummies

How to Create Web Widgets for iBooks Author

By Galen Gruman

iBooks Author provides HTML objects that can contain HTML snippets (what Apple calls web widgets), which let you run website-like functionality from an e-book. You can’t just copy the HTML code for a standard web page; you have to create what Apple calls a web widget by using its Dashcode tool, a free download from the Apple website (it does require that you register as a developer).

To add an HTML object, choose HTML in the Widgets icon menu in the toolbar or choose Insert→Widget→HTML. To get the web widget code into a selected HTML object, you have a couple of options:

  • Drag the Dashcode widget file from the Finder onto the object.

  • Click Choose in the Widget inspector’s Interaction pane to open a settings sheet, where you can locate a Dashcode file, select it, and then click Insert to add it to the HTML object.


Because HTML objects play back in full-screen mode on the iPad, the default size for an HTML object is relatively small, under the assumption that the preview image is more like a button or an icon than a detailed facsimile of a web page. You can resize the HTML object like any other object if your preview image warrants a larger size.

If you plan on doing more than basic Dashcode widgets, you need solid HTML, CSS, and JavaScript skills. But the basic process for creating a web widget is the same, regardless of its complexity.

When creating a web widget in Dashcode, the first decision is the type of web widget you want to create. To specify the widget type, follow these steps:

  1. Launch the Dashcode application on your Mac.

  2. Open a new project by choosing File→New Project.

    Alternatively, you can press Command+N.

  3. Choose Dashboard as the widget type from the left pane in the settings sheet that appears.


    You can’t use Safari widgets in iBooks Author.

  4. Select the desired template from the settings sheet, and then click Choose.

    You can also click Open Existing to continue working on a previously created widget.

In the project window that opens after you create a widget, a list of object attributes appears in the left pane, and a list of tasks appears at the bottom of that pane. The options vary based on the type of widget you chose to create.


The third-generation iPad has a screen resolution of 2048 by 1536 pixels, but you still set the web widget’s dimensions for the 1024-by-768-pixel resolution, both for compatibility with the millions of earlier-generation iPads and because the third-generation iPad uses its extra resolution not to cram more pixels on the screen but to produce smoother pixels that look more like real-life images.

Because web widgets in iBooks Author’s HTML objects run at full screen on the iPad, take full advantage of that screen size for your widgets.

After you set the web widget’s visuals, go through the various components listed at the bottom of the left pane. You can also display (and edit) the relevant code below the main window by choosing View→Source Code or pressing Command+2.


Below the components list is the Workflow Steps pane, which lets you scroll through the steps needed to complete the web widget, with required actions listed. Click the triangle icon to a requirement’s left to have the main window show the appropriate settings. Click Mark as Done for each workflow step you’ve completed so that you can easily track your progress.

Preview your web widget by clicking the Run button in the toolbar.

To get the web widget into iBooks Author, go to the final workflow step (Test & Share) and click the Share option. Click Save to Disk to create the widget (.wdgt) file that can be imported or dragged into iBooks Author.