Help Content API

Retrieve tooltips, onboarding flows, and contextual help for your app.

Get Help Content

GET/api/support/{appSlug}/help-content

Retrieve all active help content for your app.

Path/Query Parameters

appSlugstringrequiredYour app slug

typestringFilter by type: tooltip, onboarding, contextual

pagestringFilter by page/route

Response

200List of help content items

{
  "helpContent": [
    {
      "id": "uuid",
      "type": "tooltip",
      "selector": ".export-button",
      "content": "Click to export your data",
      "position": "top",
      "page": "/dashboard"
    },
    {
      "id": "uuid",
      "type": "onboarding",
      "step": 1,
      "selector": ".first-input",
      "title": "Welcome!",
      "content": "Start by entering your data here",
      "position": "right"
    }
  ]
}

Example Requestbash

curl -X GET "https://support.example.com/api/support/myapp/help-content?page=/dashboard"

Content Types

Tooltip

Helpful hints that appear when users hover or click on elements.

Tooltip Schemajson

{
  "type": "tooltip",
  "selector": ".export-button",
  "content": "Download your data as CSV or JSON",
  "trigger": "hover", // or "click"
  "position": "top"   // top, bottom, left, right
}

Onboarding

Step-by-step guides that walk users through your app.

Onboarding Schemajson

{
  "type": "onboarding",
  "step": 1,
  "selector": ".create-button",
  "title": "Create Your First Item",
  "content": "Click here to get started",
  "position": "bottom"
}

Contextual

Messages that appear based on user state or events.

Contextual Schemajson

{
  "type": "contextual",
  "trigger": "event:first-project-created",
  "message": "Great job! Now try inviting your team.",
  "position": "bottom-right"
}

Using Help Content

Fetch help content and render it in your app:

React Hook Exampletypescript

import { useEffect, useState } from 'react'

function useHelpContent(appSlug: string, page: string) {
  const [content, setContent] = useState([])

  useEffect(() => {
    fetch(`/api/support/${appSlug}/help-content?page=${page}`)
      .then(r => r.json())
      .then(data => {
        setContent(data.helpContent)
        // Render tooltips
        data.helpContent
          .filter(c => c.type === 'tooltip')
          .forEach(renderTooltip)
      })
  }, [appSlug, page])

  return content
}

function renderTooltip(tooltip) {
  const element = document.querySelector(tooltip.selector)
  if (element) {
    // Add tooltip using your preferred library (Tippy.js, etc.)
  }
}

The SupportFlow widget handles this automatically. See the Widget Guide.