labs64 / guidechimp Goto Github PK

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 Introduction

Deliver the perfect product experience, improve digital product adoption, boost adoption of new features and simplify user onboarding with step by step interactive walkthroughs.

What can you do with GuideChimp?

User Experience: Implement engaging and personalised guides to walk users through your system.
User Onboarding: Successfully onboard your users from day one with an intuitive step by step walkthroughs.
Feature Adoption: Introduce and highlight new features with personalized guides.
In-product Messaging: Engage the right segment of your users at the right time and increase conversion.
Employee Training: Improve your employees' productivity by providing an efficient and interactive training system.

The world's smartest companies using our GuideChimp to boost their user experience.

Features

Seamless integration with any web app.
Start guided tour on any website with GuideChimp Chrome Extension and... ZERO! code.
GuideChimp is simple and robust enough to provide results with minimal effort! Set up it in just 3 minutes!
Let GuideChimp look like an integral part of your software product by configuring its look & feel
GuideChimp works well with tools you already use (e.g. WordPress, Confluence, etc.).
Beacons 🟠 Hotspots 🟠 Hints: Raise visitors attention by adding an additional description to any element on the web page.
Tours: Flows, Walkthroughs, Guides, Tutorials
Support of Single Page Applications build with Angular, Vue.js, React, etc.
Extendable using out-of-the-box and third-party plugins
Dynamic placeholders in the tour definition
Detailed installation and configuration documentation
Tooltip auto-positioning on an element
Easy styling through SCSS and clean CSS
Tour steps can be defined in two ways: HTML elements data attributes and JavaScript object properties
Library installation possible through HTML and es6 import
Use multiple listeners on tour events
Internationalization / i18n support
Ability to add steps on-the-fly / programmatically
Enable tour on the lazy-loaded or delayed elements (post-rendering, route changing, etc.) in single-page applications using "onBeforeChange" event or Lazy-loading plugin
Ability to define custom action buttons
Flexibility and modularity; GuideChimp is designed as a JS class, so you can easily inherit from it and change / add custom methods
Improved usability - pagination, navigation and progress bar
HTML code can be also used in the tooltip text
Support of extra-large tooltip description texts
Ability to set callback ("onBeforeChange", "onAfterChange") functions for each step in the tour
Lightweight (< 45KB) and good performance
Last But Not Least: ☝️ Dual-Licensed - EUPL-1.2 and Commercial (including great support, maintenance and customized implementation)

📖 Documentation

Visit GuideChimp Wiki for installation and configuration tips, customizations and plugins, as well as examples on how to use GuideChimp in the real-world scenarios.

How to Use

In order to use GuideChimp, you must include the compiled and minified JavaScript file in your project. There are multiple options for including these pre-compiled files, also known as a distribution, in your website or application.

1) Using from a CDN

jsDelivr - https://www.jsdelivr.com/package/npm/guidechimp

2) Install as Node.js/npm Module

GuideChimp is available on npmjs. Add the following to your package.json file and then run npm install:

"dependencies": {
    "guidechimp": "x.y.z"
}

or execute following command in your Node.js environment:

$ npm install guidechimp

3) Install as ES6 Module

If you are using ES6 modules, import the library and CSS file:

import GuideChimp from 'guidechimp';
import 'guidechimp/dist/guidechimp.min.css';

4) Manual Installation

We strongly recommend that you use either a CDN or a package manager like npm. This will make it easier for you to deploy your project in different environments, and easily update GuideChimp when new versions are released. Nonetheless, if you prefer to integrate GuideChimp into your project manually, you can download the release of your choice from GitHub and copy the files from the dist directory into your project.

Include the compiled files in your HTML page:

<script src="guidechimp/dist/guidechimp.min.js"></script>
<link rel="stylesheet" href="guidechimp/dist/guidechimp.min.css">

Demo

See GuideChimp in action in the product walkthrough, showcases and real-world examples below:

GuideChimp Tour Examples at CodePen
NetLicensing Changelog - Tour: Notable NetLicensing Features
NetLicensing Licensing Models - Sample Tour: Licensing Models
NetLicensing Features - Sample Tour: NetLicensing Features
NetLicensing Onboarding - NetLicensing UI: User Onboarding Tour
React Example (source) at CodeSandbox by @giubatt

How to Contribute

Everyone is welcome to contribute to this project! Feel free to contribute with pull requests, bug reports or enhancement suggestions.

GuideChimp is maintained by Labs64. Contact us for web app consulting, development, and training for your project or book a demo.

Bugs and Feedback

For bugs, questions and discussions please use the GitHub Issues.

License

GuideChimp is made available under the European Union Public License, version 1.2 or Commercial License. The Commercial License requires the payment of a fee for each designated commercial application.

If you choose not to pay a fee and use the European Union Public License, version 1.2, you are required to release the source code of any program that you distribute that uses GuideChimp.
If you choose to pay for a Commercial License, you are not required to disclose your source code.

Commercial GuideChimp plugins require a valid customer account with the assigned plan and additional configuration, which will be used to validate the availability of particular GuideChimp functions or plugins for the given customer account.

