You can create buttons that change their appearance depending on how a viewer is interacting with them using the Hover State widget. For example, you can create hotspots that display additional information about your product when a viewer hovers their cursor over the hotspot.

You can display the following images for a button, depending on how the viewer is interacting with the button:

• An image that displays until the viewer interacts with the button (the Up state).
• An image that displays when the viewer hovers their cursor over the button (the Over state).
• An image that displays when the viewer clicks the button (the Down state).

You can also include tracking pixel URLs in your ad with a Hover State widget. The pixels fire to these URLs simultaneously either when a viewer clicks the button, or when the viewer hovers over the button.

Before you start

• Create an In-Banner Video creative, an In-Stream Video creative, or a Rich Media creative. For steps, see Assembling a creative from a template or Assembling a creative from scratch.
• Create the button images to display. You can display the following images for a button, depending on how the viewer is interacting with the button:
  • An image that displays until the viewer interacts with the button (the Up state).
  • An image that displays when the viewer moves their cursor over the button (the Over state).
  • An image that displays when the viewer clicks the button (the Down state).
  All images should be the same size. To make sure that the live ad is optimized for mobile devices, the image overlay should be at least 44 × 44 pixels, so that it is big enough for viewers to tap. For information about the types of images that you can upload, see Supported file formats.

To add a Hover State widget to a creative

1. Navigate to the Division, Account, and Campaign of the creative.
2. Click the Campaign Management tab, then click the Creatives tab.
3. Click Edit for the creative. The Mixpo Studio opens.
4. Add the widget to your creative:
   1. Select the canvas tab that you want to add the widget to.
   2. Click the Overlays tab, then click Widget.
   3. Click Our stock library.
   4. Select the Hover State widget, then click Add media. The widget is added to your creative.
5. Select the Hover State widget. In the settings area, new widget options appear.
6. In the Overlay name field, type a name for the widget. The name is displayed in reports about the widget.
7. Expand the Actions area, then assign an action to the widget. For background information and steps to configure actions, see Specifying what happens when viewers interact with ads.
8. Upload an image for each button state. The image that you upload for the "Up" state is displayed in the Studio. If you don't upload an image for the "Up" state, the widget appears transparent in the Studio.
9. To change the size of the widget, click and drag the sizing handles on the corners of the widget.
   Note: If you added the widget to the Timeline Canvas tab, make sure that the live ad is optimized for mobile devices by leaving at least 44 pixels between the widget and the bottom of the creative, so that viewers can tap the video player controls.
10. To customize the Hover State animation, do the following:     
1.  Under the Up State drop dropdown menu in the Hover State settings, select an animation type.      
2.   Assign a value to Delay (ms) - controls the delay from when the widget is interacted with until the animation starts.
3. Assign a value to Duration (ms) - controls the length of the animation.
4. Assign a value to Repeat - controls how many times the animation sequence will repeat.
5. To customize the Hover State Over State animation settings, under the Over State dropdown menu in the Hover State settings, repeat steps 10. 2, 10.3, and 10.4.       
11. If you want to include a tracking pixel URL that either fires each time a viewer clicks the button, or when the view hovers on the button, select the Tracking dropdown under the widget settings: 
1.  To implement a tracking pixel that fires each time a viewer clicks the button, type the URL in the Tracking Pixel field. To add additional URLs, click + (the plus sign), then type an additional URL.
2. To implement a tracking pixel that fires each time a viewer hovers over the button, type the URL in the Tracking Pixel (on hover) field. The pixel will fire once the viewers mouse has hovered over the button for one second.  
12. If you want to log user interactions when a viewer hovers over the button, select the Tracking dropdown under the widget settings and select the check box "Log interaction on hover?". These interactions will be logged any time a user hovers their mouse over the button for one second, and will be representing under the Interactions breakout on the Automated Interactivity Report. 
13. If you want to launch a panel when the hover state button is hovered over, do the following:
    1. Under the Actions settings, select "Open Panel"
    2. From here assign an existing panel in the dropdown menu of available panels.        
    3. If you have not created your panel yet, select "Create Panel" and design your desired panel. Once your panel is complete, repeat steps 13.1 and 13.2.   
14. If you added the widget to the Timeline Canvas tab, specify how you want the widget to appear in your video sequence. Do the following:
    1. ​From the Enter and Exit drop-down lists, select the entrance and exit animation effects.
    2. In the Duration field, type the number of seconds that you want the widget to appear for.
    3. In the Start time field, type the number of seconds into the video that you want the widget to appear.
    Tip: You can also drag the widget on the visual timeline to adjust the timing. For steps, see Adjusting the timing of video content using the visual timeline.
15. Click Save.
16. To test that the creative appears the way that you want it to, return to the Mixpo Platform and click Preview.