Step 1 – Select your tour #
Select a product tour
Step 2 – Edit the tour #
Now click on the Edit Tour Button in the top right corner.
Step 3 – Open in the editor #
Click on the open in the editor
Step 4 – Choose an element #
Select any element or modal you want to edit or change. You can also add new elements or modals here.
Step 4 – Customize the content of the selected element #
Adding a GIF or Image #
Go to your content panel while editing a tour with the extension open and click on the Gif/Image button. You’ll have two options, either use the search to pick a gif from the list provided by Giphy.com or upload your own. If you do upload your own, make sure you link to the actual image and not the page hosting the image.
Please note that if you take a random gif from giphy.com: https://giphy.com/gifs/tongue-goodnight-sJWNLTclcvVmw and add the link directly in the URL field under Images I won’t be able to load the gif.
Now if I go ahead and select only the image: https://media0.giphy.com/media/sJWNLTclcvVmw/giphy.gif the gif will show up without an issue. In most cases, you’ll be able to right-click on the gif and then click “View Image” button from the list (although the label might be different in some browsers). The link that opens up should be the one that works after it’s added in the URL field.
You can then drag the image in the editor to align it just right for the preview. Whatever you see in the preview, is what the user will end up seeing.
Adding a video #
To add a video, you can either use Youtube or you can link the video directly. If you go for youtube make sure you copy the ID of the video and not the entire URL. The id is what you see after “?v=”. Here’s an example: For this video https://www.youtube.com/watch?v=9NWAcK-wM80 the ID would be 9NWAcK-wM80. Look it up in the address bar and copy it from there directly.
Click on Finish to save the progress.