Image Hotspot Widget

Create Your Own Image Hotspot Widget in Seconds for Your Website

Build a responsive interactive image for products, floor plans, screenshots, diagrams, and infographics. Add pins, write detail cards, set CTA links, choose interaction behavior, and style everything in a no-code builder.

Create Your Image Hotspot Widget - It's Free!

Create Your Own Image Hotspot Widget in Seconds for Your Website

How to embed Image Hotspot Widget to WordPress

1Get your embed code

After customizing your Jotform website widget, click Try it on your website for free, and copy the generated embed code.

2Open the page editor

Go to the WordPress post or page where you want to display the widget, then add a new block.

3Add a Custom HTML block

Select Custom HTML and paste your Jotform Website widget embed code into the HTML field.

4Update and view

Click Update or Publish, then open the page to check your embedded widget.

Learn more

Add and Drag Pins on the Image

Place hotspots where visitors need context. Coordinates are saved as percentages so the pins stay accurate when the image changes size.

Placement controls include:

Drag to positionRelative X/YResponsive scaling

Place Hotspots

Create Rich Cards for Each Hotspot

Turn pins into useful explanations with titles, descriptions, optional images, prices, CTA labels, links, and new-tab behavior.

Card content includes:

TitleDescriptionImagePriceCTA link

Edit Cards

Choose Desktop and Mobile Behavior

Open cards on click or hover, choose the preferred desktop card position, and keep mobile interactions readable with bottom sheets.

Behavior controls include:

Click modeHover modeCard positionImage widthMobile bottom sheet

Set Behavior

Customize Pins, Cards, and Advanced CSS

Match your site with pin icons, colors, pulse style, card themes, accent color, radius, shadow, branding, and scoped CSS.

Style controls include:

Pin iconsPin colorPulse styleCard themeCustom CSS

Style Your Widget