Flipbook Editor: Add Media and Social Content with Flipbook Widgets


Learn how to enhance your Flipbooks with audio, video, photo and social media content.


Before You Begin

  • To use the Flipbook page editor, you need to be an Account Admin or Content Manager.
  • To learn about the Flipbook Editor and how to access it, see this article first.


About Flipbook Widgets

With Flipbook page widgets, you can overlay custom content on your Flipbooks. There are pre-built widgets for audio and video, social media and photo content, as well as custom widgets that you can build out yourself. The following types of widgets are available:


  • SoundCloud: Embed Soundcloud audio files.
  • YouTube: Embed YouTube video (and customize appearance and playback options).
  • Vimeo: Embed Vimeo video (and customize appearance and playback options).
  • Vidyard: Embed Vidyard video (and customize playback options).
  • Wistia: Embed Wistia video (and customize appearance and playback options).


  • Twitter (Tweet & Follow): Allow readers to tweet about your content, or follow a specified Twitter account.
  • Facebook Like (Button & Box): Allow readers to like a specified URL or Facebook page.
  • Pinterest Pin It: Allow readers to pin content from your Flipbook to Pinterest.
  • LinkedIn Share: Allow readers to share content to LinkedIn.


  • Flickr: Embed photos from Flickr albums.


  • iFrame: Load a URL in an iFrame.
  • Script: Load HTML or JavaScript of your choice (max. 1500 characters).

Flipbook Widget Limitations

If you want to use Flipbook widgets, keep the following limitations in mind:

  • Any external content loaded in through a widget should ideally be automatically scalable or fluid in its sizing. Otherwise the content will not resize based on the end user's display size or device screen.
  • Widgets are not displayed when a user zooms in or when in Desktop full screen view because of inherent technical issues with displaying HTML frame overlays.


Place Flipbook Widgets


  1. Open up the Flipbook page editor for the Flipbook you want to work on.
  2. In the Tools Menu on the right, click on the Widgets tab.


  3. In the Flipbook viewer window on the left, click and drag the widget layout tool to position the widget. Use the handles to adjust the size:


  4. In the tools configuration menu in the right sidebar, click on the type of widget you want to place:


  5. The configuration menu for the selected widget will appear in a new window. This will be different for each widget type: for example, with a YouTube widget, you will specify the video ID for the video to be overlaid, along with options like whether to play it in HD, auto-play, etc. You can use the Preview button to see how your widget will appear:

  6. When you're happy with your setup, click on Save & Close.
  7. The widget will be inserted into your Flipbook in the widget layout tool selection, which will change from grey to transparent, and will now have a gear icon in the top left corner:


Edit Widgets and Configure Additional Settings

  1. To edit a previously placed widget, and to configure additional settings, click on its selection area. It's current settings will be displayed in the sidebar on the right, with the type of widget highlighted:

  2. You can click on the pencil icon next to the widget to modify its settings.
  3. You can also change some other settings:
    • Under Select your Platforms, use the checkboxes to choose which platforms the widget will be displayed on.
    • Under Other Options, place a checkmark in the box next to Allow Closing if you want users to be able to close the widget, hiding it from view.
  4. Your widgets will be scaled automatically based on the screen size of the device used to view the Flipbook. If you want, you can enforce maximum and minimum sizes for your wigets. To do that, scroll to the top and click on the Advanced Settings tab. Use the fields provided to type in your desired maximum and minimum sizes.


  5. If you want a widget to be hidden if it would need to be scaled smaller than the minimum size, check the box next to Hide if smaller than minimum?
  6. When you are finished, click on the Save button to save your changes.


0 out of 0 found this helpful