EARLY ACCESS: If you're interested in using this feature and you're on the Enterprise plan, reach out to your Success Manager who can activate this for you.
---
Leverage PDF annotations to automate the creation of product content in Publitas, as annotation-based hotspot tagging enables you to automatically create product, image, video hotspots in the publication with specific instructions for the position (based on annotation size and position) and hotspot configuration, as soon as the PDF is uploaded, either manually or via API.
How to use annotations
There are two ways you can add annotations. If you are working with InDesign:
- Design a PDF to your liking in InDesign.
- Use the Rectangle Frame Tool to create links and add the annotation value as the URL value of the Rectangle Frame link.
- Export the PDF file and upload to Publitas.
Alternatively, if you already have a PDF file
- Add annotations in the PDF with exact size describing where hotspots should be placed;
- Upload that PDF to Publitas.
Regardless if the PDF is uploaded manually in Publitas App or via API, the created publication will now contain all hotspots described by the annotations in the PDF.
Annotation content
Annotations are written in a JSON format with a few key values listed below for each supported hotspot type.
Product hotspots
type("product") - Indicates the type of hotspot annotation.icon(boolean) - Whether to display an icon for the product hotspot.sku(string | array) - The SKU of the product to link to, can also be an array of SKUs for multiple products.dynamic(boolean) - Indicates whether the product hotspot is dynamic.
Image hotspots
type("image") - Indicates the type of hotspot annotation.icon(boolean) - Indicates whether to display an icon for the image hotspot.source(string) - The URL of the image to display.appearance("embed" | "interactive_embed" | "hotspot") - The appearance of the image hotspot.altText(boolean) - Whether to include alt text for the image.altTextValue(string) - The alt text value for the image.fillMode("crop" | "stretch") - The fill mode for the image.
Video hotspots
type("video") - Indicates he type of hotspot annotation.icon(boolean) - Indicates whether to display an icon for the video hotspot.source(string) - The URL of the video to embed. If the source is a YouTube or Vimeo link, it will be embedded accordingly. Otherwise, the video will be treated as a direct video file link and will be downloaded.appearance("embed" | "animatedContent" | "hotspot") - The appearance of the video hotspot.showThumbnail(boolean) - Indicates whether to show a thumbnail for the video.autoplay(boolean) - Indicates whether the video should autoplay when viewed (only Vimeo).loop(boolean) - Indicates whether the video should loop when it ends.showAccessibilityControls(boolean) - Indicates whether to show accessibility controls for the video.accessibilityText(string) - Sets the accessibility text for the video.
External content hotspots
type("externalContent") - Indicates he type of hotspot annotation.icon(boolean) - Indicates whether to display an icon for the external content hotspot.source(string) - The URL of the external content to link to.maxWidth(integer) - The maximum width of the external content when displayed.maxHeight(integer) - The maximum height of the external content when displayed.
Where does the product data come from
Products are pulled into Publitas through product feeds. To learn more about product feeds, please see the Setting up your Product Feed article.
Examples
The following annotation will create a dynamic product hotspot (notice "dynamic": true) for a product with the given SKU.
{ "type": "product", "icon": true, "dynamic": true, "sku": "WP06-29-Black" }
The following annotation will create a product hotspot linking to a product with the given SKU over a specified area.
{ "type": "product", "icon": "true", "dynamic": "false", "sku": "WP06-29-Black" }
In this example, multiple SKUs are listed, so the dynamic product hotspot created will show the first product on the page and list all other products as well when clicked.
{ "type": "product", "icon": "true", "dynamic": "true", "sku": ["MSH05-32-Blue", "WT03-S-Red"] }
Note: All products from the array of SKUs found in the feed will be added to the hotspot in the order they were listed in the array. If a product is not found in the feed, it will not be added to the hotspot. If not even one SKU from the array is found in the feed, then the hotspot will not be created at all.
The following annotation will create an image hotspot showing a GIF:
{ "type": "image", "appearance": "embed", "source": "https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif"}