Embedding interactive widgets in WordPress sites

Update November 2016: We now provide a specific BookWidgets plugin for WordPress.

BookWidgets widgets can be used in tons of places: in ebooks, standalone, in Google Docs or PDFs and even in websites. WordPress is a free, simple, yet powerful blogging and content management system, powering over 60 million websites around the world.

And yes, BookWidgets widgets can be added to WordPress sites as well. Here’s how to do it.

Installing the BookWidgets plugin

Embedding a widget in a WordPress site is very easy using our free Wordpress plugin. To install the BookWidgets WordPress plugin, head over to the admin area of your WordPress site, navigate to the “Plugins” section and click “Add New”. Next, search for “BookWidgets” (caution, in one word) and click “Install Now”.

That’s all!

Installing the BookWidgets WordPress plugin

Step 1: Install the BookWidgets WordPress plugin

Once installed, you can use two new WordPress shortcodes in your pages, aptly called [bw_link] and [bw_embed].

Using the [bw_link] and [bw_embed] shortcodes

Now that the BookWidgets plugin is installed, let’s see how to use it.

First, you’ll need to get the shortcode of your widget. This is not to be confused with a WordPress shortcode! A widget shortcode is a unique ID that we use to identify a particular widget that you make available on the BookWidgets cloud servers.

If you’re using the BookWidgets desktop tool for Mac or Windows, you do that by clicking the “Upload” button and writing down the widget shortcode: Finding a widget shortcode in the BookWidgets desktop tool

Finding a widget shortcode in the BookWidgets desktop tool

In case you’re using the BookWidgets web editor, there’s no need to upload, just hit the “Get shareable link” button and write down the widget shortcode from the dialog that pops up: Finding a widget shortcode in the BookWidgets web editor

Finding a widget shortcode in the BookWidgets web editor

Armed with the widget shortcode, you can now add the widget to your WordPress page like so:

Adding a BookWidgets widget to a WordPress page

Step 2: using the bw_link and bw_embed shortcodes

  • [bw_link] adds a hyperlink to a widget to your page.
    Example: [bw_link code="ABCDE"]my widget[/bw_link]
  • [bw_embed] places the widget directly into your page.
    Example: [bw_embed code="ABCDE"]
    This shortcode also supports the width and height parameters to resize the widget frame.

Of course, replace ABCDE with the shortcode of your widget in the examples above.

That’s all there is to it! Here’s what the result looks like: BookWidgets widget embedded into a WordPress page

Step 3: glorious widgets embedded in your WordPress page!

Some restrictions to be aware off

Since these widgets are hosted on BookWidgets servers, we do have to be mindful of the costs to provide this service. For teachers using this in their classrooms, there’s no problem, feel free to use this in your lessons as you see fit.

For commercial use or MOOCs, however, we do ask that you get in touch with us to discuss your needs.

Modifying the BookWidgets WordPress plugin

If you’re a developer, and would like to make changes to the BookWidgets WordPress plugin, you can find the source code on github here.

Niels Vanspauwen

Join over 30,000 subscribers and get the best content on technology in education.

BookWidgets enables teachers to create fun and interactive lessons for tablets, smartphones, and computers.

Choose from over 40 exercise templates (quizzes, crosswords, jigsaw puzzles, ...), and adapt them with your own content.