-(3).png){kind=logo}
SDK: guida al pannello contenuto
Nota introduttiva
Questa guida usa il componente Campagne come esempio di riferimento, ma la logica del pannello è la stessa per tutti i componenti del builder (Lista ricompense, Lista attività, Referral, ecc.).
Le sezioni disponibili cambiano a seconda del componente selezionato, ma i concetti di base, come funzionano i breakpoint, i campi colore, le varianti, si applicano in modo identico ovunque. Una volta capito come funziona un componente, sai usarli tutti.
Come si usa questo pannello Nel builder del componente, vai alla tab Contenuto. In alto trovi il menu a tendina Sezione che ti permette di navigare tra le diverse aree di configurazione. Ogni sezione controlla un aspetto specifico del componente. Il pannello di destra mostra sempre l'anteprima in tempo reale.
Menu Sezione — Le opzioni disponibili
Dal dropdown Sezione puoi selezionare:
| Voce | Cosa configura |
|---|---|
| Layout | Struttura della griglia e spaziatura tra le card |
| Sezione | Sfondo, titolo e sottotitolo dell'intera sezione |
| Card | Aspetto visivo di ogni singola card campagna |
| Card campagna completata | Comportamento delle card già completate dall'utente |
| Modale | Il popup di dettaglio che si apre al click su una card |
| Personalizzazione Campagne | Configurazioni specifiche per tipo di campagna (compleanno, social, referral, ecc.) |
1. Layout
Cosa configura: la disposizione delle card nella griglia e la distanza tra loro.
Colonne Griglia
- Cosa fa: definisce quante card vengono mostrate per riga.
- Come si modifica: campo numerico (es.
3= tre colonne per riga). - Breakpoint disponibili: puoi impostare valori diversi per Desktop 🖥, Tablet 📱 e Mobile 📲 usando i tre pulsanti in alto al campo.
Spaziatura
- Cosa fa: controlla la distanza (gap) tra una card e l'altra.
- Come si modifica: campo numerico + unità
px(default:24px). - Breakpoint disponibili: anche qui puoi differenziare per Desktop / Tablet / Mobile.
2. Sezione
Cosa configura: il contenitore esterno che racchiude tutte le card — sfondo, titolo e sottotitolo visibili sopra la griglia.
Sfondo sezione
- Cosa fa: colore di sfondo dell'area dietro le card.
- Come si modifica: campo esadecimale (default:
#F7F7FC). Puoi incollare qualsiasi hex code o rgba.
Allineamento
- Cosa fa: allinea orizzontalmente l'intestazione (titolo + sottotitolo).
- Opzioni:
Sinistra/Centro - Breakpoint disponibili: puoi scegliere allineamenti diversi per Desktop / Tablet / Mobile.
Titolo
Il testo principale visualizzato sopra le card (es. "Le tue campagne").
| Opzione | Descrizione |
|---|---|
| Colore | Colore del testo titolo (default: #1A202C ) |
| Dimensioni Font | Dimensione in px, differenziabile per dispositivo |
| Testo (IT / ES) | Testo localizzato per lingua |
| Autenticato / Ospite | Permette di mostrare testi diversi a seconda che l'utente sia loggato o no |
Sottotitolo
Il testo secondario sotto al titolo (es. "Guadagna punti con le nostre campagne fedeltà").
| Opzione | Descrizione |
|---|---|
| Colore | Colore del testo (default: #718096 ) |
| Dimensioni Font | Dimensione in px, differenziabile per dispositivo |
| Testo (IT / ES) | Testo localizzato per lingua |
| Autenticato / Ospite | Testi differenziati per stato login |
3. Card
Cosa configura: l'aspetto visivo di ogni singola card della campagna, forma, colori, ombra, icona, testi e pulsante.
Modalità layout
- Impilatо (default): icona sopra, testo sotto — layout verticale compatto.
- In linea: icona a sinistra, testo a destra — layout orizzontale.
Variante
Stile visivo complessivo della card:
Ghost— sfondo trasparente, bordo leggeroSolid— sfondo pienoOutline— solo bordo, senza sfondoSurface(default) — sfondo chiaro con profondità
Stile bordo
Forma degli angoli della card. Opzioni nel dropdown (es. Smussato , Quadrato , ecc.).
Allineamento testo
Sinistra(default) /Centro
Colori (stato Normale / Hover)
Puoi configurare colori distinti per lo stato normale e per il passaggio del mouse (hover):
- Sfondo — colore di fondo della card
- Colore bordo — colore del bordo perimetrale
Ombra (stato Normale / Hover)
- Attiva/disattiva con checkbox.
- Colore ombra — campo rgba o hex.
Linea divisoria
- Attiva/disattiva con checkbox.
- Stile — tipo di linea (es.
Tratteggiata,Continua) - Colore — colore della linea
Icona
- Attiva/disattiva con checkbox.
- Variante: Ghost / Solid / Outline / Surface
- Stile bordo icona
- Colore e Sfondo dell'icona
- Colore bordo dell'icona
- Dimensioni Icona — in px, differenziabile per dispositivp
Titolo della campagna
- Colore — colore del testo
- Dimensioni Font — in px, differenziabile per dispositivo
Descrizione breve
- Colore
- Dimensioni Font
Box punti
Visualizza il valore punti guadagnabili con la campagna.
| Opzione | Descrizione |
|---|---|
| Attiva | Checkbox per mostrare/nascondere il box punti |
| Posizione | Body (dentro la card) o Footer (in fondo alla card) |
| Orientamento | Verticale (punti sopra, etichetta sotto) / Orizzontale |
| Visualizza | Punti e/o Etichetta |
| Colore testo | Colore del valore numerico punti |
| Dimensioni Font | Differenziabile per dispositivo |
Pulsante
Il CTA principale della card (es. "Scopri", "Completa la campagna").
| Opzione | Descrizione |
|---|---|
| Attiva | Checkbox per mostrare/nascondere il pulsante |
| Allineamento | Sinistra / Centro / Destra / Centro a tutta larghezza |
| Dimensione | Small / Medium / Large |
| Variante | Ghost / Solid / Outline / Surface |
| Contenuto | Testo con icona / Solo testo / Solo icona |
| Testo default (IT/ES) | Testo del pulsante localizzato |
| Icona default | Icona FontAwesome (es. fa-regular fa-chevron-right ) |
| Personalizza colori | Abilita colori custom per questo pulsante |
| Autenticato / Ospite | Testo/icona diversi per utente loggato vs ospite |
Padding
Spaziatura interna della card (tra contenuto e bordo).
| Campo | Descrizione |
|---|---|
| Per ogni lato (Sopra/Destra/Sotto/Sinistra) | Valori in px, differenziabili per dispositivo |
4. Card campagna completata
Cosa configura: come appaiono le card delle campagne che l'utente ha già completato.
Opacità
- Attiva (checkbox): riduce l'opacità delle card completate per distinguerle visivamente.
- Valore opacità: slider da
0(trasparente) a1(opaco). Default:0.5.
Badge completamento
Un badge sovrapposto alla card per segnalare il completamento.
| Opzione | Descrizione |
|---|---|
| Attiva | Checkbox per mostrare/nascondere il badge |
| Posizione | Header (in alto sulla card) / Footer (in basso) |
| Variante | Ghost / Solid / Outline / Surface |
| Stile bordo | Forma degli angoli del badge |
| Sfondo | Colore di sfondo del badge |
| Colore testo | Colore del testo dentro il badge |
| Testo (IT/ES) | Testo del badge (default: "Completata") |
| Icona | Icona FontAwesome (default: fa-solid fa-check ) |
5. Modale
Cosa configura: il popup di dettaglio che si apre quando l'utente clicca su una card campagna.
Impostazioni generali
| Opzione | Descrizione |
|---|---|
| Dimensione | Piccolo / Medio (default) / Grande / Extra Grande |
| Stile bordo | Forma degli angoli del modale (es. Smussato ) |
| Allineamento testo | Sinistra (default) / Centro |
| Colore sfondo | Colore di fondo del modale (default: #FFFFFF ) |
Icona (nel modale)
| Opzione | Descrizione |
|---|---|
| Attiva | Mostra/nasconde l'icona campagna nel modale |
| Variante | Ghost / Solid / Outline / Surface |
| Stile bordo | Forma degli angoli dell'icona |
| Colore e Sfondo | Colori dell'icona |
| Colore bordo | Bordo dell'icona |
| Dimensioni Icona | In px, differenziabile per dispositivo |
Titolo
- Colore (default:
#1A202C) - Dimensioni Font (default:
18px)
Sottotitolo
- Colore (default:
#718096) - Dimensioni Font (default:
15px)
Descrizione
- Colore (default:
#1A202C) - Dimensioni Font (default:
15px)
Pulsanti (nel modale)
Configurazione dei CTA dentro il modale: Azione (es. "Conferma") e Chiudi.
| Opzione | Descrizione |
|---|---|
| Allineamento | Sinistra / Centro / Destra / Centro a tutta larghezza |
| Dimensione | Small / Medium / Large |
| Variante | Ghost / Solid / Outline / Surface |
| Contenuto | Testo con icona / Solo testo / Solo icona |
| Personalizza colori | Abilita colori custom per il pulsante |
| Autenticato / Ospite | Testo e icona diversi per stato login |
| Testo (IT/ES) | Testo del pulsante localizzato |
| Icona | Icona FontAwesome del pulsante |
⚠️ Il Pulsante azione è mostrato solo per campagne che prevedono un'azione diretta (es. compleanno). Per campagne automatiche come acquisti, non appare.
6. Personalizzazione Campagne
Cosa configura: comportamenti e testi specifici per ogni tipo di campagna (Compleanno, Mi piace social, Condividi social, Referral, Acquisto variabile, ecc.). Ogni tipo ha le proprie opzioni dedicate, organizzate in tre macro aree:
Pulsante card
Personalizza il CTA mostrato direttamente sulla card per quel tipo di campagna: testo localizzato (IT/ES), icona e — dove applicabile — la modalità azione (Diretta dalla card oppure Apri modale ).
Modale
Configura i contenuti del popup di dettaglio specifici per quel tipo di campagna: testi del prompt di input (es. la richiesta della data di nascita per il compleanno), colori, dimensioni font, stile e dimensione del campo input, e testo del pulsante di conferma.
Messaggi
Permette di personalizzare i testi comunicativi mostrati all'utente nelle diverse fasi della campagna (es. messaggio di benvenuto, conferma, errore). Ogni messaggio è localizzabile per lingua (IT/ES).