Privacy Policy

The applicable data protection provisions may be retrieved under Privacy Policy.

guidechimp's People

Contributors

Stargazers

Watchers

guidechimp's Issues

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.

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
    }

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:

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.

JavaScript events plugin doesn't work (v3.x)

Describe the bug
https://codepen.io/netlicensing/pen/BazaXYo

Fix single card example

https://codepen.io/netlicensing/full/vYOLGbW

Place card in the screen center

Add plugin boilerplate

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.

Implement WordPress plugin for Guided Tours

Is your feature request related to a problem? Please describe.
Implement WordPress plugin which simplifies creation Guided Tours for wordpress websites.

Additional context
similar to https://wordpress.org/plugins/pluginpass-pro-plugintheme-licensing/

Add media content (image, video)

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

Desktop (please complete the following information):

OS: Ubuntu 20
Browser Chrome
Version 85

Triggers plugin doesn't work (v3.x)

Describe the bug
https://codepen.io/netlicensing/pen/PoPawdv

Bring me a Feature!

Hacktoberfest feature challenge!
Suggest and Pull Request a new feature, which is adding great value for the GuideChimp users.

@ALL contributors
In the case of unique->tested->accepted feature we'll be happy to include your GitHub handle in the list of contributors on the main library page (README.md) - https://github.com/Labs64/GuideChimp#how-to-contribute

Move plugins folder to the project root folder

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.

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).

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> </...>

Do not commit dist folder

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 :)

Allow blurred background

Lazy-loading plugin

Move plugins folder from srс folder to root

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

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'});

Create browser extension to allow guided tours on any 3pp website

Create a browser extension to allow guided tours on any 3pp website.

the extension (Chrome, Firefox) fetches prepared guided tours definition from the public GitHub repo - https://github.com/Labs64/GuideChimp/tree/master/docs/tours
if the website the visitor is currently on has a guided tour defined - indicate this on the extension icon using colours or popup
otherwise, the icon will be greyed

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

Placeholders plugin doesn't work with v3.x

Describe the bug
CodePen example: https://codepen.io/netlicensing/pen/GRqPxrL

Used customer number: [email protected]
Plan: Commercial

HTML configuration example doesn't work (v3.x)

Describe the bug
https://codepen.io/netlicensing/pen/RwPwRNw

Allow adding custom branding (logo)

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:

Implement a few tours throw application using the MultiPage plugin.

Expected behavior
The current tour must be continued.

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>"
        }
    ]
}

React.js showcase

Showcase GuideChimp usage in the React applications.

Use React dashboard template here https://codesandbox.io/search?query=dashboad&refinementList[template][0]=create-react-app
Fork selected sandbox
Add GuideChimp

Fix Tour on NLIC Wiki

https://netlicensing.io/wiki/changelog

Source code:

Support application events (e.g. Vue.js routes)

Move current NetLicensing UI customization for Vue.js as a GuideChimp plugin.

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

Pricing table mobile rendering

Describe the bug

To Reproduce
Steps to reproduce the behavior:

From the mobile
Open https://www.labs64.com/guidechimp/
Scroll the bottom of the page

Expected behavior
Rendering similar to https://netlicensing.io/pricing/

Enable cdnjs

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

Additional context
https://github.com/cdnjs/cdnjs/blob/master/CONTRIBUTING.md#a-issue

Improve step bullts visuals

In the case of many (e.g. more than 15-20) tour steps, the layout is broken and need to be improved.

See example here: https://netlicensing.io/?guidechimp=on&tour=advent-calendar-2020

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

Show finish check button on the last step

Python showcase

Showcase GuideChimp usage in the Python applications.

Add plugins description

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:

have a <button type="button"><img src...></button>
have a guidechimp trigger set to

triggers:{
            next:{
                element: ...[theButton]...
                event: 'click',
                listener(e){
                  
                    this.next(); 

                }
            },

Click on the image inside the button
See no nextstep

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

Browser: Chrome
Version 1.7.7

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

3pp rating libraries: https://ourcodeworld.com/articles/read/498/top-7-best-jquery-javascript-star-rating-plugins

<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.

IE11 bugs

Describe the bug
There are a few IE11 visualization issues.

Modal window is not centered.
Arrows are invisible.

Desktop (please complete the following information):

Browser IE11

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:

Define 2 steps in the tour
Set start step as 0 or 1 => works

guideChimpAdventCalendar.start(1);

Set start step as 2 => dosn't work

guideChimpAdventCalendar.start(2);

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

labs64 / guidechimp Goto Github PK

guidechimp's Introduction

What can you do with GuideChimp?

Features

📖 Documentation

How to Use

1) Using from a CDN

2) Install as Node.js/npm Module

3) Install as ES6 Module

4) Manual Installation

Demo

How to Contribute

Bugs and Feedback

License

Privacy Policy

guidechimp's People

Contributors

Stargazers

Watchers

Forkers

guidechimp's Issues

Recommend Projects

Recommend Topics

Recommend Org