How-to: Clickable areas (hotspots)

Clickable areas are blinking areas in the e-paper that can be clicked. There are various use case scenarios for clickable areas: They are often used for ads linking directly to an advertiser's website by tapping/clicking (clickable ad). Another common use case scenario is a clickable crossword or a clickable sudoku taking the user directly to an interactive version when tapping it. 

Example: Clickable ads

Example: Clickable games

The areas can be made clickable in three ways:

• Through XML
• By inserting hyperlinks in the PDF files
• By inserting hyperlinks in the Visiolink Publishing Hub

This guide will show you how to do it in these three ways. It is not necessary to resubmit your apps in order to implement clickable areas. Special circumstances might, however, make a resubmit necessary. Implementing clickable areas will work across all platforms (iOS, Android, Web).  

Please note: The URL must not contain special characters like # & æ ø å. URLs should be encoded or converted to shortened URLs by using free services like RB.GY.

Clickable areas through XML

Separate XML file

Along with delivery of XML files with article content, you can deliver a separate XML file on the ftp. This XML file must contain information which will identify the clickable area uniquely. This means that for each area you must provide: page number, geometry of the area and the URL to the landing page. Page numbers must be absolute, as we can not resolve section relative page numbers for areas when they are delivered in a separate XML file. If more information is needed in order to recognize the area locations, please add this as well.

Here is an example of XML structure for two ads:

<ad>
<pagenumber>5</pagenumber>
<url>http://www.lexab.net</url>
<geometry bottom="384500.000000" right="133000.000000" left="11000.000000" top="296500.000000"/>
</ad>

<ad>
<pagenumber>8</pagenumber>
<url>http://www.linkoping.se<url/>
<geometry bottom="338500.000000" right="185000.000000" left="63000.000000" top="295500.000000"/>
</ad>

In the article XML file(s)

Delivering a separate XML file with clickable area information is just one way to do it. You can also include the clickable area information in the XML file(s) containing articles. When delivering clickable areas in the article XML files you must provide: page number, section number, geometry of the area and the URL to the landing page.

Please contact Vitec Visiolink at support@visiolink.com if you need more information.

Inserting hyperlinks through InDesign

We have a separate guide for InDesign. Follow this guide!

Inserting clickable areas in the Visiolink Publishing Hub

It's simple to add clickable areas in the Visiolink Publishing Hub. Simply follow this guide!