Adding Artworks and Hotspots to a Gallery

This guide will walk you through the steps on how to add your Artworks and customize Hotspots in your gallery. Hotspots are interactive elements that enhance the gallery experience by allowing users to explore multimedia content such as images, videos, 3D objects, and more. 

Accessing the Hotspot Feature

From the main menu, click on « My Art Gallery » (1)

Click on « Hotspot » (2) in the left menu.

Select the gallery (3) where you want to add a new Hotspot. The default view will display the first room in 360°. You can navigate in the room by clicking and moving the mouse to choose an area of the Gallery in which you want to add the Hotspot.

To change room, click on the preview image at the bottom section.

The three-line icon (4) in the top-right corner allows to view all the created hotspots. This is particularly useful when we’ll need to manage and select multiple hotspots.

Click on the green « + » icon (5) in the top-right corner.

ART3XPO-1UserGuide-Hotspot-CreateHotspot

Adding an Hotspot

A window with multiple options will appear, choose a « Style » in the select menu (1) and a « Content » (2).

As explained below,  Style is how the Hotspot appears in the gallery; Content is the information or media linked to the Hotspot.

ART3XPO-2UserGuide-Hotspot-StyleContent

Understanding Hotspot « Style »

Style represents how an element, like a painting, will appear in the art gallery.

Below are explained all the available options:

Icon: a button or symbol which can be choosen from a library.

Callout Text: Lets you add a linked text that appears when clicking on the icon.

Grouped: this option is to group multiple Hotspots into a single one. Clicking on it, it will expand and open all the others under it. To use this option we need to create some hotspots before.

Selection Area: this option allows to create a clickable area in the gallery, like a transparent area over the existing background of the room which can be linked to a content or action.

Painting (or Other Image): this option is about adding a painting, a photo or any other image. This option is for sure the most used.

Embedded Text: allow to insert a text inside the gallery, it could be a bio, a story or a title of an artwork on a wall.

Embedded HTML: is to add a custom HTML code, like an iFrame to show a part or a whole website inside the gallery.

Embedded Slideshow: allows the creation of a sequence of images that can be navigated either automatically or manually.

Embedded Video: let upload a video file, link an .mp4 or a YouTube link which can be auto played and controlled in play, pause, etc within the gallery.

Embedded Video (with Transparency): let you add a video in .mov and .webm with a transparent background.

Embedded Video (with Background Removal): allows to add an .mp4 video with a chroma background and to remove it.

Embedded Link: Lets you add an embedded hyperlink to a website or application.

Embedded Object 3D: Allows you to add a .GLB/.GLTF file to show a 3D object inside the gallery.

ART3XPO-3UserGuide-Hotspot-Style

Understanding Hotspot « Content »

Content includes the elements which can be linked to Style and will be shown when a visitor will click on the Hotspot.

Below are explained all the available options:

Image (Single): to show an image, for example a larger version of the photo or picture show in the gallery.

Images (Gallery): let you insert a collection of images, like a reel.

Video: lets you add an .mp4, .webm or a YouTube video.

Video 360: Allows you to add a 360° video in .mp4 and video in .mp4 or .webm.

Lottie: Lets you add animations in JSON format or in a link.

Audio: Allows you to add an .mp3 audio link or file, such as a sound, a song or a recorded audio.

Link (Embed): Lets you embed an internal link from the site of my.art3xpo.com or https://www.art3xpo.com.

Link (External): Lets you add any external link.

Text: Allows to insert a custom text.

HTML: Lets you add HTML code, so for example we can create a small page including text and image.

Download: Allows to upload a file which can be downloaded by users.

PDF: to add a PDF file, In this case once a pdf is added, it will be opened by an embedded viewer which will show an animation among pages, when available.

Form: Allows you to add a form, such as a contact form, a request for quotation, a help/info form, etc…

Map: Let insert a map from google or open street map by uploading a link or embed code of the map.

Object 360: Allows to add a 360° object or image by uploading it from your device.

Object 3D: Let’s insert a 3D object in GLB/GLTF or USDZ formats which can be seen Augmented Reality.

Point Clouds: to add a 3D point cloud with a zip file, JS/JSON format of the file and a point cloud data.

Product: Allows you to add products, such as paintings or other items on e-commerce.

Switch Panorama: Lets you change the displayed panorama.

