Design editor
      Back to home
      1. | Help Center
      2. Design & Customize
      3. Design editor

      How to use a Popup frame

      Find out how to create and how to use popup content in your flipbooks.

      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: 

      Table of contents

      What is the Popup Frame?

      How does it work for readers?

      How to add the Popup Frame to your Flipbooks

      Embedding a Google Spreadsheet in the Popup Frame

      What is the Popup frame?

      You can use the Popup frame to display various types of content in a popup 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 Popup 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.

      How to add the popup frame in your flipbooks

      Go to My flipbooks, choose a publication, and once inside the publication click on the Link section. Click the Popup frame button and it will add a highlighted area that you can move anywhere on the page, over a text box, photo, shape, or button.

      pop-up frame, from the interaction tab

      You can adjust its size to fit perfectly over your chosen element and change its color and transparency.

      Now you need to adjust the settings for the Popup frame starting with the code you want to insert. You can simply copy/paste the code in the Popup frame code box or place it where we indicate: “Your code here".

      It supports both iFrame codes and Div codes.

      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".

      Tip:  You can use automation for pop frame to make the process easier. 

      popup frame action menu flipsnack
      popup frame GIF example flipsnack
      Embedding a Google Spreadsheet in the Popup Frame

      You can embed a Google Spreadsheet directly into your popup frame for dynamic, interactive data display. Here's how:

      1. Open your spreadsheet in Google Sheets. Click File, then on Share, and lastly on Publish to web.

      open google spreadsheets, File, then on Share, and lastly on Publish to web.

      2. Choose the entire document or a specific sheet to publish, then click Publish, and then copy the embed code provided by Google.

      Important: Before inserting it into the popup 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&amp;headers=false"; width="100%";></iframe>  

      Discover more interactions. Your readers will love them and they will have a more engaging reading experience.