Hints

Craft and customize engaging hints with Jimo's Builder, featuring easy navigation, live previews, and a full suite of editing tools.

What Are Hints?

Hints are targeted tips, anchored to specific UI elements the same way as tooltips or badges. Unlike Tours or Surveys, they’re non-sequential and all displayed simultaneously, acting like a persistent layer of guidance.

This approach is perfect for inline help, feature discovery, or DIY onboarding, where users can hover or click to see more info at their own pace.

---

Overview

📺 Tutorial: First Hints

First Hints

• Always-On Guidance: All hints appear together, so users can explore them as needed without moving step by step.

• UI-Integrated: Attach each hint to a targeted element, such as a button or icon, making help seamlessly integrated into your product.

• Optional Entry Points: Hints can link out to other experiences (e.g., a Tour or Survey) for users who want deeper context.

---

Use Cases

Explore our demo website to see Hints in action. Choose between different experience examples to see how multiple hints can be effectively scattered in context.

• Inline Help: Provide immediate clarifications or definitions near key UI elements.

• Self-Guided Onboarding: Let users discover relevant tips on demand, rather than a mandatory tour.

• Contextual Reminders: Highlight underused or advanced features with subtle nudges.

---

How to Access

1. Navigate to Experiences: From your Jimo dashboard, go to Hints.

2. Create or Select Hints:

   • First-Time Users: Click "Create Your First Hints".

   • Returning Users: Click the + New Hints button in the top-right corner.

3. Choose a Template or Start from Scratch:

   • Templates: Select from prebuilt hint layouts for common use cases.

   • From Scratch: Create your own hints set, customizing each tooltip or badge as desired.

---

Main Features

Jimo’s Hints come with a robust set of tools that let you create simultaneous, context-sensitive tips across your UI. Below is an overview of how Hints work. For a detailed breakdown of hint types, styling, and positioning, visit our Hints Components page.

Builder

Since Hints don’t follow a step-by-step flow, you won’t see a Flow Builder tab—only the Content Builder.

All hints are managed in a single tab interface, where you can add or remove hints via a top bar. Ordering them here doesn’t affect user flow, each hint displays independently on the page.

Name and Back Button (A)

• Edit Banner Name: At the very top, you can edit the name of your hints group for easy identification.

• Back to Dashboard: Use the arrow next to the name to quickly return to the Dashboard overview of all your hints groups.

Step Manager (B)

When you create a new Hint, you’re actually creating a hint group that shares the same targeting settings.

⇒ Since all hints within the group display simultaneously, their order is purely for organizational purposes.

From the Step Manager at the top of the builder, you can:

• Delete Hints: Hover over a hint and click the trash icon to remove it.

• Add New Hints: Click the + button to create a new hint. You’ll be prompted to select its type. See components types.
• Reorder Hints: Drag and drop hints within the manager to rearrange them for better organization.

Action Buttons (C)

• Save: Secure your progress with the 'Save' button, which also .

• In-App Editor: Visualize and edit the survey within the context of your actual website by indicating the starting point URL.

• Preview: Simulate a full survey flow to see how it appears and behaves.

• Target & Publish: Set the criteria for who will see the banner and when it will be displayed.

Legacy Builder

Within the Legacy Builder, you’ll attach each hint to a UI element and customize its text, icon, and basic behaviors. This central pane ensures you can configure all hints in one place, keeping the process streamlined while letting you match your brand’s style.

Properties Sidebar: Elements Editor (A)

• Modify Attributes: Adjust positioning, styling, and animations for the currently selected element in the navigator.

Builder Menu (B)

• Navigator: Manage and edit elements within the hint.

• Themes: Apply consistent styling across your hint.

• Translations: Manage multi-language versions.

Navigator (C)

• Element List: See all elements in the hint, with the selected element highlighted.

• Element Selection: Click to edit specific elements via the Properties Sidebar.

Live Step Preview (D)

• Real-Time Editing: View and edit elements in the central preview.

• Element Interaction: Click on elements to modify content directly.

CSS Selector (E)

• Positioning: Use the quick access pop-up to apply CSS selectors to position your hint in context on your app. Adjust the position from the step parameters in the sidebar.

---

Best Practices

1

Don’t Overcrowd

Too many hints can overwhelm users; focus on the most crucial tips.

2

Keep Them Subtle

Hints should feel like helpful signposts, not distracting pop-ups.

3

Use Clear Labels

Provide short, descriptive text that instantly clarifies an element’s purpose.

4

Offer Deeper Links

Allow hints to link to a more in-depth Tour or documentation if users want more details.

5

Segment Wisely

Show hints only to the relevant audience (e.g., novices, advanced users) for maximum relevance.