Product Tour Add-on

Create product tours for explaining your UI

View larger

Close

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());

Links

• Author Homepage
• Online Demo
• Issue Tracker
• Source Code
• Discussion Forum
• Shepherd

Compatibility