When you think about a page or a publication’s interactivity, the word ‘widget’ will most likely come to mind.
If you want to make your work more interactive and, at the same time, more visually appealing, then this article can provide valuable insight.
Interactivity is vital when it comes to audience engagement. It can set you or your brand apart and provide you with valuable feedback regarding how your audience perceives you or your product.
In the following, we will discuss at length the benefits of iframe widgets and how they can help you enrich your flipbooks. We will also provide examples and a step-by-step guide to having all the relevant information at hand reach. Well, not ‘hand,’ but mouse reach.
Clicks and scrolls won’t break bones but will shed some light on <iframe> widget integration value. Let’s take a closer look at what they are and which are the most popular ones for you to use on a regular basis.
For more interactive HTML5 flipbooks, we’ll show you how to add anything from surveys to virtual tours by embedding a simple iframe code:
Let’s start from the beginning. Widgets differentiate themselves from apps by being self-contained boxes of code that run inside your page, phone home screen, etc. Unlike apps, you don’t have to physically open them for them to run.
Right, it may sound a bit too technical. Let’s try a different approach. Think of your desktop. There you have all the relevant shortcuts from your programs. Widgets are like a shortcut from a third-party provider that allows users to fill in a form, for instance, without being transferred to another website. Basically, a widget is an application that will enable you to perform a function right on the spot.
Maybe you want your reader to fill-in a survey but at the same time you don’t want him leaving your publication. The more he stays, better the chances of him becoming a customer, right? Right! Widgets allow you to do exactly that. By embedding them in your publication, or more simply put, by adding them to your publication, you hit two birds with the same stone.
What are iframes?
Now that we know the basic function of a widget let’s take a look at iframes as well. Iframes are, well, frames. Think of digital illustrations or photos. You can order the same image in multiple copies. After that, you will want to frame them and hang them on your walls. But not every type of frame works for every room. Each room requires a specific frame. The same can be said for widgets. Within those iframes goes that piece of HTML code that will allow you to embed your widget.
The HTML code of the <iframe> widget is like a language. But not all of us speak the same language. Iframes translate that code into your flipbook so that it becomes that visually interactive and recognizable widget.
How to embed iframe widgets into your flipbook?
You’ll notice that when you start editing your flipbook, in the left column of your Design Studio, among numerous options, there is also an Interact button. See the picture below for reference. Under the Interact button, you will find the option to embed your <iframe> widget into your flipbook.
Drag the embed frame wherever you want on your page and then click Add code (located above). Here you will need to copy the embed code from the third-party that provides the widget. For instance, if you would like to embed a video from YouTube, then right under the video, you’ll find the Share button. Clicking on it, you’ll notice that there are many options present there, one of which includes Embed. Click on it, and you’ll find your embed code ready to be copied anywhere you want in your flipbook. The same goes for most other websites. Search for the Share button (or, in some cases, there will be an upfront Embed button right aside) and Copy it in your publication.
The code in question should look something like this:
<iframe> widget example:
The main thing to keep in mind is that for your widgets to work and display in your flipbook, they will need to be <iframe> embedded. Although most providers offer you the option to embed their applications, not all of them offer a <iframe> format for this. Keep an eye out for embed codes that look like this:
Non<iframe> widget like the one above? Here’s the workaround:
Like I said earlier, although embedding is possible, the frame isn’t quite right. Embedding the code above in your flipbook will generate an error. Why? Because the code is not properly formatted. And by formatted, I mean that it doesn’t have the correct frame around it. This is no issue, as any block of embed code can be translated into the correct format (<iframe> format). How?
Copy the following <iframe> format into your Add code box:
<iframe src=”Paste here the link of your widget” width=”100%” height=”480″ seamless=”seamless” scrolling=”yes” frameborder=”0″>
Replace the “Paste here the link of your widget” text with the application provider’s link, and you’re good to go. Now your widget is compliant with Flipsnack, and it will display beautifully and in a fully functional manner in your publication.
Types of iframe widgets
Now that we know what iframe widgets are and how they can provide a richer visual experience, let’s take a closer look at some of the most popular types out there.
Note: As stated in the beginning, the below list is by no means an all-encompassing one. There is a myriad of widget options out there for you to embed. Basically, as long as you have an idea, there’s an iframe widget out there waiting for you. We just highlighted some (most) of the widgets that we think are the most common and, at the same time, efficient for adding a splash of color to your presentation.
These may be the most often used widgets around. It’s no surprise, really, given that you can use them in almost every area of human activity. They can have an educational purpose, they can serve in conducting market research, or can be used to garner feedback from people in the real estate business. After all, your offer must reflect the needs and desires of the people.
Tourism is yet another prime example of effectively using a survey. When we look for hotels, we look for reviews. The hospitality industry boils down to customer service and feedback, so a survey could help you find some vital information.
Below we’ve highlighted two providers of such surveys, but there are many others out there. We’ve created a survey using their platform and successfully embedded it in our flipbooks. Take a look below at the final result:
As mentioned earlier, the hospitality industry relies heavily on customer feedback, so we opted to go with a hotel survey to illustrate how you can integrate this application into your flipbook.
How do you do it? You must first create an account on SurveyLegend. After that, the process is fairly straightforward. After you’re done designing your survey you’ll notice that the last step is Share (because sharing is caring, right?).
After you click Share, you’ll notice that there are multiple options available for sharing on the left side. Select Embed in web page and copy the link that the guys at SurveyLegend provide.
Moving on to other types of interactive content, let’s take a look at Forms. We said that surveys may be one of the most popular options out there for integrating into a flipbook. The same can be said and be equally valid about forms.
If you want to collect information in a unified and logically consistent manner, then adding an interactive form to your brochure, for example, can be of great benefit. You can also use it to conduct a brief study or within the departments of your organization (requests for annual leave, for example).
Again, we selected two different providers and achieved great results with both. As with SurveyMonkey, with both of these form providers, you will have to manually construct your iframe widget using the same model as above.
We promise it’s worth it, as both of them work flawlessly when integrated into the flipbook.
Integration with Typeform works excellent, the result is responsive and visually appealing. We did not encounter any issues from an interactivity standpoint when adding the finished form to our flipbook. Given that we went with a health care template, it made sense for us to use a quick, on point, case study form. The end result looks good and makes a valuable addition to the finished template.
Again, if you want to use Typeform (and we strongly recommend so), just don’t forget to use the <iframe> code you copied earlier. Inside it just Paste the embed code that Typeform provides and then Copy it into your flipbook. That’s it!
Same situation here as with Typeform. Their embed code is not <iframed>, so that means you’ll have to manually set it up yourself by following the same steps as above.
Again, there is no issue with this, you simply have to Copy that code and Paste it into our default <iframe> box, resulting in something like this:
This is how your final embed code will look before adding it to your flipbook. Visually, we are more than pleased with how Paperform performed when integrated into our flipbook, the end result being both thematically and aesthetically pleasing.
Going with a modern sales report template, of course, we wanted to remain consistent and use a form suited for the template’s purpose. Luckily, we didn’t have much digging to do, as Paperform’s templates provided the right option from the start. You can see that the final result looks and feels great, so we definitely recommend checking Paperform out for adding valuable interactive content to your flipbooks.
If you visit their website, and we strongly recommend you should, then you will see that right after uploading the pictures for your presentation, on the left, the embedding link is already prepared for you to share. As a bonus point, it’s already <iframe> encoded so you simply have to Copy the link and Paste it into the embed box of your flipbook.
This may seem like a no-brainer, but many people overlook the importance of embedding a map into their travel brochure or presentation.
Granted, maps can be extremely useful for other purposes as well. If you are a real estate agent and want to bring some buildings into the spotlight, maybe sharing their location is a sound strategy.
Your clients don’t need to be a Columbus navigating through the seas of the Internet. Nor should they. You can offer them the full extent of your content just by accessing one of the 21st century’s closest friends, Google.
We used our stunning travel & tourism brochure template to illustrate how a Google map can be embedded into a flipbook. The Duomo is a magnificent feat of human ingenuity, so we also wanted to show precisely where you can find it in Florence.
As you can see, the addition of the map is not intrusive, on the contrary. It blends beautifully with the page, the brochure retaining its elegance while at the same time being more informative.
To add a Google map, you only need to search for the precise location and then, under the Share button, you’ll find the link for embedding. Take a look at the picture below to see where precisely you can locate the mentioned option.
Once again, Google’s maps are already <iframe> encoded so you don’t have to bother yourself with manually formatting the code. It’s just Copy and Paste into the embed box on your page.
At Flipsnack, we spent a lot of time and effort in constructing a Design Studio that can allow you to manipulate your information in every shape or form. To quote Bruce Lee, you can be water, my friend. Videos can be added from various sources. We will focus on two main ones, YouTube (obviously) and Dailymotion.
Both of these video giants have their embed code already formatted in a <iframe> manner. Again, we went on with our tourism travel template, highlighting Florence. We’re not Italians, we promise.
As you can see, both YouTube and Dailymotion function perfectly embedded on our flipbooks.
Videos can make any brochure feel more alive and memorable. Sure, text and photos play a huge role in the overall impact upon your viewer. But videos offer a sense of motion, of immersion. Just think how often you search for guides on YouTube. Sometimes videos are more comfortable to follow. They also occupy a small physical space on your page, so basically, their integration should pose no issues whatsoever.
Note:Matterport and Vimeo are also viable solutions for video creation and integration that we strongly recommend you take a look at. Here you will have to create your video yourself, so for those of you interested in videography, hesitate no longer.
With their tool, you can create an immersive 3D experience that you can further translate into your flipbooks by embedding an iframe widget inside. Be sure to check them out!
Talking about an immersive experience, we also have to mention virtual tours. They are becoming more and more present, as many museums, for instance, offer these tours freely, and online.
We all love our couch and sofa, so virtual tours can become an obvious choice. Sounds like an ode to laziness? Museums are not the only ones that can benefit from a virtual tour.
Virtual tours can work wonders for real estate agents looking to entice their customer’s appetite for a new house. It can also be a time-saver for that potential customer, as he or she no longer has to walk down to the house’s location. They just need to scroll, this making their eventual phone call for you all the more relevant.
How do you add a virtual tour to your flipbook? In the case of TrueView360s, you will have to:
As you can see, by default, the guys at TrueView360s don’t offer an <iframe> embed code. Simply follow the steps you already know, and you are good to go. Note: You can also use the aforementioned Matterport to create your own virtual tours. 3D virtual tours can win more listings, so be sure to check them out. It’s well worth the time and effort.
Virtual tours are amazing. They give you a glimpse into places you really, really want to visit. So, before having the chance to embark on your next adventure, technology has made it possible to virtually visit museums like Louvre, National History Museum in London and so on.
Why add virtual museum tours into a flipbook? Well, because it’s a fantastic online learning tool that makes lessons more engaging and fun. Imagine how exciting it would be to create a history lesson plan about the Mesozoic Era and dinosaurs by virtually visiting the National History Museum in London.
Here’s an excellent way to integrate virtual museum tours as an iframe widget in your next flipbook:
Sketchfab 3D models
SketchFab is one of the websites where you can explore a multitude of 3D models. From architecture models to museums, places and travel, cars and even sneakers, you will surely find what you’re looking for.
For the sake of this article, we integrated a 3D virtual tour of the Hintze Hall of National History Museum in London in a Back to School newsletter template. It’s super fast and easy to do. Here’s how: Once you find the 3D model you wish to embed, click the Embed button.
Here, you can click on certain options and customize the way you want this virtual tour to appear in your flipbook. However, the most important thing here is the <iframe> embed code. Once copied, the only thing you need to do is to paste it within your flipbook.
Our final result looks like this:
Virtual tour of Louvre Museum
Lucky for us, many museums around the world offer free virtual tours. So yes, we can visit some of the most impressive art pieces in the world from the comfort of our own homes. For example, Louvre Museum offers a free virtual tour of the Petite Galerie. What a joy!
Copy and Paste this code in the embed box on your page.
Voila! That’s all you need to do really. Here’s the final result:
Click the image above to flip through our flipbook and see the virtual tour in real life. Enjoy!
Why add music or podcasts in your flipbooks? Let’s say you’re in charge of organizing a dinner for your friends and family. Set the mood by embedding a jazzy dinner playlist in the event invitation you’re sending out.
Throwing a 90’s themed party? Put together a playlist on Soundcloud or Spotify with your favorite Britney Spears and Backstreet Boys songs and bring back some nostalgia vibes.
Perhaps one of the most popular choices when it comes to creating music playlists because of the song variety, Soundcloud can be easily integrated into Flipsnack. Hang on, we’re describing the entire process:
After you’ve created an account on Soundcloud and put together that list of musical jams, things are pretty simple. As an example, we used an elegant wedding newspaper template to create an interactive, personalized wedding newspaper. We integrated a wedding playlist inside, through Soundcloud. What a great way to set the mood for your upcoming wedding? And maybe ask wedding attendees to come up with some groovy tunes.
On to the more technical details:
After you’re done putting together your playlist, click Share on Soundcloud. Then Embed
Copy the WordPress code and paste it in your flipbook. By default, this is an <iframe> type of code, so it should work seamlessly.
Here’s the final result. This is the wedding magazine where we added an iframe widget, the wedding playlist of our choice. This will surely make people excited about your upcoming event.
You can customize any type of flipbook and add the music of your choice.
There’s no need to talk about Spotify. You can basically find any type of music and playlists there, but Spotify is also home to thousands of podcasts. Here’s how to add a Spotify playlist or a podcast in a flipbook:
Head over to the podcast or playlist of your choice and click Share.
Next, copy the embed code and paste it into your flipbook.
The final result will look something like this:
In this case, we edited a school newsletter with some home activities for parents and kids and podcasts to listen to while on summer holiday. Teachers, you should give it a try!
Do it yourself
As noted in the beginning, we wanted to showcase how you can transform your presentation into a feat of strength! We focused on the most popular and sought after widgets and managed to create something quite spectacular. Following the steps presented above, we are certain you can easily integrate, pretty much, any type of iframe widget within your flipbooks and take them to whole new interactivity levels. Just get creative!