How can I integrate interactive graphics / animations on my website?

Hi, this is Sandra from GREYD. Today I’d like to show you how to include interactive graphics on your website super easily with our Hotspot block. With the Hotspot block you can place one or more hotspots on images or animations that can then be clicked by your website visitors. In your hotspots you can integrate any type of content like buttons, links, texts, images or even entire forms. So let’s have a look at the block in the backend. After placing it somewhere on your page select an image or animation first.

For animations please make sure that Lottie animations have not been disabled in your GREYD.SUITE settings as then it wouldn’t work.

Now you can click anywhere on your graphic and place a hotspot by holding the alt or option key.

On the right you will then find several settings that will apply to the entire graphic including all its hotspots. At first you can change the image or animation again and also define when an animation should be started.

Instead of the hotspot symbol you can also work with icons or an image. Depending on your selection you will then find different settings for colors, sizes, border radius and/or spaces.

With clicking on the hand symbol you can also design hover and active states for the hotspot, creating really nice effects like this one. On top of that you can also implement an idle animation. Here you can see an example.

Each hotspot now comes with a pop-over to be opened on click. As mentioned already, you can place any content in that pop-over — for example text information, other graphics and even forms.

For the pop-over you’ll also find various design settings applicable to all hotspots in your graphic. Define for example whether your pop-over should have such a little triangle. Decide where it should open and with how much distance to the hotspot itself.

You can define text and background colors — again with the possibility to create a hover effect. You can vary the size individually per breakpoint, the border radius, the border, you can add a drop shadow and change the padding.

Furthermore, you can edit the size of the image or animation and also vary that per breakpoint. Here you can define whether your hotspot should already open on hover and if you only want one hotspot to be opened at a time, so if another one is clicked the first one will automatically be closed.

By the way, you can also overwrite these general stylings for individual hotspots and/or their pop-overs. To do that, just click on one of the hotspots and activate this toggle and you will find the same options as shown earlier to change anything you like for this particular hotspot or pop-over. And you can also vary the idle animation individually, so that for example not all pop-overs pulse simultaneously, but the attention of the website visitor is drawn to one hotspot after the other.

And last but not least you can also remove hotspots from your graphic by clicking them and pressing shift.

For more videos and information please visit our Helpcenter.