How to Add Interactive Clickable Elements to Diagrams in
WordPress
Using “Draw Attention”
- Select “Plugins” from the website backend.

- “Click Add New”.

- Search for “Draw Attention”, and install it.

- Activate it.

- Search for “Image Hotspot by DevVN”, and install it.

- Activate it.

- From the left bar of the backend, you'll find "Draw Attention", click it.

- Put image title.

- Choose the image from the right panel of the screen.

- It should look like this after you choose your image.

- Click the expand icon to expand the area.

- Choose the shape to identify your clickable part of the image.

- Preferably, choose a rectangle.

- Just hold down your mouse's "left click" to draw the shape on your preferred area.

- Fill in the necessary details like the title of the area you place the shape on and the preferred action. This title will display on the page, publicly.

- From actions, if you select "Go to URL", fill the destination link and choose to open in same window or new window.

- This is to draw another shape on another area you want to add a link on the image. Click "Add Another Area".

- Click Update to save all changes.

- Copy the shortcode to be pasted anywhere you want to display the image.

- Add the shortcode to a page. Create a new page.

- Click the + icon.

- Select Paragraph.

- Paste the copied shortcode and do well to center it.

- Publish the page to make it available publicly.

- Open the page in a new tab. You should see the image, hover to the part you added a link to make sure it's clickable.

- If you see this page, then you need to edit your image again from the backend and save it.

Using “Image Hotspot”
- Select "Image Hotspot" from the left side of the WordPress backend.

- Fill in the necessary information, image title, pin image, pin position, and the image to add the clickable parts itself.

- Use "Add Point" as many times as you need, the points will serve as links.

- When you click the inserted points, you'll get this popup to edit it. Edit the link, title, etc.

- Copy the shortcode after you publish it.

- Paste the shortcode to your page.

- View the page and see the results.
