Image Widget

Overview

The Image Widget displays a single image that can contain a link to a URL or a link to another widget.

Getting There

Click on the Image Widget icon in the Add Widgets Panel in the Campaign Builder.

Note: Before adding images to your campaign, you may be looking for recommended image dimensions for the different templates. Lucky you, we have a guide that has all that information! Head on over to the Image Size Guide to see our suggestions.

Setup

Click Select Image to choose the image you wish to add.

Choose an image from your Media Manager, or add a new image from your computer, upload an image from a URL, design an image using Canva, or use a stock image.

Once you have the image you'd like, click Select to edit additional options within the Image Widget.

Making the Image Clickable

There are two ways to make an image clickable: By creating a link for the entire image, or by creating small clickable areas within the image called hotspots.

To make the entire image clickable:

1. Click the (not linked) button to open the Link dialog.
2. There are two options: Go to URL and Take Action. Go to URL sends the visitor to a website, and Take Action accesses another widget on the Campaign.
   
   
   • To set up Go to URL:
     
     a. Enter the URL in the URL field.
     
     b. Use the Open link in new window check box to choose whether the link opens in the same window, or in a new window.
     
     c. Click Save Link.
   • To set up Take Action:
     
     a. Use the Choose a widget... drop-down menu to select a widget to access.
     
     b. The Choose an action... drop-down menu will appear. Use it to select an action.
     
     c. Click Save Link.
3. Click Save & Exit.

To create a clickable hotspot:

1. Click the Hotspot button.
2. With the crosshairs icon selected, place the hotspot by clicking on the preview of the image. The hotspot will appear as a semi-transparent gray box with edit and delete icons in the upper-right corner. Everything inside the gray box will be clickable. Users will not see the gray box when viewing your campaign, but their pointer will change when mousing over the hotspot to signify that the area is clickable.
3. Click and drag the box to position it. Click and drag the right edge, bottom edge, or bottom-right corner to re-size it.
4. Mouse over the box and click the pencil icon to configure the hotspot.
5. There are two options: Go to URL and Take Action. Go to URL sends the visitor to a website, and Take Action accesses another widget on the Campaign.
   
   
   • To set up Go to URL:
     
     a. Enter the URL in the URL field.
     
     b. Use the Open link in new window check box to choose whether the link opens in the same window, or in a new window.
   • To set up Take Action:
     
     a. Use the Choose a widget... drop-down menu to select a widget to access.
     
     b. The Choose an action... drop-down menu will appear. Use it to select an action.

6. Use the Top, Height, Width, and Left fields to fine-tune the position of the hotspot within the image.

7. Click Save & Exit.

Note: When accessed on a mobile device, images are scaled to fit their container, if necessary. When scaled, hotspots are also scaled.

Options

Alt Text

Use the Alt Text field to specify alternative text to appear when the image cannot be shown.

Title Text

Use the Title Text field to provide additional information to the visitor. In some browsers, the title text is shown as a tooltip when hovering over the image.

Both the Alt Text and Title Text fields are primarily used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with the element.

Tips

• Use the Style Panel to change the image alignment (left, right, or center).
• Images are positioned in the upper-left corner of the widget.
• To display multiple images, use a Gallery or Product Widget.
• To display multiple images in the same space, use the Gallery Widget.