@essetwide/material-walkthrough

A material tour (eg Inbox from Google) for your site, enhancing the UX.

Usage no npm install needed!

<script type="module">
  import essetwideMaterialWalkthrough from 'https://cdn.skypack.dev/@essetwide/material-walkthrough';
</script>

README

Material Walkthrough

This is the STABLE branch, that uses jQuery as the core. Check the V2 (under development) branch for a Pure ES6 implementation.

A material tour (eg. Inbox from Google) for your site, enhancing the UX. See the demo here!

Features

  • Material Design - Have a Material look, based on the tour presented by Google Inbox.
  • Customizable - Change the content and colors easily.
  • Responsive - Resize the screen and continue enjoying your Walkthrough.
  • Simple - With a few lines of code you will got a Walkthrough.
  • Compatible - Google Chrome 52.0; Firefox 48.0.2; Microsoft Edge 38.14393.0.0.
  • Made with love - Few nights without studying to develop this plugin with much love.

Getting Started

Using through NPM

1. Installing

First, you just need to install the plugin from the NPM Registry.

npm install @essetwide/material-walkthrough --save

2. Importing

Import the script by your language. Remember that this version of Material Walkthrough depends to have jQuery installed.

ES6 import Syntax

If your module bundler supports import statements.

import $ from 'jquery'; // Importing jQuery first
import '@essetwide/material-walkthrough'; // Import the package globaly
import '@essetwide/material-walkthrough/dist/material-walkthrough.css'; // Import the style
CommonJS require Syntax

If your project use require pattern.

var $ = require('jquery'); // Importing jQuery first
require('@essetwide/material-walkthrough'); // Import the package globaly
require('@essetwide/material-walkthrough/dist/material-walkthrough.css'); // Import the style

Using by the ZIP

1. Download and extract the Source

You can download the ZIP from master here and extract it in your project.

2. Settup your Code

Load jQuery and include Material-Walkthrough plugin files.

<head>
        .
        .
        .
        <!-- Material Walkthrough styles -->
        <link rel="stylesheet" href="path/to/material-walkthrough/material-walkthrough.min.css">
</head>
<body>
        .
        .
        .
        <!-- JQuery 3.1 minified -->
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

        <!-- Material Walkthrough plugin -->
        <script src="path/to/material-walkthrough/material-walkthrough.min.js"></script>
</body>

Using the Plugin

1. Setup your HTML

You don't need any special markup. All you need is add something to identify your HTML element - an id or a class, by example.

<a id="step1">Try it Now!</a>

2. Call the plugin

Now call the Material Walkthrough initializer function and your walkthrough is ready.

$.walk([
  {
    target: '#step1', // Your target
    content: 'Here you can begin the walk!', // Hey, it supports HTML codes too!
    color: 'red', // Can be any CSS color, rgb or hex.
    acceptText: 'OK'
  }
]);

License

Copyright 2018 Esset Software LTD.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this files except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Thanks To