Add widgets in flipbooks

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. 

banner making your flipbooks more interactive with widgets

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 for you to have 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 flipbooks, we’ll show you how to add anything from surveys to virtual tours by embedding a simple iframe code:

  1. Surveys
  2. Forms
  3. Photo Slideshows
  4. Maps
  5. Videos
  6. Virtual Tours
  7. Museum Tours
  8. Music
  9. Podcasts

What are iframe widgets?

image code programming

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.

Iframes are, well, frames. More precisely, they are a specific type of frame. Within those frames goes that piece of HTML code that allows you to embed, you guessed it, 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.

how to add an iframe widget in your flipbook in Flipsnack

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. 

It 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. Some providers offer the option to embed their applications but do not provide the embed code in a <iframe> format. They will resemble something like this:

Non<iframe> widget like the one above? Here’s the workaround:

Copy the following <iframe> format into your Add code box:

<iframe src=”Paste here the link from your widget application” width=”100%” height=”480″ seamless=”seamless” scrolling=”yes” frameborder=”0″ allowfullscreen=””></iframe>

Replace the “Paste here the link from your widget application” text with the application provider’s link and you’re good to go.

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 exhaustive one. 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.

Surveys

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.

SurveyLegend

example of integrated survey widget from surveylegend

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.

SurveyMonkey

Another survey provider out there is SurveyMonkey. We’ve tested them also with good results, their interface being friendly and fairly intuitive. They also offer you the option to start from a template and you know we love templates.

Here’s a look at the final result:

example of integrated survey widget from surveymonkey

We went with a school newsletter and added an interactive Capitals of the World quiz. It works flawlessly, but keep in mind that with SurveyMonkey, you will have to manually adjust the widget code, as the default one is not <iframe>.

To do this, simply copy the URL from SurveyMonkey and use the default <iframe> code we provided above.

Your final result will look like this:

<iframe src=”https://www.surveymonkey.com/r/K7KGNHQ” width=”100%” height=”480″ seamless=”seamless” scrolling=”yes” frameborder=”0″ allowfullscreen=””></iframe>

You can further ease the process by copying this <iframe> code separately to use it whenever you need.

Default <iframe> code:
<iframe src=”Paste here the link from your widget application” width=”100%” height=”480″ seamless=”seamless” scrolling=”yes” frameborder=”0″ allowfullscreen=””></iframe>

Forms

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.

Typeform

example of integrated iframe form widget by typeform

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.

Paperform

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 default, trying to embed something using Paperform will generate your code like this:

non-iframe widget code
Source

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:

<iframe src=”https://vmkdcuwt.paperform.co” width=”100%” height=”480″ seamless=”seamless” scrolling=”yes” frameborder=”0″ allowfullscreen=””></iframe>
Visually, we are more than pleased with how Paperform performed when integrated into our flipbook, the end result being both thematically and aesthetically pleasing.

Adding a paperform iframe widget in your flipbook.

Going with a sales and marketing presentation 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, in the form of a Product survey. 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.

Photo Slideshows

We all remember school PowerPoint presentations for a reason. They are effective! Infusing your presentation with carefully selected photos can enhance your oratorical level while also providing your audience with some visual context that accompanies your information.  

Photo Slideshows can make your pictures dance and offer a more fluid, visually rich experience for the viewer. We know that photos speak louder than words, so maybe it’s time to deploy them wherever and whenever we can. 

Photo Slideshows can be used everywhere. Yearbooks, presentations, for product highlighting, for travel brochures, you name it. If the object of your presentation exists in real life, then you can, and most often than not, you should, highlight it using pictures. 

Humans are visually receptive creatures, so tickle their eyes and curiosity with flowing, crisp and unique pictures. 
As an example, we used Albumizr to create a Photo Slideshow for one of our marketing strategy presentation templates.

marketing strategy presentation template from Flipsnack

We chose Albumizr because of their extremely easy to use, user-friendly interface. The end result looked great and was achieved in an instant.

example of photo slideshow widget integrated in a flipbook

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.

Maps

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.

example of integrated map widget within a flipbook in Flipsnack

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.

how to integrate a google map widget within your flipbook

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.

Videos

Now that we talked about Photo Slideshows and Maps let’s take a look at videos also. Basically, the article’s whole point is to offer you novel ways in which you can make your product or presentation stand out. 

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.

YouTube:
example of a flipbook with a youtube video widget integration

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.

Dailymotion:
A dailymotion video widget integration in flipsnack

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!

Virtual tours

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.

Take a look above:

example of how to use virtual tours for real estate flipbooks

We used our open house brochure template, and with the help of TrueView360s, we created an absolutely stunning brochure

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:

  1. Copy the link from the URL
  2. Paste it into the <iframe> code we provided

Your final link will look like this:

<iframe src=”https://www.trueview360s.com/virtualtours/d/9244b-35th-sw/” width=”100%” height=”300″ frameborder=”0″ style=”border:0″ allowfullscreen=””></iframe>
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.

banner making your flipbooks more interactive with widgets

Museum tours

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.

a sketchlab 3d virtual tour of the national history museum in london

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:

an example of how you can integrate a museum virtual tour widget in a flipbook
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!

Here’s how we integrated an iframe widget of this virtual tour in an art brochure template.

Step 1: Grab the direct link of the virtual tour. In this case, the link is: https://petitegalerie.louvre.fr/visite-virtuelle/saison5/ 

Step 2: Integrate the link in our <iframe> embed code: 

<iframe src=”https://petitegalerie.louvre.fr/visite-virtuelle/saison5/” width=”300″ height=”380″ frameborder=”0″ allowtransparency=”true” allow=”encrypted-media”></iframe> 

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:

an example of how you can integrate a virtual tour of the Louvre museum in a flipbook

Click the image above to flip through our flipbook and see the virtual tour in real life. Enjoy!

Music

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. 

Podcasts

Podcasts are also great to enhance your flipbooks with some rich media content. For example, if you’re a teacher using Flipsnack to create and share teaching materials, adding educational podcasts will only make things more interactive and fun. Because learning should be fun. And nowadays, technology can be easily integrated within the classroom, but not only. Let’s explore how to add songs and podcasts in Flipsnack. 

banner making your flipbooks more interactive with widgets

Soundcloud

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 a 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: 

  1. After you’re done putting together your playlist, click Share on Soundcloud. Then Embed
how to embed souncloud widget
  1. 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. 

soundcloud embedded into a flipbook on Flipsnack

You can customize any type of flipbook and add the music of your choice.

Spotify

There’s no need to talk about Spotify. You can basically find any type of music and playlists there, but Spotify is also home for thousands of podcasts. Here’s how to add a Spotify playlist or a podcast in a flipbook:

how to embed spotify widget in a flipbook
  1. Head over to the podcast or playlist of your choice and click Share
  2. Next, copy the embed code and paste it into your flipbook. 

The final result will look something like this:

spotify podcast embedded into a flipbook on Flipsnack

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 can you 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 do easily integrate, pretty much, any type of iframe widget within your flipbooks and take them to whole new interactivity levels. Just get creative!