Interactive Images interactive-images

You can easily make static images rich, engaging experiences for customers by dragging and dropping “shoppable” hotspots onto an image. Shoppable hotspots combine additional information about a product or service with a direct, point-of-sale “Add to cart” or “Buy” capability. Customers can tap these hotspots and be linked directly to the product or service, add it to a shopping cart, or be linked to a web page. Direct experiences such as these increase customer engagment and conversion on your web site.

The following is a shoppable banner with a Quickview pop-up. A user activates the Quickview by tapping the circle or “hotspot” on the model.

See interactive images in action on the web page above by going to the following:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion-QVzoom/index2-shoppable.html

Watch how interactive image banners are created watch-how-interactive-image-banners-are-created

Watch a 10 minute and 33 second walkthrough on how interactive image banners are created. You will also learn how to preview, edit, and deliver interactive image banners.

Quick Start: Interactive Images quick-start-interactive-images

The following step-by-step workflow description is designed to help you get up and running quickly with interactive images in AEM Assets.

Look for the Example heading within some of the Quick Start tasks. It contains a brief tutorial that is based on the following web page example that does not yet have Interactive Images added to it:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html

The tutorial helps to illustrate the steps of integrating interactive images on your own website.

Interactive Images workflow:

(Optional) Identifying hotspot variables optional-identifying-hotspot-variables

Start by identifying dynamic variables used by your existing Quickview implementation so that you can enter hotspot data to create the interactive image.

When you add hotspots to a banner image in AEM Assets you need to assign a SKU (Stock Keeping Unit; a unique identifier for each distinct product or service that you offer) and optional additional variables to each hotspot. Such hotspot variables are used later to match hotspots with Quickview content.

It is important to properly identify the number and type of variables to associate with hotspot data. Each hotspot added to a banner image must carry enough information to unambiguously identify the product in the existing backend system.

There are different ways to identify a set of variables to use for hotspot data.

Sometimes it may be enough to consult with IT specialists responsible for the existing Quickview implementation, as they are likely to know what is the minimum set of data needed to identify Quickview in the system. However, in most cases it is also possible to simply analyze the existing behavior of the front-end code.

The majority of Quickview implementations use the following paradigm:

The approach then is to visit different areas of the existing website where the Quickview feature is implemented, trigger the Quickview and capture the Ajax URL sent by web page for loading the Quickview data or content.

Normally there is no need for you to use any specialized debugging tools. Modern web browsers feature web inspectors that do an adequate job. The following are a few examples of web browsers that include web inspectors:

When network monitoring is turned on in the browser, trigger the Quickview on the page.

Now find the Quickview Ajax URL in the network log and copy the recorded URL for future analysis. In most cases when you trigger the Quickview there are numerous requests that are sent out to the server. Typically, the Quickview Ajax URL is one of the first in the list. It has either a complex query string portion or path, and its response MIME type is either text/html, text/xml, or text/javascript.

During this process it is important to visit different areas of your website, with different product categories and types. The reason is that Quickview URLs may have parts that are common for a given website category, but change only if you visit a different area of the website.

In the simplest case, the only variable part in the Quickview URL is the product SKU. In this case, the SKU value is the only data piece that you need for adding hotspots to the banner image.

However, in complex cases, the Quickview URL has different varying elements in addition to the SKU, such as category ID, color code, size code, and so forth. In such cases, every element is a separate variable in your hotspot data definition in the shoppable interactive image feature in AEM Assets.

Consider the following examples of Quickview URLs and their resulting hotspot variables:

Example

You can apply the same approach used in the three examples above to the demo web page:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html

The demo web page has several product thumbnails, each having a Quickview button labeled See More. With your web browser’s debugging tool still activated, click each button and note the recorded Quickview URLs. After you activate all four product Quickviews available on the page, you have the following list of Quickview requests made to the backend:

Looking at these server calls, you see that product-specific information is only present in the request path. You also notice that the query string is not used at all and there are two distinct types of data pieces involved:

Given this information, the entire Quickview URL has the following pattern:

/datafeed/$categoryId$-$SKU$.json

Based on such analysis, you would use categoryId and SKU for hotspots.

You are now ready to upload an image banner and add hotspots to it using the shoppable interactive image feature in AEM Assets.

(Optional) Creating an Interactive Image viewer preset optional-creating-an-interactive-image-viewer-preset

You can choose to use the default, out-of-the-box Interactive Image viewer preset called Shoppable_Banner that comes with AEM Assets. Or you can create your own custom viewer preset for use with interactive images.

When you create a custom Interactive Image viewer preset, you can determine the look of hotspots on the image banner. As part of the creation of the viewer preset, you can choose to use a hotspot graphic from a gallery of pre-defined images.

After you save the viewer preset, it is automatically activated (turned on) on the Viewer Preset list page in AEM Assets. This functionality means that it is visible in the Interactive Media component and whenever you view an asset. However, to deliver an interactive banner with this viewer preset, you must publish your viewer preset as well (this is true for custom or out-of-box viewer presets).

To create an Interactive Image viewer preset:

Uploading an image banner uploading-an-image-banner

If you have already uploaded the images that you want to use, advance to the next step, Adding hotspots to an image banner.

To upload an image banner:

Adding hotspots to an image banner adding-hotspots-to-an-image-banner

You can add hotspots to an image banner using the editor on the Hotspot Management page.

