How to Create an Interactive Graphic in Riddle

Interactive graphics are a great way to explain products, show locations on a map, and give people a hands-on experience of whatever you sell or promote. They are incredibly easy to build in Riddle.com with our Interactive Graphic block type, which is available in every Riddle format. You can use it in quizzes, polls, surveys, or in a Story Riddle.

Here is a full walkthrough of how to create and edit an interactive graphic.

Getting Started

Once you are logged into Riddle, create a Riddle. Literally any kind will do. For this demo I am using a Story Riddle.

Click on Story, and you will see a set of suggestions. One of them is Interactive Graphic. Select it, give it a title, and get started by adding the core image of your interactive graphic.

Adding Your Base Image

Adding images works the same way it does everywhere in Riddle. Pick an image, or drag and drop it straight into the editor. This becomes your base image. In this example, the base image is a product: a set of headphones we want to explain.

Adding Your First Hotspot

Hotspots are how you make an image interactive. Say there is a battery charger that is not immediately visible. To add a hotspot, just click on the spot you want to highlight. You can drag the hotspots around at any time to position them exactly where you need them.

Each hotspot comes with its own settings. The most important one is the action that fires when someone clicks it. Here, we add an image that shows up in the pop-up, in this case a photo of the battery, along with a short description. You can also set a hover label, which is the text that appears when someone moves their cursor over the hotspot.

Previewing Your Interactive Graphic

It is worth previewing as you go. Click on a hotspot in the preview and the info pop-up appears. Close it to return to the graphic. Users can also zoom in, pan around, and reset the zoom to explore the image freely.

Choosing What Each Hotspot Does

Every hotspot can trigger a different action. These are the options you have:

• Show info pop-up. The default behavior. A pop-up appears with your image, title, and description.
• No action (label only). If a short explanation is all you need, skip the pop-up and just show the hover label.
• Open an external URL. Turn a hotspot into a button like “Shop now.” When people click it, they go straight to your shopping page.
• Navigate to the next block. Send users to the next block in your Riddle. For example, a form where they request more information about your product.
• Drill down. Open another image instead of a pop-up. You select the next image you have created, and the drill-down can keep going through as many levels as you like.

Drill-Down Example: A Hotel Tour

To show drill-down in action, here is a hotel tour with several rooms. Instead of opening a pop-up, clicking the hotspot for the bar zooms into the graphic and reveals a more detailed image of the bar. From there you can explore other elements inside that room, and you could continue zooming through multiple levels. It works just as well on mobile as it does on desktop.

To set this up, you tell the hotspot, for example the bar, not to open a pop-up window but to drill down to an image. Then you select the next image you have prepared, the detailed bar view, and that becomes the drill-down destination.

Hotspot Shapes: Dots, Circles, and Rectangles

By default, each hotspot is a dot. You can also turn it into a circle or a rectangle.

This is useful when you want a whole area to be clickable rather than a single point. Say you want an entire table to link through to the library: make the hotspot a circle or rectangle that covers it. On a map, you can use a circle or rectangle to cluster several locations in a tight area. People click the cluster, drill down, and then select the specific spot they want.

Showing Hotspot Numbers

By default, hotspots appear as pulsating markers without numbers. If you open the settings, you can switch on the numbers you see while building the graphic. That lets you reference them directly in your copy, for example: “Click on number two to learn more about this feature.”

Changing Hotspot Colors

You can also change the color of your hotspot markers. Set them to red, for example, and all the markers update to match. In this demo I am sticking with the original blue.

Map Example: A Golf Course

Here is one more example to show how interactive graphics work on maps: a golf course. You can drill into a single hole, then drill down further to the putting green, the tee shot, or the approach shot for that specific hole. As always, users can zoom in, zoom out, and pan around to explore the course, or whatever you choose to put on the map.

Add a Buy-Now Button

Back on the headphones example, say you have the charging cable in the image and you want people to buy it on the spot. Add a “Buy now” button to that hotspot. When people click the hotspot, the button appears, and clicking it sends them straight to your website to purchase the cable.

Give It a Try

Interactive graphics are an amazing tool whenever you want to explain something, whether it is a map, a tool, or a product. You can embed them like any other Riddle, so they look completely native on your website and give your marketing a real boost.

Give the interactive graphic a try. It really is easy to use.