Adding links to a flipbook

Learn how to add hyperlinks when working in our Design Studio.

There are different ways to link text and layers to URLs in Flipsnack: 

1. Draw link

The easiest and fastest way to add links to your flipbook is by clicking the Draw link hotspot icon (or pressing L on the keyboard). Then you have to draw the area where you want to add the link.

Drawing a link over your flipbook in Design Studio

2. Link -> Hyperlink

Another option is to click on Link in the left panel, then on Hyperlink, and place the hyperlink element over the desired area. 

Adding a hyperlink to your flipbook in Design Studio

Regardless of the chosen method, once you have placed the hyperlink element, you can easily adjust its size. 

how-to-change-the-size-and-the-opacity-of-the-hyperlink-area

You can also easily change a link’s opacity by selecting the element and then clicking the Opacity button. If you want to blend in your hyperlinks completely, set the opacity to 0. 

When customizing the opacity, you can also customize the color of the hyperlink to match your brand colors.

color-and-opacity-settings-in-design-studio

Selecting a hyperlink will also reveal different actions you can choose from. These actions will be triggered when the readers click on the element. Here they are in order of appearance. 

hyperlink-actions-in-design-studio

  • Send email (your readers will be able to send you an email to the email address you have provided);

Email action using the hyperlink function in Design Studio
  • Download PDF (you must enable Download PDF from Customize and then share the flipbook);
  • Go to profile (This will open your Flipsnack profile in a new tab);
  • Go to URL (This will open the link you have added. Under the URL field, you can choose whether the link to open in the same tab or a new one);
  • Go to the previous page;

  • Go to the next page;

  • Go to the first page;

  • Go to the last page;

  • Go to page (you can select a page the readers will be sent to when they click on the hyperlinked element);

Go-to-page action using the hyperlink function in Design Studio

Popup frame (It can be used to embed different elements: videos, maps, tours, and more. When clicked, it opens a popup window of the embedded element);

Pop-up frame action using the hyperlink function in Design Studio
  • Spotlight (opens an image as a popup);

Spotlight action using the hyperlink function in Design Studio
  • Photo slideshow (similar to Spotlight, but it allows you to add multiple images and set different options. When clicked, a slideshow of the images will open as a popup);
  • Line chart (allows you to include a chart in your flipbook. When clicked, it will open the chart as a popup);
  • Bar chart (same as above);
  • Pie chart (same as above)

3. The Action button

You can also place different elements on the page (image, shape, icon, GIF, text) and make them more interactive with Actions

Once you have placed the element, select it, and click on the Action button. From there, you can choose from various options: Open a link, Go to a page, or Open an overlay, each with its settings.


Action button presented in Design Studio

Animated links

All these links added to your flipbook will have a soft animation over them, visible in the flipbook player as the reader flips through the pages:



This animation layer makes the interactions more visible and, therefore, more engaging for your readers.

The color and the opacity of the link animation will match the opacity and color of the link you’ve set in Design Studio, as explained above in the article. 

However, if you don’t want the links to be animated, you can turn them off if you go to CustomizeAppearance → and untick the Animate interactions box:
enable-or-disable-button-for-animated-interactions-in-customize-page

If you have any questions or suggestions, please get in touch with us via live chat.