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 that link 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 engagement and conversions on your web site.

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

chlimage_1-152

See interactive images in action on the web page pictured above.

Watch how interactive image banners are created

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

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 a web page example that does not yet have Interactive Images added to it.

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

Interactive Images steps:

  1. (Optional) Identifying hotspot variables. If you use Adobe Experience Manager Assets and Dynamic Media standalone, identify dynamic variables used in your existing Quick view implementation. Doing so ensures that you can enter hotspot data when creating the interactive image. See (Optional) Identifying hotspot variables.
    However, if you use AEM Sites, or AEM eCommerce, or both, then this step is not necessary.

  2. (Optional) Creating an Interactive Image viewer preset. Customize the graphic image that is used to represent hotspots. Creating your own Interactive Image viewer preset is not required if you intend to use the out-of-the-box Interactive Image viewer preset named Shoppable_Banner instead.
    See (Optional) Creating an Interactive Image viewer preset.

  3. Uploading an image banner. Upload image banners that you want to make interactive.
    See Uploading an image banner.

  4. Adding hotspots to an image banner. Add one or more hotspots to an image banner. Associate each one with an action such as a hyperlink, a Quick view, or an Experience Fragment. After you add hotspots, you will finish this task by publishing the interactive image.
    See Adding hotspots to an image banner.
    See Previewing interactive images - Optional. If desired, you can view a representation of your shoppable banner and test its interactivity.
    See Publishing Assets for details on how to publish interactive image assets.

  5. Adding an interactive image to your website or to your website in Experience Manager. If you use Sites, or eCommerce, or both, you can add interactive images directly to a web page in Experience Manager. Drag the Interactive Media component onto the page. See Adding Dynamic Media Assets to Pages.
    If you use Experience ManagerAssets and Dynamic Media standalone, copy the embed code on your website. Then, integrate it with your existing Quick view. See Integrating an interactive image with your website.
    If you use a third-party WCM (Web Content Manager), integrate the new interactive video with the existing Quick view used on your website. See Integrating an interactive image with an existing Quick view.

(Optional) Identifying hotspot variables

NOTE

This task is only required if the following are true:

  • You want to add interactivity to your image by triggering to Quick views.
  • Your implementation of Experience Manager does not use an eCommerce integration framework to pull product data into Experience Manager from any eCommerce solution. Such solutions include IBM WebSphere® Commerce, Elastic Path, hybris, or Intershop.

If your implementation of AEM uses eCommerce, you can skip this task and proceed to the next task.

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

When you add hotspots to a banner image in Experience Manager Assets, assign a SKU (Stock Keeping Unit). The SKU is a unique identifier for each distinct product or service that you offer. And, add any extra optional variables to each hotspot. Such hotspot variables are used later to match hotspots with Quick view 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 is enough to consult with IT specialists responsible for the existing Quick view implementation. Such people are likely to know what is the minimum set of data required to identify Quick view in the system. However, it is also possible to simply analyze the existing behavior of the front-end code.

Most Quick view implementations use the following paradigm:

  • User activates a user interface element on the website. For example, clicking a “Quick view” button.
  • The website sends an Ajax request to the backend to load the Quick view data or content, if needed.
  • The Quick view data is translated into the content in preparation for rendering on the web page.
  • Finally, the front-end code visually renders such content on the screen.

The approach then is to visit different areas of the existing website where the Quick view feature is implemented. Then trigger the Quick view and capture the Ajax URL sent by web page for loading the Quick view 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:

  • To see all outgoing HTTP requests in Google Chrome, press F12 to open the Developer Tools panel, and then click the Network tab.
    On a Mac, press Command+Option+I to open the Developer Tools panel, then click the Network tab.

  • In Firefox, you can activate the Firebug plug-in by pressing F12 and use its Net tab. Or, you can use the built-in Inspector tool and its Network tab.
    On a Mac, press Command+Option+I to open the Developer Tools panel, then click the Inspector tab.

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

Now find the Quick view Ajax URL in the network log and copy the recorded URL for future analysis. Usually when you trigger the Quick view there are numerous requests that are sent out to the server. Typically, the Quick view 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 Quick view URLs can have parts that are common for a given website category. However, they change only if you visit a different area of the website.

In the simplest case, the only variable part in the Quick view 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 Quick view URL has different varying elements in addition to the SKU. For example, varying elements could include category ID, color code, and size code. In such cases, every element is a separate variable in your hotspot data definition in the shoppable interactive image feature in Experience Manager Assets.

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

Single SKU, found in the query string.

The recorded Quick view URLs include the following:

  • https://server/json?productId=866558&source=100

  • https://server/json?productId=1196184&source=100

  • https://server/json?productId=1081492&source=100

  • https://server/json?productId=1898294&source=100

The only variable part in the URL is the value of the productId= query string parameter, and it is clearly a SKU value. Therefore, the hotspots only need SKU fields populated with values like 866558, 1196184, 1081492, 1898294.

Single SKU, found in the URL path.

The recorded Quick view URLs include the following:

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

