Directory

← Back

Product Tour Add-on

Create product tours for explaining your UI

Author

Rating

Popularity

<100

Product Tour provides the possibility to create a product tour for your web application and introduce the user to your user interface.

You can attach the single steps of the tour to every component of your UI.

Features:

  • Attach to components: The steps of a tour can be attached to any AbstractCompomponent

  • Theming: The look and feel of the steps will be adapted to your theme automatically by using the valo theme engine. Additionally the buttons used for steps can be styled using the valo button styles

  • Options: You can set various options for the single step like e.g. modality, text, title, anchor position, what buttons are shown

  • Events: The steps and tour fire different events for you to be able to react if needed (e.g. showing of a step, completion of a tour, etc.)

Credits:

The addon is based on Shepherd.

Tags: Product Tour, Step, Help, Overlay

Sample code

    Tour tour = new Tour();

    Button button = new Button("Click to start tour", e -> tour.start());
    layout.addComponent(button);

    tour.addStep(new StepBuilder()
                     .withAttachTo(button)
                     .withTitle("Step 1: title")
                     .withText("Step text")
                     .addButton(new StepButton("Back", TourActions::back))
                     .addButton(new StepButton("Next", ValoTheme.BUTTON_PRIMARY, TourActions::next))
                     .build());

    tour.addStep(new StepBuilder()
                     .withAttachTo(button)
                     .withTitle("Step 2: title")
                     .withText("Step text")
                     .addButton(new StepButton("Back", TourActions::back))
                     .addButton(new StepButton("Finish", ValoTheme.BUTTON_PRIMARY, TourActions::next))
                     .build());

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Fix for modality curtain not working

Released
2017-03-31
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.7+ in 0.2.2
Browser
Firefox
Google Chrome
Internet Explorer

Product Tour Add-on - Vaadin Add-on Directory

Create product tours for explaining your UI Product Tour Add-on - Vaadin Add-on Directory
Product Tour provides the possibility to create a product tour for your web application and introduce the user to your user interface. You can attach the single steps of the tour to every component of your UI. # Features: - **Attach to components:** The steps of a tour can be attached to any AbstractCompomponent - **Theming:** The look and feel of the steps will be adapted to your theme automatically by using the valo theme engine. Additionally the buttons used for steps can be styled using the valo button styles - **Options:** You can set various options for the single step like e.g. modality, text, title, anchor position, what buttons are shown - **Events:** The steps and tour fire different events for you to be able to react if needed (e.g. showing of a step, completion of a tour, etc.) # Credits: The addon is based on **[Shepherd](http://github.hubspot.com/shepherd/docs/welcome/)**. *__Tags:__ Product Tour, Step, Help, Overlay*
Online