Add a story widget to your website

The story widget is a small audio player for your library’s website. It shows today’s story with its cover and a play button, and it can show your Dial-A-Story phone number too, so patrons can listen online or call.

The widget is included with Storytime Direct and Dial-A-Story Studio. You set it up once: it plays whatever your schedule says is today’s story, so it updates itself every day.

What it looks like

These are LibraryCall’s own widgets, in English and Spanish. To see one on a library website, visit Bartholomew County Public Library’s Dial-A-Story page.

Get your embed code

1. Log in to Switchboard, LibraryCall’s customer site.
2. Open Widgets. Each widget follows one of your schedules, which sets its language and today’s story. To make a new one, click + New Widget, then give it a name, pick its schedule and a theme, and (if you like) the phone number it should show.
3. Click the widget’s Preview button to check it. Preview plays don’t count in your statistics.
4. Click Get Embed Code, keep the Standard (Recommended) tab, and click Copy to Clipboard.

Add it to your website

Paste the code where you want the widget to appear. Use your website’s HTML or “source” mode, not the visual editor. It looks like this, with your own key:

<div class="dial-a-story-widget" data-key="your-widget-key"></div>
<script src="https://lcm26-prod.web.app/widget.js"></script>

• The <script> line is needed only once per page, even when a page has several widgets.
• English and Spanish: make one widget per language, each on a schedule in that language, and put each one where it belongs. For example, the English widget on your homepage and the Spanish one on your en español page.
• It works on most website platforms, including WordPress and Drupal.

If your website removes scripts (BiblioCommons, some LibGuides)

Some platforms strip out <script> tags. If the widget never appears, and the script line is gone when you look at your page’s code again, use the iframe tab in the embed-code window instead:

<iframe src="https://lcm26-prod.web.app/api/widget/your-widget-key/embed"
        width="300" height="700" style="border:none;" title="LibraryCall"></iframe>

An iframe can’t resize itself, so adjust width and height to fit your page. Use one iframe per widget.

Widget questions

Do I need to update the widget when the story changes?

No. The widget always shows today’s story from its schedule. Once it’s on your website, you don’t need to touch it again.

Where do the summary, cover and links under the player come from?

From the day’s story. For stories you record yourself, set them in the story’s Website Widget section in Switchboard: a short summary, a square cover image, and up to two related links, such as an activity sheet or a page on your library’s site.

I added the code, but nothing shows up

• Check that both lines made it onto your page. View your page’s source and search for dial-a-story-widget. If your website removed the code, paste it again in HTML mode, or use the iframe version above.
• Check the key. Copy the code again from Get Embed Code; a single wrong character stops the widget silently.
• Check your website’s address. If your library has limited which websites may show its widget, your site must be on that list. Contact us to check or add it.

The widget’s buttons are in the wrong language

The widget’s labels follow the language of its schedule. Make sure the widget uses a schedule in the right language.

Can I see how often patrons play it?

Yes. Switchboard’s Logs page has widget plays, including how far listeners get through each story.

Still stuck?

Contact us with the widget’s name, the address of the page where it should appear, and a screenshot or a description of what you see.