Get Started

Below you can find simple examples and the basic steps to get started. There are more examples and demos that you can find in the documentation under the demo section.

Guiding

Here is a simple example of how to create a tour with multiple steps.

const myAidEye = aideye({
  showProgress: true,
  steps: [
    {
      element: '#id',
      popover: {
        title: 'Select through element ID',
        description: 'By using id='id''
      }
    },
    {
      element: '.class',
      popover: {
        title: 'Or through class',
        description: 'By using class='class''
      }
    },
    {
      element: '#guiding',
      popover: {
        title: 'Keyboard supported',
        description: 'You can use your keyboard's arrow keys to control the guide.'
    },
    {
      popover: {
        title: 'Without an element',
        description: 'You can pop-up without selecting an element as well.'
      }
    }
  ]
});

myAidEye.start();

Highlighting

Here is a simple example of how to highlight an element.

const myAidEye = aideye();
myAidEye.highlight({
  element: '#highlight',
  popover: {
    title: 'Highlight element',
    description: 'There are no additional steps involved in highlighting, unlike in guiding.'
  }
});

myAidEye.start();