Use Dynamic Creatives in Experiences

Follow these steps to add an image with a click zone to an experience.

  1. Create a new Web experience.
  2. Configure the WHY settings.
  3. Click the WHAT settings, and then click ADD ACTION.

    Callout of the WHAT settings and the ADD ACTION button on the Experience Editor page

  4. Click Images.

    Callout of the Images option on the Action Type panel of the WHAT settings

  5. Click the image action template that you want to use.

    The image action templates shown here may not reflect the options that appear for you.

    The Images action templates available

  6. Click CHOOSE to select an image already uploaded to the account, or click UPLOAD to upload an image to the account.

    Callout of the CHOOSE button and of the UPLOAD button on an action template that inserts an image

  7. If you clicked UPLOAD in the previous step, click EDIT to open the image in Content Builder.

    Callout of the EDIT button on an image-based action template

  8. If you clicked CHOOSE in step 6, then click EDIT IN CONTENT BUILDER in the Select Image modal.

    Callout of the EDIT IN CONTENT BUILDER button in the 'Select image' modal

  9. Optionally, click CROP to trim the image, or click the image dimensions to resize it.

    Callout of the CROP button and the image dimensions in Content Builder

  10. Click Add Layer, then select Click zone, and then resize the click zone layer as necessary to fit the area of the image you want to be interactive.

    Animated demonstration of a user clicking the Add Layer selector in Content Builder, selecting the 'Click zone' option, and then resizing the layer to cover the image on the canvas

  11. Complete the fields in the Link section:
    • URL: The URL that loads when the customer clicks the image
    • Alt text: The text displayed on mouse hover over the image or in lieu of the image if the customer has disabled image display in their browser
    • CSS class: Defines the CSS class for the link
    • Relationship: Defines the relationship between the current image and the linked image

    Callout of the URL, Alt text, CSS class, and Relationship fields for a click zone layer in Content Builder

  12. Select an option to define how the click zone's link launches. If you select In a popup window, then complete the fields that appear that control the pop-up window.

    Callout of the link-opening options, including the pop-up window settings

  13. Click SAVE and then click CLOSE AND RETURN to exit Content Builder and return to the Experience Editor page.

    Callout of the SAVE button and of the CLOSE AND RETURN button

  14. Complete the remaining fields and settings in the Required Inputs section of the action template and, as necessary, the Optional Inputs section. Click CREATE.
  15. Configure the WHO and, if necessary, WHEN  settings.

Ensure that you preview the experience before you active it.

Modifying an Image Used in Multiple Experiences

Follow these steps to modify an image used in multiple experiences.

  1. Click COMPONENTS in the top navigation bar, and then select Content.

    Callout of the Content option in the COMPONENTS menu

  2. Click the image that you want to modify, and then click EDIT IN CONTENT BUILDER.

    Callout of the EDIT IN CONTENT BUILDER button for an image in Content Manager

  3. Modify the image and associated settings as necessary, and then click SAVE.

    Callout of the SAVE button in Content Builder

  4. Click UPDATE CONTENT IN ALL EXPERIENCES if you want the changes to the image to be part of all the experiences in which the creative appears. Click SAVE A NEW COPY to create a new image file that includes the changes you made that you can then deploy to whichever experiences you want.

    Callout of the UPDATE CONTENT IN ALL EXPERIENCES button

Related Articles