• Scroll to top
    • Follow Us
    • —
    • Lk.
    • Tw.
Skip to content
Eyelet Eyelet
Eyelet
Eyelet Eyelet
  • Home
  • Product Features
    • User Onboarding
    • Product Tours
    • Customer Support
    • Interactive Guides
    • Resource Centers and Checklists
    • NPS
  • Pricing
  • Contact
  • Get a Demo
  • Free Trial
©2022 Eyelet. All rights reserved
Terms and conditions | Privacy policy
  • Follow Us
  • —
  • Lk.
  • Tw.
  • Login

Getting Started

  • How to install the eyelet extension?
  • How to Manage your team inside Eyelet?
  • How to set up the checklist in eyelet?
  • How to update your account information in Eyelet?

Eyelet Widget

  • How to map a Modal?
  • How to change the module position?
  • How to add images, GIFs and Videos to your module?
  • How to automatically scroll to a module if it’s mapped below the fold?
  • How to personalize your tour?
  • How to make your tour show just for new users?
  • How to display a flow (guide) when an element is clicked or hovered?
  • How to highlight a Modal (element)?

Bots

  • How to set up Bot in Eyelet?
  • How to add new actions in Bot?
  • How to customize a card in Bot?
  • How to preview or Test your Bot?
  • How to request a text answer using Bot?
  • How to add a form using Bot?
  • How to save and publish a Bot?
  • How to add Variables in Bot?

Product tour

  • How to create a product tour with Eyelet.
  • How to edit your Product tour in Eyelet?
  • How to test or preview the product tour in eyelet?
  • How to embed a Product tour in the BOT or Checklist?

How to add images, GIFs and Videos to your module?

Table of Contents
  • Step 1 - Select your tour
  • Step 2 - Edit the tour
  • Step 3 - Open in the editor
  • Step 4 - Choose an element
  • Step 4 - Customize the content of the selected element
  • Adding a GIF or Image
  • Adding a video

Step 1 – Select your tour #

Select a product tour

product tour dashboard

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

open the tour 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.

Change position

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.

Add an image/GIF or video

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.

What are your Feelings
Updated on January 20, 2023
How to change the module position?How to automatically scroll to a module if it’s mapped below the fold?
Table of Contents
  • Step 1 - Select your tour
  • Step 2 - Edit the tour
  • Step 3 - Open in the editor
  • Step 4 - Choose an element
  • Step 4 - Customize the content of the selected element
  • Adding a GIF or Image
  • Adding a video
  • Eyelet Eyelet
  • Li. /   Tw.    

  • Eyelet for

    User Onboarding
    Product Tours
    Product Adoption
    Employee Onboarding

  • General Links

    Blog
    About Us
    Documentation
    Glossary
    Contact us

  • Sign up for the newsletter


    ©2022 Eyelet. All rights reserved
    Terms and conditions | Privacy policy
    We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
    Cookie SettingsAccept All
    Manage consent

    Privacy Overview

    This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
    Necessary
    Always Enabled
    Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
    CookieDurationDescription
    cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
    cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
    cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
    cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
    cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
    viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
    Functional
    Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
    Performance
    Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
    Analytics
    Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
    Advertisement
    Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
    Others
    Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
    SAVE & ACCEPT