GithubHelp home page GithubHelp logo

labs64 / guidechimp Goto Github PK

View Code? Open in Web Editor NEW
201.0 12.0 20.0 10.19 MB

Create interactive guided product tours in minutes with the most non-technical friendly, lightweight and extendable library.

Home Page: https://www.labs64.com/guidechimp/

License: European Union Public License 1.2

JavaScript 90.54% Shell 0.43% SCSS 9.04%
guide guided-tour user-flow product-tour tour-guide tour-guide-app tour tours user-experience onboarding

guidechimp's People

Contributors

agrivo avatar dependabot-preview[bot] avatar dependabot[bot] avatar gitter-badger avatar giubatt avatar ihtims avatar kkorotkov avatar r-brown avatar v-rudkovskiy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

guidechimp's Issues

Element Highlighted yet unable to interact with the element

Describe the bug
We testing a Guidechimp in a custom site. With the site we able to have element highlighted as per tour steps yet unable to interact with the element.
I checked we didn't disabled interaction layer from the tour options. May I know the checks I am missing. I tested with other sites and Guidechimp flow working perfect. The issue is with my custom site

Expected behavior
Able to interact with the element in DOM

Screenshots

issue

Desktop (please complete the following information):

  • OS: Ubuntu 20
  • Browser Chrome
  • Version 85

Lazy-loading plugin if no element defined at all

Is your feature request related to a problem? Please describe.
Lazy-loading plugin should not be effective for one particular step, if no element defined.

Describe the solution you'd like

In the below example (with enabled Lazy-loading plugin), the first step should wait for an element, and the second not and appear immediately, as there is no element configuration defined.

{
    "/dashboard/": [
        {
            "element": ".create-survey",
            "title": "Create Survey",
            "description": "Get survey responses from around the world in minutes.<br>Easily find your ideal respondents for market research with SurveyMonkey Audience.",
            "position": "bottom"
        },
        {
            "title": "Improve GuideChimp Public Tours",
            "description": "Support community and help to improve <i>GuideChimp Public Tours</i>!<br>Know how to make this guided tour better or want to enable your tour?<br><br>Contribute to the <a href='https://github.com/Labs64/GuideChimp-tours' target='_blank'>GuideChimp Public Tours repository</a>"
        }
    ]
}

Support responsive design

Is your feature request related to a problem? Please describe.
Tour steps should support responsive design and work on mobile devices as well.

GuideChimp doesn't start if step index is greater than steps number

Describe the bug
GuideChimp doesn't start if step index is greater than steps number.

To Reproduce
Steps to reproduce the behavior:

  1. Define 2 steps in the tour
  2. Set start step as 0 or 1 => works
guideChimpAdventCalendar.start(1);
  1. Set start step as 2 => dosn't work
guideChimpAdventCalendar.start(2);

Expected behavior
At least last step should be opened (e.g. - 1)

Button with img not responding in Guidechimp

Button that contains an image doesn't register onclick in Guidechimp
I am currently trying to setup Guidechimp and wanted to set a trigger to click on a Button, similar to the examples on codepen. The main difference is, that the button encapsules an image and when I click the image it doesn't register the click.
When I click on the fine border between image and buttonborder it registers, but that isn't explainable to the end users.

To Reproduce
Steps to reproduce the behavior:

  1. have a <button type="button"><img src...></button>
  2. have a guidechimp trigger set to
