360 Viewer Graphic

Overview

This article covers how to use the 360 Viewer Graphic, which allows you to upload a series of images to create a 360-view of your product. This can be further customized by adding in your own hotspots, which your can align on each individual frame for a smooth shopping experience. If you don't currently see this premium feature in your account, please reach out to your CSM to find out more. 

How To Create A 360 Viewer

Lets break down how to create this new Graphic type in your own account.

1. First, you will want to upload a series of images into your experience. You can click and drop to add a large amount of images at once. Having more images will result in a smooth experience when the user is scrolling the 360 view. Additionally, you will want to make sure that your images are in the correct order, as this is the order that the 360 Viewer will function. It can be beneficial to have your images labeled in numeric order. 
   
   
2. Once your images have uploaded, you should add them all to a group with the label "images". This can be done by selecting all of the images, and then right clicking. Please note that this exact group name must be used for the 360 Viewer to work as intended. In the following example, you can see that I have added 12 images to this group.
   
3. Add a Graphics widget to your canvas, which is where the 360 Viewer will be displayed:
   
4. Once this Graphics widget has been placed, you can select the "360 Viewer" from the Design tab, as shown here: 
   
5. Afterwards, you will want to click on your "images" group and place it inside of the Graphics widget. This is done from the left panel, and you can see the intended result in the following screenshot:
   
   
   At this point, your 360 Viewer should be fully functional! You can click and drag on the canvas to test the functionality, and this should also render as intended when previewing the experience. You can also use the arrow keys to navigate between each frame of the image for making easy edits. These arrows will not appear on the live preview: 
   

How to add Hotspots to your 360 Viewer

Now that you have a functioning 360 Viewer, we can discuss how to add Hotspots to your Graphic. You can add multiple hotspots to a single viewer, and it will always follow the steps below.

1. As a first step, you will want to set-up your intended Hotspot. This could be a single image of a plus icon, or a series of widgets that you have designed in Fastr Frontend to create a new CTA. Once you have a CTA ready to be used, you will once again need to right click and add this to a group, which must be labeled as "hotspots". Please note that this exact group name must be used for the hotspot to work as intended. 
   
2. Once again, you will want to click on your "hotspots" group and place it inside of the Graphics widget. This is done from the left panel, and you can see the intended result in the following screenshot. Please note, if you are creating multiple hotspots, you will only need a single group labeled "hotspots". You can have multiple CTAs in this group. 
   
3. Once this group has been placed in the correct location, the hotspot will be tied to each individual frame. This means you are able to place the hotspot in a specific spot for each individual image. Alternatively, you can hide the hotspot on certain images where it does not need to be used. 
   
   So at this point, you will want to go through each frame of the 360 Viewer and adjust the hotspot as intended. It can help to lower the rotation speed of your 360 Viewer to make these edits easy. We would also recommend using the keyboard shortcut for "Show" or "Hide" to quickly make these hotspots visible. 
   
   Show/Hide on Windows: CTRL + SHIFT + H
   Show/Hide on Mac: CMD + SHIFT + H
   
   
   
4. For making the Hotspot clickable, you can just add a link to the icon as usual. For more information, we have our standard article on adding Interactions available here: 
   Interactions

Additional 360 Viewer customization

In addition to the basic functionality, you can adjust the following settings to fine tune how your 360 Viewer is displayed: 

The following options are available:
Rotation Speed: Takes a value from 0 -> 1 to determine how fast the 360 Viewer rotates when a user interacts 

Background color: Can be used to set a background color behind the images. This will only be visible if the images being used have transparency 

Cycle Mode: This allows you to determine the behavior of the 360 viewer. The following three options are currently available: 

• Loop: This setting will continuously spin in the same direction as the user moves their mouse. Once it reaches the last image in your group, it will start from the first image once again. 
• Back and Forth: This setting will continuously spin as the user moves their mouse, but it will switch directions once the last image in the group is reached. This is a great option to use when your images don't make a complete 360 rotation. 
• Stop: This setting will cause the image to stop spinning when the user reaches the end of the image group. 

Autoplay Mode: This setting will allow the 360 spinner to move without needing a mouse interaction. This can be useful for showing a bit of rotation when the page loads, so that users are aware this is a 360 element. If Autoplay is enabled, there are additional customizations that appear. The following three autoplay options can be selected:

• None: This will will prevent autoplay from occurring
• Full Cycle: This will cause the autoplay to function in "Loop" mode.
• Back and Forth: This will cause the autoplay to function in "Back and Forth" mode.

Autoplay duration: This setting takes a value from 0 -> 10 to determine how many seconds the autoplay should function for. For example, if you have the autoplay set to "Full Cycle" with a duration of "5", it will take 5 seconds for every single image to be displayed. 

Autoplay spread: This setting will only appear if "Back and Forth" mode is selected for the autoplay. This setting takes a value from 0 -> 1 to determine how many of the images are going to be displayed. For example, setting this to "1" will ensure that every single image is displayed. Setting this to ".5" means that the autoplay will only show off half of the images in the group. 

Repeat Autoplay: This checkbox can be enabled to make the autoplay functionality continue indefinitely. 

At this point, you should have a completely functioning 360 Viewer with clickable hotspots! If you have any questions or concerns, please contact support@getfastr.com