AidEye

AidEyeKit is written in Typescript and built to be highly configurable. You can configure aideye globally, per step, and even on the fly while it's running. All configuration options are optional.

Here's a tip!

If you're using an integrated development environment (IDE) like VSCode, you'll get autocomplete and documentation for all the configuration options.

AidEye Configuration

You can configure aideye globally by passing the configuration object to the aideye call or by using the setConfig method. Here's a table of all the configuration options.

// Function call
const myAidEye = aideye({ /* ... */ });

// Object method
myAidEye.setConfig({ /* ... */ });

Attribute	Type	Description	Default
steps	`AidEyeStep[]`	Array of steps to highlight.	-
animate	`boolean`	Product tour animation.	`true`
overlayColor	`string`	Color of the overlay.	`black`
smoothScroll	`boolean`	Highlighted element smooth scrolling.	`false`
allowClose	`boolean`	Clicking on the backdrop will close the popover.	`true`
overlayOpacity	`number`	Opacity of the backdrop.	`0.5`
stagePadding	`number`	Distance between the highlighted element and the cutout.	`10`
stageRadius	`number`	Radius of the cutout around the highlighted element.	`5`
allowKeyboardControl	`boolean`	Using keyboard to navigation.	`true`
disableActiveInteraction	`boolean`	Disable interaction with the highlighted element.	`false`
popoverClass	`string`	If you want to add custom class to the popover.	-
popoverOffset	`number`	Distance between the popover and the highlighted element.	`10`
showButtons	`AllowedButtons[]`	Array of buttons to show in the popover.	`["next", "previous", "close"]`
disableButtons	`AllowedButtons[]`	Array of buttons to disable.	-
showProgress	`boolean`	Show the progress text in popover.	`false`
progressText	`string`	Template for the progress text. Use `{{current}}` and `{{total}}` as placeholders. Eg: '`{{current}}` of `{{total}}`'	-
nextBtnText	`string`	Text to show in the 'next' button.	-
prevBtnText	`string`	Text to show in the 'previous' button.	-
doneBtnText	`string`	Text to show in the 'done' button, on the last step of a tour.	-

AidEye Render Hook

Called after the popover is rendered.

This hook has the following parameters:

popover - An object with references to the popover DOM elements such as buttons, title, descriptions, body, container, etc.
options.config - The current configuration options.
options.state - The current state of aidEye.

onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => void;

AidEye Highlight Hook

Hooks to run before and after highlighting each step.

Each hook receives the following parameters:

element - The target DOM element of the step.
step - The step object configured for the step.
options.config - The current configuration options.
options.state - The current state of aidEye.

onHighlightStarted: (element?: Element, step: AidEyeStep, options: { config: Config; state: State }) => void
onHighlighted: (element?: Element, step: AidEyeStep, options: { config: Config; state: State }) => void
onDeselected: (element?: Element, step: AidEyeStep, options: { config: Config; state: State }) => void

AidEye Destroy Hook

Hooks to run before and after aidEye is destroyed.

Each hook receives the following parameters:

element - Currently active element.
step - The step object configured for the currently active.
options.config - The current configuration options.
options.state - The current state of aidEye.

onDestroyStarted: (element?: Element, step: AidEyeStep, options: { config: Config; state: State }) => void
onDestroyed: (element?: Element, step: AidEyeStep, options: { config: Config; state: State }) => void

AidEye Button Hook

Hooks to run on button clicks.

Each hook receives the following parameters:

element - The current DOM element of the step.
step - The step object configured for the step.
options.config - The current configuration options.
options.state - The current state of aidEye.

onNextClick: (element?: Element, step: AidEyeStep, options: { config: Config; state: State }) => void
onPrevClick: (element?: Element, step: AidEyeStep, options: { config: Config; state: State }) => void
onCloseClick: (element?: Element, step: AidEyeStep, options: { config: Config; state: State }) => void

Important Note

By overriding onNextClick and onPrevClick hooks, you control the navigation of aidEye.

This means that the user won't be able to navigate using the buttons and you will have to either call myAidEye.moveNext() or myAidEye.movePrevious() to navigate to the next/previous step.

onNextClick and onPrevClick hooks can be configured at the step level as well. When configured at aidEye level, you control the navigation for all the steps. When configured at the step level, you control the navigation for that particular step only.

Ideas you can implement

You can use this to implement custom logic for navigating between steps.

This is also useful when you are dealing with dynamic content and want to highlight the next or previous element based on some logic.