Skip to main content

Smart Tips

Smart Tips are contextual tooltips that appear next to elements on your website. They provide in-context guidance to users without interrupting their workflow.

Creating a Smart Tip​

Navigate to produktly.com/app/smart-tips/create to create a new smart tip.

Settings​

Display​

Controls how often the smart tip is shown:

  • Once - The smart tip is shown once per user. After the user closes or interacts with it, it won't appear again.
  • Always - The smart tip is shown every time the trigger conditions are met, regardless of whether the user has seen it before.

Display Trigger​

Choose how the smart tip is activated:

  • Element Click - Smart tip appears when the user clicks the target element
  • Element Focus - Smart tip appears when the user focuses the target element (e.g. clicking into an input field)
  • Element Hover - Smart tip appears when the user hovers over the target element
  • Beacon Click - A small beacon is shown next to the element. Smart tip appears when the user clicks the beacon
  • Beacon Hover - A small beacon is shown next to the element. Smart tip appears when the user hovers over the beacon

Hide behavior (hover triggers)​

When using hover-based triggers ("Element Hover" or "Beacon Hover"), you can configure when the smart tip hides:

  • On click - Smart tip stays visible until the user clicks somewhere
  • When mouse leaves - Smart tip hides when the mouse moves away

Element CSS Selector​

The CSS selector that identifies the element the smart tip should be attached to. For example #help-button or .settings-icon. See Element CSS Selectors for help finding selectors.

Content​

Title and Content​

Give your smart tip a title and rich text content. The content editor supports text formatting, images, videos, links, and more.

Action​

Optionally add an action button to the smart tip:

  • None - No action button
  • Open page - Opens a URL when clicked. You can configure:
    • The URL to open
    • Whether to open in a new tab
  • Start Tour - Starts a product tour when clicked. Select which tour to start.

You can also set the action position (Left, Center, or Right) and customize the action text.

Styling​

Beacon​

  • Display beacon - Toggle whether a beacon indicator is shown next to the element
  • Beacon style - Choose from: Pulsating Point, Question Mark, or Information Icon
  • Horizontal offset (x-axis, px) - Offset the beacon horizontally from the element
  • Vertical offset (y-axis, px) - Offset the beacon vertically from the element

Card orientation​

Controls the direction the smart tip card opens relative to the element:

  • Auto (default) - Produktly automatically finds the best position
  • Right, Left, Top, Bottom - Force a specific direction

Orient around​

  • Element - Position the card relative to the target element
  • Beacon - Position the card relative to the beacon

Hide card when off-page​

When disabled, the smart tip sticks to the edge of the page when the user scrolls past the beacon. When enabled, the smart tip hides entirely when the beacon scrolls out of view.

Z-axis override (z-index)​

Override the z-index of the smart tip. Useful if the smart tip appears behind other elements on your page.

Theme​

Select a pre-made theme or set custom theme and text colors.

Targeting​

Smart tips support the full targeting rules engine, allowing you to control which users and pages see the smart tip.

Localization​

Smart tips support full localization. Title, content, and action text can all be translated.

Starting with code​

You can also open a smart tip manually using the Client SDK:

window.Produktly.openSmartTip({ id: smartTipId });