The variable part is in the last portion of the path, and it becomes the SKU value of the hotspots: 6422350843, 1607745002, 0086724882.

SKU and category ID in the query string.

The recorded Quick view URLs include the following:

  • https://server/quickView/product/?category=1100004&prodId=305466

  • https://server/quickView/product/?category=1100004&prodId=310181

  • https://server/quickView/product/?category=1740148&prodId=308706

In this case, there are two varying parts in the URL. The SKU is stored in the prodId parameter and the category ID is stored in the category= parameter.

As such, the hotspot definitions are pairs. That is, a SKU value and an extra variable called categoryId. The resulting pairs are the following:

  • SKU is 305466 and categoryId is 1100004.

  • SKU is 310181 and categoryId is 1100004.

  • SKU is 308706 and categoryId is 1740148.

Example

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

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

  • /datafeed/Men-Windbreaker.json
  • /datafeed/Men-SimpleHenley.json
  • /datafeed/Men-CamoPullover.json
  • /datafeed/Women-QuiltedDownJacket.json

Looking at the server calls, you can 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:

  • The first type is Men or Women. You can call this “product category”.
  • The second type is product name, such as CamoPullover, which is likely the product SKU.

Given this information, the entire Quick view 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

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, publish your viewer preset as well. This rule is true for custom or out-of-box viewer presets.

To create an Interactive Image viewer preset

  1. In the left rail, tap Tools > Assets > Viewer Presets.

  2. Near the upper-right corner of the page, tap Create.

  3. In the New Viewer Preset dialog box, type a name to describe the interactive banner viewer preset.

    This title appears in the Viewer Preset list page after you save.

  4. In the Rich Media Type pull-down menu, select Interactive Image.

  5. Tap Create.

  6. On the Edit Viewer Preset page, tap the Appearance tab.

  7. Do one of the following:

    • To upload your own hotspot image that you want to use on images, tap the Asset Picker icon. In the Select Content page, navigate to the hotspot image you want to use and select it. Tap the Check Mark icon in the upper-right corner.
    • To select a predefined hotspot image, tap the Hotspot Gallery icon. On the hotspot gallery palette, tap the hotspot image you want to use.
  8. Near the upper-right corner of the page, tap Save.

    Be sure you publish the new viewer preset.

    See Publishing Viewer Presets.

    You are now ready to upload 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

  1. Upload image banners that you want to make interactive.

    See Uploading assets.

    You are now ready to add hotspots to the image banner; see the next task below.

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 Quick view pop-up display, as a hyperlink, or an Experience Fragment.

See Experience Fragments.

NOTE

The social media sharing tools in Interactive Image are not supported when you embed the viewer in an Experience Fragment. Instead, use or create viewer presets that do not have social media sharing tools. Such viewer presets let you successfully embed it in 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 appears to customers.

See (Optional) Previewing interactive images.

NOTE

When you add hotspots to an image in an Interactive Image or a Carousel Banner, the hotspot information is stored in the same metadata location. This location is relative to the image’s location, regardless of whether it is an Interactive Image or a Carousel Banner. This functionality means that you can easily reuse the same image – along with its defined hotspot data – in either viewer.

Be aware, however, that Carousel Banners support image maps on images that can also contain hotspots; an Interactive Image does not. Keep this thought in mind if you intend to create an Interactive Image or Carousel Banner that uses the same image. You can create Interactive Images and Carousel Banners using separate copies of the same image, instead.

See also Carousel Banners.

NOTE

If you are editing interactive images with hotspots and crop the image, your hotspots are removed.

