PSH v1.4

PSH — PROMIUM Software Help

PSH è il sistema di help contestuale inline pensato per applicativi software, gestionali e SaaS. Porta la guida direttamente dove l'utente ne ha bisogno: tooltip AI su ogni campo, pannello di help sovrapposto, ricerca semantica — tutto senza uscire dall'applicazione.

Lettura: 9 min SDK v1.4 In-app help

Architettura PSH

PSH si compone di tre livelli che lavorano insieme per offrire un'esperienza di assistenza integrata nell'applicativo:

Layer 1 — Tooltip

Icone ? o accanto ai campi. Click o hover mostrano una spiegazione contestuale del campo specifico.

Layer 2 — Pannello Help

Pannello laterale o modale con la guida completa della sezione corrente, ricerca full-text e navigazione per argomenti.

Layer 3 — AI Assistant

Chatbot integrato nel pannello per risposte libere. Sa in quale schermata si trova l'utente e adatta le risposte al contesto.

PSH vs FAQ System: Il Sistema FAQ è pensato per i visitatori di siti web pubblici. PSH è progettato per utenti interni di software gestionale, SaaS, ERP, CRM — dove l'help deve essere contestuale alla schermata in uso.

Quick Start

Integra PSH nel tuo applicativo in 4 passaggi:

  1. Registra il progetto PSH nella dashboard

    Dashboard → PSH → Nuovo Progetto. Inserisci nome, URL base dell'applicativo e lingua. Ottieni il tuo PSH_PROJECT_ID.

  2. Carica l'SDK PSH nell'applicativo

    Includi lo script SDK una volta sola nel <head> del tuo applicativo web. L'SDK è leggero (<12KB gzip) e non blocca il rendering.

  3. Mappa le schermate e i campi

    Usa gli attributi data-psh-screen e data-psh-field per associare ogni elemento dell'interfaccia al contenuto di help corrispondente.

  4. Carica i contenuti di help dalla dashboard

    Per ogni screen e field definito, inserisci il testo di guida nella dashboard PSH. I contenuti vengono aggiornati in real-time senza deploy.

Integrazione SDK

Caricamento SDK

HTML — nel <head>
<script>
  window.PSH_CONFIG = {
    projectId: 'TUO_PSH_PROJECT_ID',
    lang: 'it',
    theme: 'light',          // 'light' | 'dark' | 'auto'
    position: 'right',       // posizione pannello help
    triggerIcon: 'circle',   // icona trigger help
    aiEnabled: true          // abilita chatbot AI nel pannello
  };
</script>
<script src="https://cdn.promiumai.com/psh/v1/sdk.js" async></script>

Inizializzazione manuale (opzionale)

JavaScript
// PSH si inizializza automaticamente se PSH_CONFIG è definito.
// Per inizializzazione programmatica:
window.PSH.init({
  projectId: 'TUO_PSH_PROJECT_ID',
  lang: 'it',
  theme: 'auto',
  onReady: () => console.log('PSH pronto'),
  onHelpOpen: (screen, field) => {
    console.log(`Help aperto: schermata=${screen}, campo=${field}`);
  }
});

Tooltip Contestuali

I tooltip si aggiungono a qualsiasi elemento HTML con l'attributo data-psh-field. PSH aggiunge automaticamente l'icona di help accanto all'elemento.

Markup base

HTML
<!-- Tooltip su un label di form -->
<label for="codice-fiscale"
       data-psh-field="anagrafica.codice_fiscale">
  Codice Fiscale
</label>
<input id="codice-fiscale" type="text" />

<!-- Tooltip su una sezione dell'interfaccia -->
<section data-psh-screen="ordini.nuovo_ordine">
  <h2>Nuovo Ordine</h2>
  <!-- ... -->
</section>

<!-- Tooltip su un campo tabella -->
<th data-psh-field="report.margine_lordo">
  Margine Lordo
</th>

Opzioni attributo data-psh-field

AttributoDescrizione
data-psh-field="screen.campo" ID del contenuto di help. Formato: nome_schermata.nome_campo. Dot notation per la gerarchia.
data-psh-position="top" Posizione del tooltip: top | bottom | left | right (default: auto).
data-psh-trigger="hover" Come si apre il tooltip: hover | click | focus (default: click).
data-psh-icon="false" Nasconde l'icona di help (utile se vuoi attivare il tooltip via JS).

Pannello Help

Il pannello Help è un drawer laterale (o modale su mobile) che mostra la guida completa per la schermata corrente. Si apre tramite:

  • Click sull'icona Help flottante [?] (aggiunta automaticamente da PSH)
  • Shortcut tastiera Shift + H (configurabile)
  • Chiamata programmatica PSH.openPanel()

Controllo programmatico

JavaScript
// Apri il pannello sulla schermata corrente
PSH.openPanel();

// Apri il pannello su una schermata specifica
PSH.openPanel({ screen: 'ordini.nuovo_ordine' });

// Apri il pannello con ricerca pre-compilata
PSH.openPanel({ query: 'come inserire un ordine ricorrente' });

// Chiudi il pannello
PSH.closePanel();

// Setta la schermata corrente (navigazione SPA)
PSH.setScreen('clienti.dettaglio_cliente');

// Invia evento custom all'AI (contestualizza le risposte)
PSH.setContext({
  userId: '12345',
  userRole: 'admin',
  currentRecord: 'ordine-#00123'
});

Configurazione completa