ART3XPO-4UserGuide-Hotspot-Content

Customizing the Hotspot

After understanding what Style and Content are, let’s start to create an hotspot.

In the previous window, for Style select “Painting (or other image)” and select “None” as Content.

A “Move” window appears:

Adjust the area size using « edge points«  (1).

Move the hotspot using the « directional arrow » (2) in the center.

The « Z order«  (3) option allows you to set the hotspot forward or backward from others. Keep it as defualt value 1. This will be helpful in case we have multiple hotspots in the same position or very close to each other.

Once done click “Save and a window will open.

ART3XPO-5UserGuide-Hotspot-MoveWindow

In the first tab, “Settings” we can see our selection, so “Painting (or other image)” and “None”. We can also change it, if needed.

The window shows 2 specific tabs for Style and Content (note: the options inside each of them depends on the type of style and content we decided before).

ART3XPO-6UserGuide-Hotspot-SettingTab

On the Style tab upload your painting, clicking on “Browse”: choose an image from your Computer (like a .Jpeg/.jpg file) and click on “Upload Image”. The size for an image in the Style is not needed to not be too big, as they will not be show fullscreen.

A size from 400 pixel to 600 px is usually enough and a weight of 100-200 Kbyte allows to keep the gallery light.

ART3XPO-7UserGuide-Hotspot-StyleTab

The « Tooltip Tab » allows to display a text over the Hotspot and to customize it, choosing the visibility, modifying its color and the background color.

ART3XPO-9UserGuide-Hotspot-TooltipTab

By going to the « Schedule tab« , when this tab is available, we can set dates and timeframes to automatically show or hide this Hotspot in the gallery.

Once all configurations are complete, click « Save« .

ART3XPO-8UserGuide-Hotspot-ScheduleTab

Actions of the Hotspots

If we want to move or edit one hotspot we click on the hotspot that we want.

Using the following options:

Move (1) the hotspot.

Edit (2) its Style or Content.

Duplicate (3) the hotspot in the same or another room.

Delete (4) the hotspot.

ART3XPO-10UserGuide-Hotspot-HotspotOptions

See a preview

By clicking on the icon on the left with the eye we can see te preview, if we click on the painting no action is done because we set on “None”.

Linking the Picture to a Content

If we want to show a content by clicking on a Hotspot, such as a detailed photo of the painting, a video or other information, we can change it on the Settings tab.

In this case, we’ll select « Image (Single) » because when a user clicks on it, we want our users to see a larger version of the picture. Click on « Change« .

ART3XPO-12UserGuide-Hotspot-ContentImageSingle

On « Content tab« , we’ll upload the image (in this case the same) which will be shown when a visitor will click on that image. In this case the size of the image can be bigger than that in the Style. A size from 600 pixel to 900 px is usually enough and a weight of 200-300 Kbyte allows to show a a detailed picture and keep the gallery light.

Click “Browse”. Select the image you want to upload and then click “Upload Image”.

We can also set other options for this contents, as shown below:

We can give a « Title » and a « Description » to the image.

On “View Mode” we can choose the image behaviour, as an example, there are three options on “View Mode”, the first one is “Modal” where the image is visible without any condition, the second one “Box (click)” gives you the chance to see the image only if you click, finally the third one “Box (hover)” let’s you view the image in question only if you hover the image with the mouse cursor.

We can select “Auto Open” for an automatic opening, we can also set up the “Auto Close”  for an automatic closure.

We can select different box positions from the “Box Position” menu, we can set up the “Box Width” too and besides that we can maximize the box using the “Box Maximize Button”.

ART3XPO-11UserGuide-Hotspot-ContentTab

Notes:

The number of Hotspots available depends on your subscription plan.

Hotspots can be a combination of any Style and Content you choose, offering near endless customization possibilities.

By following this guide, we can successfully set up and manage Hotspots in our gallery, creating a rich and interactive experience for our visitors.

Congratulations, you’ve created your first hotspots!

Other tutorials

Découvrez comment créer une nouvelle galerie en utilisant des photos à 360° ou des modèles prédéfinis et la publier facilement.
Apprenez à publier une galerie, à l’intégrer dans un site web ou à la partager sur les réseaux sociaux.
Apprenez à ajouter des points d'intérêt (peintures, textes, fichiers audio, PDF, images...) pour rendre votre galerie interactive.