When it comes to online shopping, traditional e-commerce platforms have distilled the transactional aspect of shopping down to a tee: a big warehouse of goods present in a grid, and a checkout. It’s efficient, yes, but it’s hardly inspirational.
When you imagine a great bricks-and mortar store, it’s equally about the goods on sale as it is about the way they are presented. Many brands feature sights and sounds in-store that help build on their desired brand image. So, why wouldn’t you want to do that online?
Did you know that you can do just that by embedding audio into your Flipbooks?
Why you should embed audio into your Flipbooks
Like video, audio is a powerful medium for conveying information, whether that be an industry-relevant podcast you host, extra product information, or even a preview of, for example, an audiobook or how an instrument sounds.
Today, more and more written content is supported by an audible counterpart. This allows your users to consume and engage in your Flipbook whilst performing other tasks. Embedding audio in your Flipbook can also increase the amount of time a user spends browsing your catalog, again, increasing the chances that they convert. Audible versions of your Flipbook content can also increase the accessibility of your content, by turning text into audio via NLP – natural language processing.
How to embed audio content in your Flipbook
Choose an audio hosting provider
We recommend that you use a dedicated audio hosting service to host the content you’ll be embedding in your Flipbook. There are all kinds of services available, so take the time to choose a service that fits with the level of volume and price that suits you.
💡 Bear in mind, that many services offer a free version that allows you to try, and test out which works best for you.
Embedding your audio content in your Flipbook
In order to embed audio into your Flipbook, you’ll need to create a new, or use an existing Enrichment to ‘anchor’ it in your Flipbook.
Next, once you’ve selected the Enrichment that will anchor your audio, and under Properties, in the right-hand menu you’ll want to Select an Enrichment Action. In the dropdown menu, you’ll want to select Popup Frame.
Selecting Popup Frame will make several new fields available to you. The only mandatory field here is the URL field, and it’s here that you’ll be placing your embed link that will link to your audio content.
You’ll need to copy the embed link from your audio hosting service. Although there might be minor differences, most services allow you to copy an embeddable link by accessing the file’s Sharing or Embed settings.
SoundCloud, for example, provides you the embeddable link for an audio file when you click Share, and then select Embed from the popup that appears. Here, you can copy the embed code.
💡 If you’d like to have your audio content enabled to automatically play in your Flipbook when the CTA is clicked, you’ll need to make sure that Automatic play is enabled.
Once you’ve copied your embed code, you’re ready to paste it into the URL field for the Enrichment in the Enrichment Editor. Remember, it is not enough to simply paste in the link for the URL, as the function of the Enrichment is to trigger a Popup frame. As such, the embed code must include a ‘mini-player’ of sorts, from which your audio content can be played.
Don’t worry, the vast majority of audio hosting services take this into account and provide you with a fully useable embed code out of the box.
Above is an example of an embeddable widget from SoundCloud. Highlighted in red is code that defines how the embeddable player will appear when triggered by your Enrichment. Highlighted in green is the URL defining the location of your audio content.
Setting Max-width and Max-height is important, as this will define the size of the popup window the displays when the Enrichment is triggered. Most audio hosting services have a preferred size that corresponds to the dimensions of their player widget.
You can usually see this defined as the width and height dimensions of an iframe, in the code. If you’d like no additional border on your popup, ensure that the max width and height matches that of the embeddable widget.
If you’d like some extra space around your embedded player, you can define the color of this background in the Background color field. By default, this will be the brand color inherited from the global Flipbook settings. If you’d like to include hover text that displays when a user hovers over the Enrichment with their cursor, you can include this in the Hover text field.
That’s it! Make sure to always save your work. Now, when your customers click on the Enrichment in your Flipbook, they’ll be presented with an embedded player from which your audio content will play! 🎶
💡 As always, if you're unsure of anything, or have a few questions that need answering, we're on hand to help! You can reach out to us via the chat at the bottom of the page. 😀