WEBVTT 00:00:01.620 --> 00:00:05.710 Interactive Graphics are a great way to explain 00:00:05.710 --> 00:00:09.810 products, show locations 00:00:09.810 --> 00:00:14.140 on a map. Give people an interactive experience 00:00:14.140 --> 00:00:17.840 of this thing you sell or promote. They're incredibly easy 00:00:17.840 --> 00:00:21.580 to create in Riddle.com with our new Interactive 00:00:21.580 --> 00:00:25.620 Graphic block type which is available in all Riddle 00:00:25.620 --> 00:00:29.310 formats. You can use it in quizzes, in 00:00:29.310 --> 00:00:33.050 polls, surveys or in our story riddle. 00:00:33.050 --> 00:00:36.630 Let me show you how to create an edit in an interactive 00:00:36.630 --> 00:00:40.400 graphic in this short Riddle Academy course on interactive 00:00:40.400 --> 00:00:44.060 graphics. Once you're logged into Riddle, create 00:00:44.060 --> 00:00:47.610 a Riddle. Literally any kind will do. 00:00:47.610 --> 00:00:51.260 To get started, I choose the story 00:00:51.260 --> 00:00:56.580 riddle here. Let's go create a Riddle story. 00:00:56.580 --> 00:01:00.230 If you click on story, you have suggestions down here 00:01:00.230 --> 00:01:04.470 and one of the suggestions is interactive graphic. 00:01:04.470 --> 00:01:08.470 Select this, give it a title and get started 00:01:08.470 --> 00:01:13.030 by adding the core image of the interactive 00:01:13.733 --> 00:01:17.660 graphic. To add these images, like everywhere 00:01:17.660 --> 00:01:21.570 in Riddle, you can just go ahead, pick an image, 00:01:21.570 --> 00:01:25.240 drag and drop, load it here. This will be our base 00:01:25.240 --> 00:01:29.520 image. In this case, it's a product, a set of headphones 00:01:29.520 --> 00:01:33.370 that we want to explain. To explain items, 00:01:33.370 --> 00:01:36.880 let's say we have a battery charger here that's 00:01:36.880 --> 00:01:40.700 not immediately visible. I can add a hotspot by 00:01:40.700 --> 00:01:44.480 just clicking and I can of course move these hotspots. 00:01:44.967 --> 00:01:49.100 Let's move it here. Now I have a couple settings 00:01:49.100 --> 00:01:52.720 for this hotspot. The most important let's 00:01:52.720 --> 00:01:56.700 add an image that shows up if someone clicks on the hotspot. 00:01:56.700 --> 00:02:01.320 This is a battery. This 00:02:01.320 --> 00:02:05.220 will be the detailed image and I'm just 00:02:05.220 --> 00:02:08.930 going to add a description. This 00:02:08.930 --> 00:02:12.870 is my hover label and 00:02:13.457 --> 00:02:18.460 then once the pop-up comes 00:02:18.460 --> 00:02:29.040 up, I'm going to add it. 00:02:29.040 --> 00:02:32.910 This is all just to get started and let's 00:02:32.910 --> 00:02:37.360 quickly preview what happens. Here's 00:02:37.360 --> 00:02:41.290 the interactive graphic and I can click on this and then the 00:02:41.290 --> 00:02:44.970 info pop-up will come up and I can close it and go back to 00:02:44.970 --> 00:02:48.520 my graphic. Users can also zoom 00:02:48.520 --> 00:02:52.390 in, pan around or reset the zone. 00:02:53.067 --> 00:02:56.700 Now there's a bunch of other options you have 00:02:56.700 --> 00:03:00.660 for these hotspots and I've prepared a couple 00:03:00.660 --> 00:03:04.380 and I just want to show you more examples 00:03:04.380 --> 00:03:08.310 of what you can do. Let's just edit this riddle 00:03:08.310 --> 00:03:12.020 and preview what I've built. Here this 00:03:12.020 --> 00:03:15.740 is a hotel tour. There's a couple of rooms 00:03:15.740 --> 00:03:19.280 and the nice thing here is before we 00:03:19.280 --> 00:03:22.810 had a pop-up it explained it. Here what I did, you can click 00:03:22.810 --> 00:03:26.390 on the pop-up of the bar. It will zoom into the graphic so 00:03:26.390 --> 00:03:29.980 it will zoom into the bar and now I can look 00:03:29.980 --> 00:03:34.130 at other elements of that bar. 00:03:34.130 --> 00:03:37.960 You could continue the zoom in multiple levels. Of 00:03:37.960 --> 00:03:41.880 course if I change to the phone view this also works 00:03:42.297 --> 00:03:46.960 great on a phone. And you do this by saying 00:03:46.960 --> 00:03:50.560 a hotspot like the bar 00:03:51.237 --> 00:03:54.950 isn't going to open a pop-up window. It's going to drill down 00:03:54.950 --> 00:03:58.880 to an image and I just select the next image 00:03:58.880 --> 00:04:02.470 down here that I created which is the drill bound to 00:04:02.470 --> 00:04:06.240 the bar. So here's all the images. Here's my image too 00:04:06.787 --> 00:04:10.520 and that's the drill down to the bar. Now 00:04:11.097 --> 00:04:14.730 there's other options you can do. You 00:04:14.730 --> 00:04:18.560 can show the info pop-up, the default behavior. 00:04:18.560 --> 00:04:22.170 You can say no action. If people hover over something I just 00:04:22.170 --> 00:04:26.060 want to show the label. So if it's a short explanation 00:04:26.060 --> 00:04:29.600 you don't need to pop up you just show the label. You can also open 00:04:29.600 --> 00:04:33.330 an external URL. So I'll say you have a button 00:04:33.330 --> 00:04:37.120 on there that says shop now. On your graphic 00:04:37.120 --> 00:04:40.740 you can make that a hotspot. People click on it. They go 00:04:40.740 --> 00:04:44.400 to the shop now to your shopping page immediately. 00:04:44.400 --> 00:04:48.240 Or you can navigate the users to the next block in your riddle which for example 00:04:48.240 --> 00:04:51.810 could be a forum. They fill out to request 00:04:51.810 --> 00:04:55.470 information about your product or the drill 00:04:55.470 --> 00:04:59.860 down. And the drill down can literally go on forever. 00:04:59.860 --> 00:05:03.620 The other option you have each hotspot 00:05:03.620 --> 00:05:07.170 can be a dot. So this is the standard behavior. But 00:05:07.170 --> 00:05:10.780 you also can turn it into a circle. So let's say this 00:05:10.780 --> 00:05:14.460 table, you know we want to make the whole table a hotspot 00:05:14.460 --> 00:05:18.480 that then links to the library. I can just make 00:05:18.480 --> 00:05:22.170 it a circle or a rectangle. Just to 00:05:22.170 --> 00:05:26.360 show you so now this is a circle hotspot. 00:05:26.360 --> 00:05:30.050 Very useful when you explain products and maybe you want the 00:05:30.050 --> 00:05:34.000 users to drill down into a bigger area. You can use this 00:05:34.000 --> 00:05:37.760 to drill down or you have a map. And instead the map 00:05:37.760 --> 00:05:41.440 there's a cluster location. You can draw a circle 00:05:41.440 --> 00:05:45.210 or a rectangle that clusters all the hotspots in the 00:05:45.210 --> 00:05:48.990 tight area. And then you drill down and then people can 00:05:48.990 --> 00:05:52.660 select. There. Then the next 00:05:52.660 --> 00:05:56.310 option you have right now as you can see the 00:05:56.310 --> 00:06:00.260 hotspot doesn't show numbers. So it's just pulsating 00:06:00.260 --> 00:06:04.000 images. If you open the settings here you can 00:06:04.000 --> 00:06:07.960 allow the hotspot to show the numbers that you see when 00:06:07.960 --> 00:06:12.690 you create it. So now the hotspot has numbers. Okay. 00:06:12.690 --> 00:06:16.390 So if you have additional text here you could say click on number two 00:06:16.390 --> 00:06:19.930 to learn more about this feature of my product. And 00:06:19.930 --> 00:06:24.210 of course you can change the color of the hotspot images. 00:06:24.210 --> 00:06:27.980 So if I want them to be red for example you say red 00:06:27.980 --> 00:06:31.770 and then the color of the images the color of the 00:06:32.227 --> 00:06:35.810 squares will change. Okay. Let's reset to the original 00:06:35.810 --> 00:06:39.670 blue because I really like that. So these are the 00:06:39.670 --> 00:06:43.540 core features and let me show you one more 00:06:43.540 --> 00:06:47.280 example of our hotspots. So 00:06:47.280 --> 00:06:51.030 let's go into this. This is a really nice one 00:06:51.030 --> 00:06:54.930 showing you a map of a golf course. 00:06:54.930 --> 00:06:58.550 So just to show you how it can be used on 00:06:59.037 --> 00:07:02.580 maps. And now I can drill into the hole and 00:07:02.580 --> 00:07:06.160 then I can drill down further to the 00:07:06.160 --> 00:07:09.720 putting green to the t-shot or to 00:07:10.247 --> 00:07:14.000 the approach shot for that specific hole. And 00:07:14.000 --> 00:07:17.870 of course users can zoom in, zoom out, 00:07:17.870 --> 00:07:22.200 pan around to explore your golf course or whatever 00:07:22.200 --> 00:07:25.800 you want to put on the map. I hope you like 00:07:25.800 --> 00:07:29.530 our interactive graphic. Give it a try. It's 00:07:29.530 --> 00:07:33.190 really easy to use. It's an amazing tool if you want to explain 00:07:33.190 --> 00:07:36.910 something. Be it a map, be it a tool, be it a product. 00:07:36.910 --> 00:07:40.940 You can embed it like any riddle on your website. It can be embedded. 00:07:40.940 --> 00:07:44.800 I'm looking totally native on your website and just 00:07:44.800 --> 00:07:48.470 enhance your marketing quite a bit. And 00:07:48.470 --> 00:07:52.230 maybe the last thing I want to show you here 00:07:52.230 --> 00:07:55.920 on the headphones example. Let's 00:07:55.920 --> 00:07:59.600 say you have this image here with the 00:07:59.600 --> 00:08:03.360 charging cable for example. And you want 00:08:03.360 --> 00:08:07.120 people to immediately buy the cable. You 00:08:07.120 --> 00:08:11.440 can also add a by now button. 00:08:11.997 --> 00:08:15.650 And now if people 00:08:16.817 --> 00:08:21.570 click on that hotspot, 00:08:21.997 --> 00:08:25.680 you get the by now the cable 00:08:25.680 --> 00:08:29.830 button. And they can now click on that and be transferred to your 00:08:29.830 --> 00:08:33.440 website to buy that cable now. All right. I hope 00:08:33.440 --> 00:08:37.170 you enjoyed my little demo and try out the interactive 00:08:37.170 --> 00:08:40.480 graphic. Please thank you. Bye.