Interactive Image

Interactive Image is part of the Image Component Set. Studio Users upload an image and set interaction points along with content for each interaction point. When app users tap an interaction point the content below the image dynamically updates with the related content.

Ideas for Using Interactive Image

  • Add a team photo of your executive staff members and place an interaction point next to each person. This will allow app users to learn more about each leader.
  • Allow customers to explore a product’s various features by adding interaction points to a product image.
  • Orient visitors or event attendees to the venue, such as registration and dining areas.

If you are looking to display a larger image, such as a floor plan or map, check out Interactive Map.

Interactive Image Properties

The Interactive Image Component has the following properties:

  • Component Id - Sets the name of the Image component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.

    Pro Tip: It is a best practice to use only letters without spaces for the Component Id. Symbols, spaces, and numbers are not recommended.
  • Default Headline Text - Enter the text as it should appear in the app. The text uses the font selected in the Font Styling section of Branding. This text will wrap and there is no limit on the number of characters allowed. The Default Headline Text appears under the Interactive Image when the Page first loads before the app end users taps an interaction point. The Interaction Point Headline will replace the Default Headline Text when tapped. 
  • Default Body Copy - Enter the text as it should appear in the app. The text uses the font selected in the Font Styling section of Branding. This text will wrap and there is no limit on the number of characters allowed. The Default Body Copy appears under the Interactive Image when the Page first loads before the app end users taps an interaction point. The Interaction Point Body Copy will replace the Default Body Copy when tapped. 
  • Image - Upload a .JPG or .PNG to display an Image. To remove an uploaded Image, click on the Trash Can.

    Pro Tip: Optimize all Images for the web to increase app performance and shorten load time.
  • Styling
    • Headline Font Size (px) - Enter the font size in pixels.
    • Headline Text Color - Sets the color of the Headline Text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Body Copy Color - Sets the color of the Body Copy. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Headline Alignment - Sets the alignment of the Headline Text. Choose from the dropdown list: Left, Right, or Center.
    • Body Copy Alignment - Sets the alignment of the Headline Text. Choose from the dropdown list: Left, Right, or Center.
    • Icon Type - Sets the type of icon used in the Interactive Image for each Interaction Point. Choose from the dropdown list: Alphabetical, Full Circle, or Numerical. 
    • Active Point Background Color - Sets the Interaction Point Background Color when an app end user taps an Interaction Point. All other Interaction Points show as Inactive. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Active Point Border Color - Sets the Interaction Point Border Color when an app end user taps an Interaction Point. All other Interaction Points show as Inactive. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Active Point Text Color - Sets the Text Color when the Icon Type is set to Alphabetical or Numerical. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Inactive Point Background Color - Sets the Interaction Point Background Color when an app end user taps any other Interaction Point. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Inactive Point Border Color - Sets the Interaction Point Border Color when an app end user taps any other Interaction Point. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Inactive Point Text Color - Sets the Text Color when the Icon Type is set to Alphabetical or Numerical. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Display Click Coordinates - Toggles on or off the Coordinates of a location on the image when clicked by the Studio User. This is extremely helpful to determine the X and Y coordinates for each Interaction Point. 
    • Top Content Padding - Sets the padding for the top of the Interactive Image. This applies only to the image portion of the Interactive Image Component. Padding for the entire component is determined in Placement Settings. 
    • Left Content Padding - Sets the padding for the left of the Interactive Image. This applies only to the image portion of the Interactive Image Component. Padding for the entire component is determined in Placement Settings. 
    • Right Content Padding - Sets the padding for the right of the Interactive Image. This applies only to the image portion of the Interactive Image Component. Padding for the entire component is determined in Placement Settings. 
    • Bottom Content Padding - Sets the padding for the top of the Interactive Image. This applies only to the image portion of the Interactive Image Component. Padding for the entire component is determined in Placement Settings. 
  • Interaction Points (Up to 10)
    • X - The X coordinate for the Interaction Point.
    • Y - The Y coordinate for the Interaction Point.
    • Headline - Enter the text as it should appear in the app. The text uses the font selected in the Font Styling section of Branding. This text will wrap and there is no limit on the number of characters allowed. 
    • Body Copy - Enter the text as it should appear in the app. The text uses the font selected in the Font Styling section of Branding. This text will wrap and there is no limit on the number of characters allowed. 

Interactive Image Placement Settings

The Placement Settings for the Component sets which column(s) the Component will appear. Each Page of the app can have a different number of columns that are set in the Layout section of the Page Settings. The following Placement settings are available for this Component:

  • Column Start - Sets the column where the Component will start. 
  • Column Span - Sets how many columns the Component will span. 
  • Padding - Sets how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.
  • Display Mode - Sets how the Component is displayed. If Both is selected, the Component will always show. Both are the default option. If Optimal is selected, the Component will only show if the browser supports the app. The main supported browsers are Chrome and Safari. If Degraded is selected, the Component will only show if the browser does not support the app. The main unsupported browser is Internet Explorer.

Still need help? Contact Us Contact Us