--- title: "20 – Image Hotspot" slug: "20-image-hotspot" updated: 2024-07-11T15:07:34Z published: 2024-07-11T15:07:34Z --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.mapp.com/llms.txt > Use this file to discover all available pages before exploring further. # 20 – Image Hotspot ## Description This is a unique block and can only be used once per message. This is an interactive Hotspot block giving the recipient the opportunity to interact with the feature directly within the email itself. When a Hotspot is selected a small window appears on the screen. This window can contain all sorts of information – a description of the little black dress that was presented in a hero image, some nutritional information about a product, and so on. Each Hotspot contains a button, too. Like the Video & Carousel blocks, asset provision is important. ### Default block view **Desktop** ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/5aaf69d7-4324-42df-880f-ac24396a3c57.png) **Mobile** ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/399351b9-c7a3-40d4-8856-b2afad7d1cce.png) ## Formatting options ### Padding As with all blocks, the Video block is no exception when it comes to padding. Padding is the space between the block's content and its border. This can be edited in the Details Tab in the usual way. | **Option** | **Details** | **Default** | | --- | --- | --- | | Padding | Top | 0 | | Bottom | 0 | ### Number of Hotspots Select up to 5 Hotspots using the drop-down menu. | **Option** | **Dropdown** | **Default** | | --- | --- | --- | | Number Of Hotspots | 1 | 5 | | 2 | | 3 | | 4 | | 5 | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/2d2f3345-7995-4ad7-b82a-bb8fad545ee9.png) ### Block Background Color Used to change the block background color. Only use HEX color values. HTML email only recognizes 6-digit long-hand versions and has patchy support for shorthand versions. | **Option** | **Details** | **Default** | | --- | --- | --- | | Background Color | Block Background Color | #ffffff | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/6fa63b4c-ffb8-4cf0-b3d5-8969b7c7cbe0.png) ### Hotspot 1 Setting Each hotspot can be positioned independently of one another. Place them at key locations over your hero image without obscuring its intent. Enter a percentage value without adding the % symbol. The block will do that automatically. > All the hotspot options are the same, although they all start off in different default places on the hero image. Here are the defaults for Hotspot Number 1. | **Option** | **Details** | **Default** | | --- | --- | --- | | Hotspot 1 Setting | Hotspot 1 Position Left (%) | 25 | | Hotspot 1 Position Top (%) | 15 | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/ab0d3e1c-ba50-4ef6-ad04-21cd1ca0f4e0.png) ### Background Image The background image is your key feature hero image, over which the Hotspot will be placed. A desktop, mobile, and fallback will be required. Use the default images as image-sizing templates. | **Option** | **Details** | **Default** | | --- | --- | --- | | Background Image | Desktop Background Image for Hotspot | https://amundsen.shortest-route.com/cts-demo/public/lpbp/imgPlaceHolder.jsp?widthPH=600&heightPH=576&bgPH=cccccc&fontColor=969696 | | Mobile Background Image for Hotspot | https://amundsen.shortest-route.com/cts-demo/public/lpbp/imgPlaceHolder.jsp?widthPH=400&heightPH=710&bgPH=cccccc&fontColor=969696 | | Fallback Desktop Image | https://amundsen.shortest-route.com/cts-demo/public/lpbp/imgPlaceHolder.jsp?widthPH=600&heightPH=576&bgPH=cccccc&fontColor=969696 | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/197e74bb-1023-473c-87e2-20bf3fc6eb12.png) ### Popup Box CTA Settings It allows you to format the CTA button according to the requirement. Details are below. It takes the color's hexacode as the value to change the color wherever applicable. | **Option** | **Details** | **Default** | | --- | --- | --- | | Popup Box CTA Settings | CTA Background Color | #ffffff | | CTA Text Color | #000000 | | CTA Text Font Size | 18 | | CTA Text Line Height | 22 | | CTA Text Font Weight | Bold | | CTA Border Size | 1 | | CTA Border Color | #000000 | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/7066d1e6-ac68-4004-b119-4ee53d7c58ee.png) ### Popup box settings It allows you to format the Content style as per the requirement. Details below. It takes the hexacode of the color as the value to change the color wherever applicable. | **Option** | **Details** | **Default** | | --- | --- | --- | | Popup box settings | Popup Box Background Color | #e0dede | | Popup Title Font Color | #000000 | | Popup Title Font Size | 32 | | Popup Title Line Height | 36 | | Popup Title Font Weight | Bold | | Sub Title Font Color | #000000 | | Sub Title Font Size | 18 | | Sub Title Line Height | 22 | | Sub Title Font Weight | Bold | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/084271e6-f181-4ad3-8dd0-0aae7631d269.png) ### Hotspot Icon This is where the Hotspot icon can be changed. All Hotspots will use the same image. | **Option** | **Details** | **Default** | | --- | --- | --- | | Hotspot icon image | Hotspot Icon | https://amundsen.shortest-route.com/cts-demo/imgproxy/img/2040365428/hotspot_icon.png | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/02b21797-a9e7-46d3-b559-c571b3b8079e.png) ### Hotspot Links & Fallback Link All links are independent. | **Option** | **Details** | **Default** | | --- | --- | --- | | Hotspot Links | Link | [https://www.mapp.com](https://www.mapp.com/) | | Fallback Link | Link | [https://www.mapp.com](https://www.mapp.com/) | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/93336b88-b3ab-4480-ada7-873ba8cdf9aa.png) ## Compatibility As mentioned with the Video and Carousel blocks, there is limited support, but applying a fallback asset for all incompatible devices will bridge the gap. ### Interactive view | **Desktop** | **Mobile** | | --- | --- | | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/d4b469df-4831-4a64-8d33-939c3a273c60.png) | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/ae5cdb95-de25-4118-8d87-25d6041304a3.png) | ### Fallback view | **Desktop** | **Mobile** | | --- | --- | | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/abff35ee-961d-4aea-8f20-1aeab0a8d70c.png) | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/4638bd62-6b6b-4815-b34d-742c24e28a17.png) |