ember-site-tour

An Ember add-on to add site tours based on hopscotch.js to your app.

Usage no npm install needed!

<script type="module">
  import emberSiteTour from 'https://cdn.skypack.dev/ember-site-tour';
</script>

README

ember-site-tour

Build Status Ember Observer Score

An ember add-on to implement site tours based on hopscotch.js.

Documentation: http://mydea.github.io/ember-site-tour/

Installation

ember install ember-site-tour

Basic Usage

// app/index/route.js

import Ember from 'ember';
import RouteTourMixin from 'ember-site-tour/mixins/route-tour';

export default Ember.Route.extend(RouteTourMixin, {});
{{! app/index/template.hbs }}

{{#tour-start-button}}
  <button>Start Tour</button>
{{/tour-start-button}}
// app/index/tour.js

export default [
  {
    target: '.first',
    title: 'First Step',
    content: `Lorem Ipsum...`
  },
  {
    target: '.second',
    title: 'Second Step',
    content: `Lorem Ipsum...`
  },
  {
    target: '.third',
    placement: 'bottom',
    title: 'Third Step',
    content: `Lorem Ipsum...`
  }
];

For more detailed instructions and examples, please visit the documentation.