Visual Editor

Visual Editor

The Page Pilot Visual Editor is an in-app message editor screen used to create and design tooltips for different modules such asTours, Tooltips, and Demos.

It allows users to design a tooltip either byselecting a templateorcreating one from scratch. Users can alsosave the created tooltip for later use.

Tasks Performed in the Visual Editor

Using the Visual Editor, users can perform the following tasks:

• Create tooltips using a pre-designed template or a custom design by modifying text and layout.
• Manage created tooltips bysaving them in one place.
• Change thename of the created moduleby clicking theSettingsbutton on the same screen.
• Use the Preview option to check how the tooltip will appear.
• Use the Publish option to make the tooltip live.

Navigate to the Visual Editor Screen

1. Go to any module such asTours, Tooltips, or Demos.
2. Click the Create button.
3. The Visual Editor screen will open, where users can design and manage tooltips.

Screen Layout

Here following screen shows the tour tooltip editor can be defined by dividing it into three areas as, header, Tooltip build and visual editor area which are described in detail as below.

Screen-Tooltip Editor

a. Header (Top Bar) – The top section of the tour screen displays key information from left to right:

Screen- Header of Tour

• Back button– Positioned at the extreme left of the screen. User can return to the main Tours dashboard clicking on it.
• Name of the Tour– Displays the name of the tour next back button.
• Status of created tooltip-This button shows whether the tooltip is saved asDraftor published asLive, along with a color indicator to help users quickly identify its status.
• Save change -User must click on this button to save the tooltip after completing the design.
• Device– Provides an option to select the device type (currently, Web is selected) to preview how the tooltip appears on different devices.
• Setting(Gear icon)- User can edit the tour name and allows user to change the status of tooltip ,delete, publish it
• Preview– Allows users to test and view how the tooltip will appear during an actual walkthrough.
• Publish– Saves and activates the tooltip or tour for live use within the application.
• Dropdown Menu– This menu provides options tosave the tour as a templateorsave it as a draftfor future reference

2.      Tooltip Build Area (Centre)

This area allows the user to define the outlineof the tooltip or tour before designing it.

This is thestarting pointwhere a user can create or add a new tooltip. After hovering the cursor  “+” buttonin the centre of the screen is visible. Clicking the“+” buttondisplays a list ofdesign elementson card that can be used to build the tooltip.

This card contains various design elements to create a basic template (skeleton) of the tooltip in the main area. Later, User can then edit and customize its content using the Tooltip Editor on the left side.

Tooltip Design Element

The Tooltip build area which contains the following elements that can be added within the tooltip.

• Heading– Used to add a prominent title or headline text in the tooltip.
• Text– Allows adding descriptive or instructional text to provide context.
• Button– Adds a clickable button that can be linked to actions (e.g., next step, open link, submit).
• Image– Used to insert an image for visual explanation or branding.
•  Video– Allows embedding of video content inside the tooltip for demonstrations or tutorials.
• Avatar– Adds a small profile-style image/icon (useful for showing a guide, character, or brand mascot).
• Divider– Inserts a horizontal line to visually separate different sections within the tooltip.
• Spacer– Provides empty space to adjust the layout and positioning of elements.
• HTML– Allows custom HTML code to be embedded for advanced customization.
• Columns– Splits the tooltip area into multiple columns to arrange content side by side.
• Container– A block used to group multiple elements together for structured layout and easy management.Once user select the any of the available blocks, users can visually design and arrange their   tooltip content. This design can be edited later by navigating tooltip editor area.At footer of main screen, following button buttons are displayed.

• Step 1– Displays the first step of the tour for creating the first tooltip in the flow.
• Delete– User can delete the step of the flow.
• Copy– Allows the user to duplicate the current step of walkthrough for the next step.
• Add Flow– Enables the user to add new step into walkthrough flow.

3.      Visual Editor Area (Left Panel)

 Screen- Tooltip Editor Elements

Configuration Tabs

Four configuration tabs are displayed for editing and customizing tooltips:

a. Style Tab-This tab provides appearance-related options to design the tooltip. User can edit the following fields include:

Appearance

Background colour-User can change the box colour of tour content box.

Radius- Content box edges cab be changed with this tool.

Border-Border of the colour can be changed with this tab.

Layout

Width-Width of the content box can be changed.

Height-Height of the content box can be changed.

Padding-Size of box (height) can be changed with this.

b.   Layout –This tab contains three more tabs

Block-User candrag and drop blocks to build tour layout. Choose from various components like headers, text blocks,

images,buttons, and more.

Screen-Block/ Layout Tab

· Template-All creates tour template which are saved globally can beviewed under this section.

Screen- Template/Layout Tab

Saved-All creates tour template which are saved privately can beviewed under this section

Screen- Saved /Layout Tab

c.       Inspect Tab-This taballows the user to inspect the selected block (tooltip step displayed on the Tooltip build Area). Users can edit or modify text, buttons, and other content directly.

Screen-Inspect Tab

d.       Behaviour Tab-It controls the functional properties of the tooltip of tour such as positioning or interaction behaviour, trigger behaviour, tooltip delay,dismiss setting, target element.

Screen- Behaviour Tab

Setting Tab-This tab allows user to change the tour details. This section contains various tabs as mentioned below.

• Tour Settings ScreenThis screen allows users to view and edit basic tour details such asName, Page Source, and Element ID, which are displayed on the right side.
•  Manage template-All privately save templates can be managed in this section.
• Delete-Allows user to delete the tour permanently.

Screen- Setting Tabs/ Tour Visual Editor