We have a great new alternative for embedding content directly on the pages of your flipbooks. With this new option, you can place interactive content in popup windows.
Requirements:
Plan: EnterpriseTable of contents
How to add the Popup Frame to your Flipbooks
Embedding a Google spreadsheet in the Popup Frame
What is the Pop-up frame?
You can use the Popup frame to display various types of content in a pop-up window that opens on top of the publication's pages. You can use it for surveys, contact forms, music players, video players, photo slideshows, virtual tours, interactive maps, custom-built add-to-cart pop-ups, and more.
It works wonders for product catalogs, magazines, travel brochures, menus, photo albums, administrative files, educational materials, real estate property listings presentations, and many other publications.
How does it work for readers?
In order to open a Pop-up frame, readers simply have to click on a highlighted area on the page: it can be a text box, photo, shape, or button.
It’s a great way to integrate interactive content into your publication, without displaying it directly on the page.
Want to learn more at your own pace?
Visit Flipsnack Academy for free video tutorials and guided lessons on how to make the most of your flipbooks.
How to add the pop-up frame to your flipbooks
1. Go to My flipbooks, click on a flipbook, and select Edit to open it.
2. Click on the Interactions tab in the left-side panel. Under the Links and tags section, click the Pop-up frame. A highlighted area will appear on the page drag it over any element, like text, an image, a shape, or a button.
.png?width=402&height=488&name=image-mh%20(15).png)
3. You can adjust its size to fit perfectly over your chosen element and change its color and transparency.
4. Now you need to adjust the settings for the Pop-up frame, in the Tooltip box, you can insert a call to action message. When your readers roll the mouse over the highlighted area (or clickable area, if the highlight is set to 100% transparency), this message will be displayed, for example, “Click to view", “Submit", or “Buy".
.png?width=670&height=456&name=pop-up%20frame%20action%20and%20to%20open%20popup%20directly-mh%20(2).png)
5. In the Pop-up frame code, you can insert the code you want to insert, place it where we indicate: “Your code here". It supports both iframe codes and Div codes.
6. Turn on Auto-show so the frame opens as soon as the page loads, perfect for highlighting promotions or key content.
Tip: You can use automation for pop-up frames to make the process easier, especially if you have a large number of them.
-1.gif)
You can embed a Google Spreadsheet directly into your pop-up frame for dynamic, interactive data display. Here's how:
- Open your spreadsheet in Google Sheets. Click File, then on Share, and lastly on Publish to web.
.png?width=630&height=361&name=image-mh%20(14).png)
Important: Before inserting it into the pop-up frame, make sure your code follows this format, or it won’t work correctly, the last part specifically:
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSiormED7WhUz2UmBU1VGKo1SP_MNX7vogDsvoq4u4w7M_f1fAwW6PnA0iTngyRtY8Zf5UQgH4Ng1wK/pubhtml?widget=true&headers=false"; width="100%";></iframe>
Next steps
Useful resources
Take your digital content strategy to the next level with data-driven insights and best practices to improve your processes:
- Add quizzes, forms, and questions to your flipbooks
- Types of elements that you can add to your flipbooks
- SKU-based product detection
- Automate multimedia elements in your flipbooks
Need expert support?
Our team is here to help. Connect with our team experts or message us via the in-app chat for a personalized demo.