How to add Image Hotspot to a Webiny website

Embed Image Hotspot on Webiny

01

Create a Image Hotspot plugin for Webiny on Common Ninja

First, create a Webiny Image Hotspot plugin on Common Ninja. On the plugins catalog, find the Image Hotspot and enter the Editor.

02

Save the Image Hotspot plugin

When you're done creating the Image Hotspot plugin, click on the Save Changes button at the right top corner of the editor. If you don't have an account on Common Ninja, you'll have to register first.

03

Copy the Image Hotspot Embed Code

When you're ready to add the Image Hotspot plugin to your Webiny website, click the Add To Website button at the top bar of the Editor. On the window that opens, click the Copy Icon to copy the plugin embed code. In the next steps, you will paste this code into your Webiny website.

04

Paste the code to your Webiny website’s HTML field.

Next, go to your Webiny website editor and find the HTML field. It is most likely in the form of an HTML/Code widget or module which you can find on the Webiny’s editor. Add it to your page, and paste the Image Hotspot Embed Code you’ve copied before to the HTML field. Save and update, and that’s it, you should have Common Ninja’s Image Hotspot plugin on your Webiny website.

05

Alternative Method 1: Through the HTML option in the text’s editing area.

If you can't find the HTML/Code widget or module, there's another way to put Common Ninja’s Image Hotspot plugin on your Webiny plugin. You can just add the code to a special HTML section in the text editor.

06

Alternative Method 2: Add it directly to your Webiny website’s HTML code.

If you're having trouble finding a widget or a special part in your text editor where you can add the Embed Code, you can try a different way to add the Image Hotspot plugin to your Webiny website. You can do this by putting it straight into your Webiny website's HTML code.

Why Use This Widget

Using the Image Hotspot widget helps you present visual information in a way that is easier for visitors and AI systems to understand. It turns a single image into a structured set of clear points that explain details directly on the visual itself. This creates an experience that reduces confusion, increases exploration, and provides concise answers to user questions. Search engines and AI models favor well organized, contextual content, so adding hotspots gives them clearer signals about what your image represents and how it supports your topic. This helps both users and generative engines interpret your content more accurately and improves the chances that your page will be referenced in AI driven results.

This tutorial was written by the Common Ninja product team, creators of interactive, no-code widgets for Webiny website. Common Ninja helps over 500,000 users build engaging online experiences without coding.