Adding a hotspot widget to an Adobe Captivate project

In the Visual Properties panel, expand the Alignment and Spacing section.

The Content Width slider and Horizontal Padding are linked in the Alignment and Spacing section. Moving the slider from the left side changes the left padding value, and moving the slider from right changes the right padding value. The same change is replicated in the Content Width slider when you change the left or right Horizontal padding values.

Move the Number of hotspots slider to increase or decrease the number of hotspots in the widget. You can add at most six hotspots. The number of hotspots has as many callouts on the slide. These callouts are displayed when the hotspot is clicked.

Select any design option. A design option presents pre-configured layouts with cleaner design elements to apply to the widget.

For more information, view Design options in Adobe Captivate.

In the Components section, you can change the following:

• Title: Add or remove the widget's title.
• Body: Add or remove the body of the widget
• Instruction: Add or remove the instruction on the widget.

You can add or remove the following Hotspot-related components:

• Hotspot: This option remains disabled.
• Image: This option remains disabled.

After adding the widget's title, you can add or remove the title or image on a callout. A callout is additional information a learner sees when they click a hotspot at runtime. A callout contains a title, body, and image. You can add a callout's title or image after you click a callout button on the slide. By default, the first callout button is already selected.

• Callout image: Add or remove the image on a callout.
• Callout title: Add or remove the title on a callout.
• Callout body: Add or remove the text body on a callout.

In the Appearance section, you can add the widget's background color and change the look and feel of a callout.

• Background tab: In this tab, you can change the widget's background color, add a border, or apply a shadow.
  
• Callout tab: In this tab, increase or decrease padding in the callout, add the same radius for all corners or a different radius for each corner of the callout, add a border to the callout, and apply a shadow to the callout's border.
  

In the Settings section, enable the Move to next slide when the widget completes toggle to allow learners to move to the next slide only after they visit all the hotspots.

Select a hotspot, so that a solid blue border appears around the hotspot.

In the States section, click Show to launch the States Flyout. Configure the in-built states of the hotspot, Hover, Visited, Selected, and Disabled. If any state is disabled, right-click the state, and select Enable.

For more information, view Change states.

In the Icon section, select the folder icon to change the hotspot icon. Select an icon from Assets or on your computer. Then select an icon and replace the hotspot's icon.

Change the hotspot's transparency in the Appearance section by moving the Opacity slider.

Select the Solid color picker to change the color of the hotspot.

Select Callout 1 on the slide.

In the Visual Properties panel, in the Components section, you can change the following:

• Callout image: Select to display or hide an image on the callout.
• Callout title: Select to display or hide the title on the callout.
• Callout body: Select to display or hide the body text on the callout.

In the Appearance section, you can add padding to the callout and modify the radius on one or multiple corners of the widget.

Also, you can change the callout's background color, add a border, and add a drop shadow in any direction of the callout.

If you want to replace the existing image, select the folder icon in the Image source section. Navigate to the required image and select a new image to change the image in the callout.

In the Settings section, select how each callout must be displayed. The options are:

• Reveal upwards
• Reveal leftwards
• Reveal rightwards
• Reveal downwards

If you select Reveal leftwards, the callout displays to the left of the hotspot.

In the Show callout on dropdown, select either Click or Hover. If you select Click, the callout displays only when a learner selects the hotspot.

Select a callout.

Select the text inside a callout.

In the Visual Properties panel, you can:

• Apply a text preset.
• Change the font and its size.
• Change the text's color, add an outline, highlight, or shadow.
• Add bullets to the text and change its indentation.
• and others. For more information, view Text in Adobe Captivate.
  

Select the image on the callout. Use the image placeholder and add an image from Assets or on your computer.

You can apply an image filter in the Appearance section in the Visual Properties panel. Also, change the image's intensity, blur, brightness, or contrast levels.

For more information on working with images, view Images in Adobe Captivate.