Find out how you can use automation for your Popup frame and Video in your catalogs.
Table of contents:
How to set up your CSV file for Pop-up frame and Video
How to Import your CSV file or Google Spreadsheet
How use automation for Pop-up frame
Below is an embedded flipbook, and clicking on the interactions will allow you to view them in action. Over the underlined text on the left page, there is a popup frame that contains an embedded map. On the right page, there's a video embed at the top and a video button at the bottom.
Data automation for catalogs is a powerful tool designed to streamline and simplify the process of creating interactive publications. Whether you're starting from scratch in our Design Studio or uploading existing PDFs, adding interactivity is key to engaging your audience.
Automation can be utilized for Popup frames and Videos, further streamlining your catalog design process, but creating catalogs with numerous interactive elements can often be overwhelming.
You can already automate the process of adding product tags to your catalogs, and in this article we will explore how you can automate Popup frames and Videos.
Note: Before you get started, the product tag automation feature is available with the Enterprise subscription only. If you want to try it, check more of the benefits here.
How to set up your CSV file for Pop-up frame and Video
Step 1
In order for the automation to work, you need to have all the information in a Google Spreadsheet, Microsoft Excel, Pages or in a similar program to create your CSV file, but keep in mind that you can connect your data in Flipsnack only through Google Spreadsheet or by uploading your CSV file.
Unsure about how to set up your CSV file? We’ve got a guide to help you! Read it here, but you can also ask our support team or your account manager for help.
In your existing data spreadsheet you can add columns, for the Pop-up frame and Video. You have the option to include both or just one, depending on what you want to add to your interactive publications.
Important: It's crucial to include a code for the Pop-up frame and a link for the Video in the file. This information will later be displayed on the Popup frame or on the Video button and embed. It supports both Iframe codes and Div codes.
For example, as shown in the image below, I've added two columns to my existing data spreadsheet, and I’ve properly named the column headers as Presentation Video and Popup store location, so I will know how to identify them later on. In the Presentation Video column I've added a YouTube link for the video embed, and in the Popup store location column, I’ve added an iframe code of a Google map for the popup.
Import your CSV file or Google Spreadsheet
Step 2
After that go on the main dashboard, to the Automation tab that you will find in the lower left corner, click on Import, then on Import basic data set.
Here is where you can download a Flipsnack file sample. You can now either click on Upload file to import your CSV file or on Sync Google Sheets to connect a Google spreadsheet.
You can now either click on Upload file to import your CSV file or Sync Google Sheets to connect a Google spreadsheet.
Tip: If you have products that need frequent updates, we recommend using Sync Google Sheets. For example, if you manage an inventory of seasonal items that change frequently, using Google Sheets makes the update process easier, ensuring all information remains accurate and current.
Step 3
After you import your data set, you can click on the Mapping button that you will find in the Actions column on the left side. Here you can configure the product list preview.
Warning: If you added another column in your existing data spreadsheet for the pop-frame or video, you will need to do the mapping again in the Automation tab with the added column in order for the synchronization to work properly.
You will see that you can select up to 4 attributes that you want to see displayed in the Automation tab, in Design Studio. Make sure the information you select to appear in the pop-up helps you differentiate between them. In the following video, you will be able to see a preview of how your configuration will look like in Design Studio.
Once done, click on Save changes.
How use automation for Pop-up frame
After that, go to the Flipbook tab, choose the catalog you want to put in the Pop frame, and click on Edit. Now you’re in Design Studio and you should choose the Interactions tab. On the top you will see Links and tags, and there you will find the Pop-up frame element. Now just drag and drop it on the page of your choice.
Then go to the Automation tab, that you will find on the left side, and you’ll see that your files were imported into our Design Studio. Select the CSV file you want to use. If you’ve uploaded more, then pay attention to selecting only the one you wish to use.
Select the Popup frame from the page catalog, and then click on Connect with feed icon, from the upper right corner to make the connection between the element and the dataset.
Once done, click Save changes.
After that access the Automation tab,that you will find on the left side, and drag and drop the link into the Popup frame icon.
This should automatically add the information from the dataset to the Pop-up frame element. Please click on the Preview button in the upper right corner to test if it properly worked.Tip: After mapping your element with the Popup frame, you can duplicate it (Ctrl+D on Windows or Cmd+D on Mac) Alternatively, from the Layers tab on the bottom right side, you can select the product tag and click on the duplicate icon. A duplicated tag will already be connected to the feed.
How use automation for Video
For the video is the same process, but you have two options on how you would like to display the videos:
- The Video button which will open as a popup;
- The Video embed will be displayed directly on the page.
Important: In order for YouTube and Vimeo videos to function properly, they need to be set as public and shareable. Unlisted videos will not work. Additionally, Vimeo videos must also have a rating assigned to them.
After you have everything set, head over to the Interactions tab, and search for Audio & Video and there you will the Video button or the Video embed, drag and drop it on the page.
Select the Video button or Video embed, and click on Connect with feed icon, from the upper right side, to make the connection between the element and the dataset.
After that, access the Automation tab and drag and drop the link into the Video button or Video widget element.
Tip: After you map your element with the Video button or Video embed, you can duplicate it (Ctrl+D on Windows or Cmd+D on Mac) and paste it onto other pages. A duplicated element will already be connected to the feed.
This should automatically add the information from the dataset to the video element. Please click the Preview button in the upper right corner to test if it worked properly.
Tip: If you have more elements that you want to automate, you can select all of them and click Connect with feed. You’ll be able to make connections for all selected elements directly.
Please contact us via live chat if you have any questions or suggestions.