Opzione Tipo Default Descrizione
projectId required string ID del progetto PSH dalla dashboard.
lang string it Lingua interfaccia PSH (it, en, es, fr).
theme string light light | dark | auto (segue prefers-color-scheme).
position string right Posizione del pannello help: right | left | modal.
triggerIcon string circle Stile icona tooltip: circle (❓) | info (ℹ) | none.
aiEnabled boolean true Abilita il chatbot AI nel pannello help per domande libere.
shortcut string Shift+H Shortcut tastiera per aprire il pannello. false per disabilitare.
floatButton boolean true Mostra il pulsante [?] flottante fisso nella UI.
trackAnalytics boolean true Registra metriche di utilizzo (tooltip aperti, ricerche, query AI).
fallbackUrl string URL della documentazione esterna, mostrato se il contenuto locale non è disponibile.

Gestione Contenuti Help

I contenuti di help si gestiscono dalla dashboard PSH. Ogni contenuto è associato a un ID univoco del tipo schermata.campo.

Struttura contenuto

JSON — Struttura contenuto PSH
{
  "id": "anagrafica.codice_fiscale",
  "title": "Codice Fiscale",
  "tooltip": "Il codice fiscale del cliente. Per persone fisiche: 16 caratteri alfanumerici.",
  "description": "Il codice fiscale identifica univocamente ogni persona fisica o giuridica in Italia...",
  "example": "RSSMRA80A01H501W",
  "related": [
    "anagrafica.partita_iva",
    "anagrafica.tipo_soggetto"
  ],
  "video_url": null,
  "tags": ["anagrafica", "fiscale", "obbligatorio"],
  "updated_at": "2026-06-01T10:00:00Z"
}

Import massivo da YAML/Markdown

Per applicativi complessi con centinaia di schermate, importa la documentazione da file YAML strutturati:

YAML — help-content.yaml
screens:
  anagrafica:
    title: "Gestione Anagrafica"
    description: "Sezione per la gestione dei dati anagrafici di clienti e fornitori."
    fields:
      codice_fiscale:
        tooltip: "Codice fiscale del soggetto. 16 caratteri per persone fisiche."
        description: "Obbligatorio per soggetti italiani. Usato per la fatturazione elettronica."
        example: "RSSMRA80A01H501W"
      partita_iva:
        tooltip: "Partita IVA aziendale. 11 cifre numeriche."
        description: "Obbligatoria per persone giuridiche. Formato: IT + 11 cifre."
        example: "IT12345678901"

  ordini:
    title: "Gestione Ordini"
    fields:
      data_consegna:
        tooltip: "Data di consegna prevista. Non può essere precedente alla data odierna."
      tipo_spedizione:
        tooltip: "Modalità di spedizione: Standard (3-5gg), Express (24h), Ritiro in sede."

Aggiornamento zero-deploy: I contenuti PSH vengono aggiornati in real-time dalla dashboard senza richiedere nessun rebuild o deploy del tuo applicativo. Modifica, salva: gli utenti vedono il contenuto aggiornato entro 30 secondi.

API & SDK

Metodi SDK disponibili

MetodoParametriDescrizione
PSH.init(config) config: object Inizializza PSH con la configurazione fornita.
PSH.openPanel(options?) options: {screen?, query?} Apre il pannello help. Opzionale: schermata target o query pre-compilata.
PSH.closePanel() Chiude il pannello help.
PSH.setScreen(screenId) screenId: string Notifica PSH della schermata corrente (essenziale per SPA).
PSH.setContext(ctx) ctx: object Fornisce contesto aggiuntivo all'AI (utente, record, stato).
PSH.showTooltip(fieldId) fieldId: string Apre programmaticamente il tooltip di un campo.
PSH.hideTooltip(fieldId?) fieldId?: string Chiude uno o tutti i tooltip aperti.
PSH.search(query) query: string Restituisce Promise con i risultati della ricerca nella knowledge base.
PSH.destroy() Rimuove completamente PSH dal DOM e deregistra tutti gli event listener.

REST API — Gestione contenuti

JavaScript — Fetch contenuto via API
// Recupera il contenuto di help per un campo specifico
const res = await fetch(
  'https://api.promiumai.com/api/v1/psh/TUO_PSH_PROJECT_ID/content/anagrafica.codice_fiscale',
  { headers: { 'Authorization': 'Bearer TUO_API_KEY' } }
);
const content = await res.json();
console.log(content.tooltip);
console.log(content.description);

Casi d'uso tipici

ERP / Gestionale

Help contestuale su ogni campo del gestionale: anagrafica, contabilità, magazzino, ordini. Riduce drasticamente le chiamate al supporto interno.

Dashboard Analytics

Spiegazione contestuale di KPI e metriche: hover su un dato → tooltip con definizione, formula di calcolo ed esempi di interpretazione.

Onboarding utenti

Guided tour interattivo per nuovi utenti. PSH può attivare tooltip in sequenza per guidare l'utente nelle prime operazioni.

Software di compliance

Normative e obblighi legali sempre a portata di click, contestuali al campo che si sta compilando (es. privacy, fiscale, HACCP).

PSH vs Sistema FAQ: quando usare quale

Caratteristica PSH — Software Help Sistema FAQ
Pubblico target Utenti di software gestionale/SaaS Visitatori di siti web pubblici
Contesto Inline nell'applicativo (tooltip, pannello) Pagina FAQ o widget su sito
Integrazione SDK JavaScript + attributi HTML Snippet HTML embed
Awareness del contesto Sì — conosce la schermata e il campo corrente No — risponde a domande generali
Contenuti Guide operative, definizioni campi, procedure Domande frequenti su prodotto/servizio
AI integrata Chatbot contestuale alla schermata NLU per ricerca semantica nelle FAQ
Caso d'uso ideale ERP, CRM, SaaS B2B, gestionali aziendali E-commerce, siti istituzionali, landing page

Combinazione consigliata: Per i clienti PROMIUM con sia un sito pubblico che un'applicazione gestionale, la combinazione ottimale è FAQ System sul sito + PSH nel software, entrambi con fallback al chatbot PROMIUM Assistant.