triggers:{
            next:{
                element: ...[theButton]...
                event: 'click',
                listener(e){
                  
                    this.next(); 

                }
            },
  1. Click on the image inside the button
  2. See no nextstep

Expected behavior
the image should register just as the button itself does

  • Browser: Chrome
  • Version 1.7.7

Expandable menu wrong highlighting

Describe the bug
In the case of the (left nav) expandable menu, the highlighting is correct if the main menu item collapsed.
In case the menu is expanded, the highlighted area positioned wrongly.

To Reproduce
Use any collapsible menu structure to reproduce.

Expected behavior
Element highlighting placed correctly.

Highlighting of the target element fails

Describe the bug
In case an element to be highlighted is inside container having own z-index + transform styles, highlighting fails (target stays under the highlighting box).

To Reproduce
HTML:

<script src="https://cdn.jsdelivr.net/npm/guidechimp/dist/guidechimp.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/guidechimp/dist/guidechimp.min.css">
<div id="myel1">myel1</div>
<div style="z-index:100;transform:translateX(10px)">  
  <div id="myel2">myel2</div>
</div>
<div>
  <button id="startTour" class="start-tour">Start Tour</button>
</div>

JS:

var tour = [
    {
        element: '#myel1',
        title: 'Regular element',
        description: 'Highliting works as expected'
    },
    {
        element: '#myel2',
        title: 'Element having own z-index + transform',
        description: 'Target is not properly highlited'
    }
];
var guideChimp = new GuideChimp(tour);
document.getElementById('startTour').onclick = function () {
    guideChimp.start();
};

Expected behavior
Element at step 2 must be visible

Visibility of a highlighted element

Visibility of a highlighted element when the element (e.e. button) is without background colour with light coloured text is quite bad.
The content of the highlighted area is not readable enough then.

Enable feedback/rating

Is your feature request related to a problem? Please describe.
Feedback/Rating can be used on the last tour step to collect user feedback.

Describe the solution you'd like
GuideChimp user (dev) should be able:

  • enable feedback plugin
  • choose the style (stars, hearts, bullets)
  • choose dimension; e.g. 5 or 10 stars
  • define callback to be used - onRate event

Describe alternatives you've considered
N/A

Additional context

Plugin dependencies system

Example:
src/index.js

const guideChimp = (...args) => new GuideChimp(...args);

guideChimp.prototype = GuideChimp.prototype;

guideChimp.plugins = new Set();

guideChimp.extend = (plugin, ...args) => {
    if (!guideChimp.plugins.has(plugin)) {
        guideChimp.plugins.add(plugin);
        plugin(GuideChimp, guideChimp, ...args);
    }
    return guideChimp;
};

module.exports = guideChimp;

somePlugins.js

module.exports = (cls, factory) => {
    if (!factory.plugins.has('triggers')) {
        // some code or error message
    }

IE11 bugs

Describe the bug
There are a few IE11 visualization issues.

  1. Modal window is not centered.
  2. Arrows are invisible.

2020-10-12_12-04-54

Desktop (please complete the following information):

  • Browser IE11

Plugin: Google Analytics events

Is your feature request related to a problem? Please describe.
As a website owner, I need insides about user onboarding progress and tour bounces.

Describe the solution you'd like
GA Events can be used to track tour(-s) progress by sending GA event call on each tour step.
This event should contain step context information.

Describe alternatives you've considered
Can be implemented as a generic solution (ability to work with different analytics tools) or GA specific.

Additional context
Google Analytics Events - https://support.google.com/analytics/answer/1033068

IFrames support

Is your feature request related to a problem? Please describe.
Add IFrames support in the GuideChimp

Describe the solution you'd like
Introduce a new plugin which will allow specify and highlight elements in the IFrame.
Pay attention to the tool-tip position if the element in the iframe will be highlighted.

Enable dependabot

Is your feature request related to a problem? Please describe.
Enable dependabot

Describe the solution you'd like
Update project dependencies

Describe alternatives you've considered
N/A

Additional context
https://dependabot.com

Support multiple elements with the same class

In case multiple elements exist on a page with the same style class, and in JS tour definition a step uses class selector - consider all elements, and choose the first one from visible elements (case with hidden elements, e.g. tabs, where normally only one of many with the same class is visible in every moment).

Allow individual tours location for the chrome extension

First of all the idea of making the chrome extension is brilliant!
However it would be better if you could host the tours on your own and don't be dependent on third party...
I have tried to unpack the extension and "hack" it to look for "tours" definitions in a different URL then the hardcoded one...
it worked but it would be better if you could add the source code for the extension :)

Add "Made with GuideChimp"

Is your feature request related to a problem? Please describe.
Add "Made with Guide Chimp" at the bottom of every steap panel (incl. link to the project)

Additional context
Sample:
image

Expanded nav menue isn't highlighted properly

Describe the bug
Expanded nav menue isn't highlighted properly.

To Reproduce
Nav menu HTML structure:

<body> <table> <tbody> <tr> <td> <div> <table> <tbody>  <tr> <td> <div> <span> Menuitem </span> </...>

Nested DIV i IMG elements cannot be found in the TABLE

Describe the bug
Nested DIV i IMG elements cannot be found in the TABLE
Test page: https://io.labs64.com/guidechimp-iframe-plugin/

To Reproduce
Define HTML table as follows:

<table id="table-element" border="1">
  <tr>
    <th>Library</th>
    <th>Plugin</th>
    <th>Example</th>
  </tr>
  <tr>
    <td>GuideChimp<img id="#table-image1" src="https://netlicensing.io/img/labs64-avatar-30x30.png"></td>
    <td>IFrames</td>
    <td>IFrame 2 (TABLE)</td>
  </tr>
  <tr>
    <td>GuideChimp<div><img id="#table-image2" src="https://netlicensing.io/img/labs64-avatar-30x30.png"></div></td>
    <td>IFrames</td>
    <td>IFrame 2 (TABLE)</td>
  </tr>
</table>

and corresponding tour definition:

var tourTABLE = [
  {
    element: '#startTourTABLE',
    title: 'IFrame 0: button',
  },
  {
    element: '#div-element',
    iFrames: ['#iframe1', '#iframe2-div'],
    title: 'IFrame 2 (DIV): element',
  },
  {
    element: '#table-element',
    iFrames: ['#iframe1', '#iframe2-table'],
    title: 'IFrame 2 (TABLE): element',
  },
  {
    element: '#table-image1',
    iFrames: ['#iframe1', '#iframe2-table'],
    title: 'IFrame 2 (TABLE): image element',
  },
  {
    element: '#table-image2',
    iFrames: ['#iframe1', '#iframe2-table'],
    title: 'IFrame 2 (TABLE): image in DIV element',
  }
];

Two last elements cannot be found.

MultiPage issue with several guide tours.

Describe the bug
In case if we have several guide tours throw application and these tours have intersecting pages we have the issue.

Becouse
const storageKey = 'GUIDECHIMP_MULTIPAGE_STEP';
don't have unique key for each tour.

To Reproduce
Steps to reproduce the behavior:

  1. Implement a few tours throw application using the MultiPage plugin.

Expected behavior
The current tour must be continued.

Multiple elements for one step

Is your feature request related to a problem? Please describe.
Enable multiple elements highlighting for the same one tour step.

Describe the solution you'd like
Highlight different page elements for one particular tour step.

Describe alternatives you've considered
N/A

Additional context
N/A

Placeholders in JS tour definition

In a single-page web application, DOM most likely contains elements with dynamically generated Id (or other properties that are to be used for element selection). In such dynamic environment, static tours definition is not possible. Possible solution is to embed tours within application, so the tours are generated together with the rest of DOM, but this often may not be desirable due to number of concerns.

Alternative, is to allow certain dynamic parts in static JS tour definition in a form of expandable variables, that are expanded at the tour start.

Example:

var tour = [
    {
        element: '#element-${dynamic_id}',
        title: 'Step 1',
        description: 'Click ${dynamic_text} to modify its properties.'
    }
];
var guideChimp = new GuideChimp(tour);
guideChimp.start({dynamic_id: '7fa1', dynamic_text: 'MyEditableItem'});

test 01

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.