When you add hotspots, you can define them as a Quickview pop-up display, as a hyperlink, or an Experience Fragment.

See Experience Fragments.

Undo and Redo options, near the upper-right corner of the page, are supported during your current creation/editing session.

When you finish creating your interactive image, you can use Preview to see a representation of how your interactive image will appear to customers.

See (Optional) Previewing interactive images.

To add hotspots to an image banner:

(Optional) Previewing interactive images optional-previewing-interactive-images

You can use Preview to see a representation of what your interactive image will look like to customers and to test the image’s hotspots to ensure they are behaving as expected.

When you are satisfied with the interactive image, you can publish it.
See Embedding the Video or Image Viewer on a Web Page.
See Linking URLs to your web application. Note that the URL-based method of linking is not possible if your interactive content has links with relative URLs, particularly links to AEM Sites pages.
See Adding Dynamic Media Assets to Pages.

To preview interactive images:

Publishing interactive image assets publishing-interactive-image-assets

See Publishing Assets for details on how to publish interactive image assets.

Integrating an interactive image with your website integrating-an-interactive-image-with-your-website

After you have uploaded a banner image, added hotspots to the image, and published the interactive image, you are now ready to add it to your website page.

If you are an AEM Sites customer, you can add the interactive image by dragging the Interactive Media component onto your page. See Adding Dynamic Media Assets to Pages.

If you are a standalone AEM Assets customer, you can manually add the interactive image to your website as described in this section.

Example

Using the demo website as an example:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html

Notice that the picture of the three men is a static IMG tag:

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

Integration is as simple as removing the IMG tag and replacing it with the copied embed code from AEM Assets. You can see the result in the following URL which shows the shoppable interactive image on the page with three circle hotspots:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-1.html

To apply a crop to a shoppable interactive image for a responsive environment, you can include the Interactive Image configuration attribute ZoomView.iscommand to the path—where ZoomView is the component to call and iscommand is the crop image serving command that you apply.

See ZoomView.iscommand configuration attribute.

See crop image serving command.

You are now ready to integrate the interactive image with an existing Quickview on your website.

Integrating an interactive image with an existing Quickview integrating-an-interactive-image-with-an-existing-quickview

The last step in this process is integrating the interactive image with an existing Quickview implementation on your website. There is no solution to the integration that works for all cases. Every Quickview implementation is unique and a specific approach is needed that most likely involves the assistance of a front-end IT person.

The existing Quickview implementation normally represents a chain of inter-related actions that happen on the web page in the following order:

These calls may not represent independent public API calls which can be called by the web page logic from an arbitrary step. Instead, it is a chained call where every next step is hidden in the last phase (callback) of the previous step.

At the same time that the shoppable interactive image is replacing step 1, and partially step 2, when a user clicks a hotspot inside the shoppable image, such user interaction is handled by the viewer. The viewer returns an event to the web page that contains all the hotspot data previously added to AEM Assets.

In such an event handler, the front-end code does the following:

The embed code returned by AEM Assets already has a ready-to-use event handler in place that is commented out, as seen in the following highlighted code snippet:

        var s7interactiveimageviewer = new s7viewers.InteractiveImage({
            "containerId" : "s7interactiveimage_div",
            "params" : {
                "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
                "contenturl" : "https://aodmarketingna.assetsadobe.com/",
                "config" : "/etc/dam/presets/viewer/Shoppable_Media",
                "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
        })
        /* // Example of interactive image event for Quickview.
             s7interactiveimageviewer.setHandlers({
                "quickViewActivate": function(inData) {
                    var sku=inData.sku; //SKU for product ID
                    //To pass other parameter from the hotspot, you will need to add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //Please refer to your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

So, it is only necessary to uncomment the code and replace the dummy handler body with the code that is specific to the particular web page.

The process of constructing the Quickview URL is basically opposite of the process used for identifying hotspot variables covered earlier.

See Identifying hotspot variables.

Using our previous Quickview URL examples, you can see, in the following examples, how the Quickview URL is constructed in each case:

The last step to trigger the Quickview URL and activate the Quickview panel most likely requires the assistance of a front-end IT person from your IT department. They have the knowledge to know best how to accurately trigger the Quickview implementation from the proper step, having a ready-to-use Quickview URL.

You can see how these steps are applied to the demo website to fully integrate a shoppable interactive image with the Quickview code. Earlier, the structure of the Quickview URL was identified as the following:

/datafeed/$categoryId$-$SKU$.json

To reconstruct this URL inside the quickViewActivate handler, you can use the categoryId and SKU fields available in the inData object that is passed to the handler by the viewer’s code:

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

The demo website is triggering the Quickview dialog box using a simple loadQuickView() function call. This function takes only one argument, which is the Quickview data URL. As such, the last step needed to integrate the shoppable interactive image is to add the following line of code to the quickViewActivate handler:

loadQuickView(quickViewUrl);

The following is the complete source code:

 var s7interactiveimageviewer = new s7viewers.InteractiveImage({
  "containerId" : "s7interactiveimage_div",
  "params" : {
   "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
   "contenturl" : "https://aodmarketingna.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Media",
   "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
 })
   s7interactiveimageviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku;
     var categoryId=inData.categoryId;
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   });
 s7interactiveimageviewer.init();

The final demo website with the fully integrated interactive image looks like the following:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-3.html

Using Quickviews to create custom pop-ups using-quickviews-to-create-custom-pop-ups

See Create custom pop-ups using Quickviews.