To add hotspots to an image banner

  1. In the Assets view, navigate to the image banner that you want to make interactive.

  2. Do one of the following:

    • Hover on the image, then tap Select (checkmark icon). On the toolbar, tap Edit.

    • Hover on the image, then tap More actions (three dots icon) > Edit.

    • To open it in the Detail View page, tap the image. In the toolbar, tap Edit.

  3. Near the upper-left corner of the page, tap Add Hotspot (finger tap icon) to open the Hotspot management page.

  4. Near the upper-left corner of the page, tap Hotspot.

    1. Near the upper-left corner of the Hotspot Management page, tap Hotspot.
    2. On the image, tap a location where you want the hotspot to appear. If necessary, drag the hotspot to adjust its location. Or, use the keyboard arrow keys to control the position of a selected hot spot.
    3. Add more hotspots as necessary by repeating steps a and b.
    4. (Optional) To delete a hotspot, select it on the image, then tap Delete (trash icon) under the Hotspots heading.
  5. In the Name text field, type the name of the hotspot. This name also appears in the Selected Hotspot drop-down list.

  6. Do one of the following:

    • Tap Quick view.

      • If you are an AEM Sites or eCommerce customer, tap or click the Product Picker icon (magnifying glass) to open the Select Product page. Tap the product you want to use, then tap Select in the upper-right corner of the page. You are returned to the Hotspot management page.

      • If you are not an Experience Manager Sites or eCommerce customer

        • See Identifying hotspot variables; you must define these variables.
        • Then, manually enter the SKU value. In the SKU Value text field, type the product’s SKU. The entered SKU value automatically populates the variable portion of the Quick view template. It ensures that the system knows to associate the tapped hotspot with a particular SKU’s Quick view.
        • (Optional) If there are other variables within the Quick view that are used to further identify a product, tap Add Generic Variable. In the text field, specify an extra variable. For example, category=Mens is an added variable.
    • Tap Hyperlink.

      • If you are an Experience Manager Sites customer, tap the Site Selector icon (folder). Navigate to a URL. The URL-based method of linking is not possible if your interactive content has links with relative URLs, particularly links to Experience Manager Sites pages.
      • If you are a standalone customer, in the HREF text field, specify the full URL path to a linked web page.

    Be sure you specify whether to open the link in a new browser tab (recommended default) or the same tab.

    See Working with Selectors for more information.

    • Tap Experience Fragment.

      • If you are an AEM Sites customer, tap or click the Search icon (magnifying glass) to open the Experience Fragment page. Tap the Experience Fragment you want to use. Then tap Select in the upper-right corner of the page. You are returned to the Hotspot management page.
        See Experience Fragments.

      • Specify the width and height of the Experience Fragment as you want it to appear on the banner.

        NOTE

        The social media sharing tools in Interactive Image are not supported when you embed the viewer in an Experience Fragment. Instead, use or create viewer presets that do not have social media sharing tools. Such viewer presets let you successfully embed it in Experience Fragments.

  7. Tap Save to save your work and return to the Browse page.

  8. Publish the interactive image. Publishing delivers the banner through the cloud and also generates embed code that lets you integrate with a third-party website.

    See Publishing assets.

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

    See Integrating an interactive image with your website.

    NOTE

    If you are editing interactive images with hotspots and crop the image, your hotspots are deleted.

(Optional) Previewing interactive images

You can use Preview to see a representation of what your interactive image looks like to customers. Preview also lets you test the image’s hotspots to ensure they behave 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. 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

  1. In the Assets view, navigate to an existing interactive image that you have created and tap to open it in Preview.
  2. Near the upper-left corner of the Preview page, in the Content drop-down list, tap Viewers.
  3. In the Viewers list, tap Shoppable_Banner or the name of the interactive image viewer preset you have created.
  4. To test the associated actions of hotspots, tap hotspots on the image.

Publishing interactive image assets

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

Integrating an interactive image with your website

After you upload a banner image, add hotspots to it, and publish the interactive image, you are 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.

  1. Copy the published interactive image’s embed code.
    See Embedding the Video or Image Viewer on a Web Page.

  2. Add the copied embed code on the desired location within the webpage.
    The copied embed code is set for a responsive environment so it automatically fits the assigned area.

Example

Using the demo website as an example, notice that the picture of the three individuals 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 that the result shows the shoppable interactive image on the page with three circle hotspots.

NOTE

As this point, the hotspots on the shoppable interactive image of the demo website are for display purposes only. They are not yet integrated with the existing Quick views.

To apply a “crop” to a shoppable interactive image for a responsive environment, include the Interactive Image configuration attribute ZoomView.iscommand to the path. In this case, the ZoomView component is called 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 Quick view on your website.

Integrating an interactive image with an existing Quick view

NOTE

This task only applies if you are a standalone AEM Assets customer.

The last step in this process is integrating the interactive image with an existing Quick view implementation on your website. There is no solution to the integration that works for all cases. Every Quick view implementation is unique and a specific approach is needed. As such, involving the assistance of a front-end IT person is helpful.

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

  1. A user triggers an element in the user interface of your website.
  2. The front-end code obtains a Quick view URL based on the user interface element that was triggered in step 1.
  3. The front-end code sends an Ajax request using the URL obtained in step 2.
  4. The backend logic returns the corresponding Quick view data or content back to the front-end code.
  5. The front-end code loads the Quick view data or content.
  6. Optionally, the front-end code converts the loaded Quick view data into an HTML representation.
  7. The front-end code displays a modal dialog box or panel and renders the HTML content on the screen for the end user.

These calls do not necessarily represent independent public API calls that are 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.

When the shoppable interactive image is replacing step 1, and partially step 2, a user taps 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:

  • Listens to an event emitted by the shoppable interactive image.
  • Constructs a Quick view URL based on the hotspot data.
  • Triggers the process of loading the Quick view from the backend and rendering it on the screen for display.

The embed code returned by Experience Manager Assets has a ready-to-use event handler 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 Quick view URL is opposite of the process used for identifying hotspot variables covered earlier.

See Identifying hotspot variables.

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

Single SKU, found in the query string

s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&amp;source=100"; }, });

Single SKU, found in the URL path

s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });

SKU and category ID in the query string

s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&amp;prodId=" + inData.sku; }, });

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

You can see how these steps are applied to the demo website to fully integrate a shoppable interactive image with the Quick view code. Earlier, the structure of the Quick view 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. These fields are 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 Quick view dialog box using a simple loadQuickView() function call. This function takes only one argument, which is the Quick view data URL. As such, the last step 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.

Using Quick views to create custom pop-ups

See Using Quick views to create custom pop-up windows.

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now