Personnalisation

Le widget Saasy Feedback est entierement personnalisable pour s'integrer harmonieusement a l'identite visuelle de ton produit. Toutes les options de theme sont configurables depuis le Widget Builder (etape 3) dans ton tableau de bord Saasy.

Options de thème

Option	Type	Défaut	Description
`primaryColor`	`string`	`#2563eb`	Couleur principale (boutons, liens, votes actifs)
`backgroundColor`	`string`	`#ffffff`	Couleur de fond du panneau
`textColor`	`string`	`#111827`	Couleur du texte principal
`borderRadius`	`number`	`12`	Rayon des coins en pixels (0 à 24)
`fontFamily`	`string`	Police système	Police de caractères (police système par défaut, ou une police personnalisée)
`darkMode`	`boolean`	`false`	Active le thème sombre
`headerStyle`	`string`	`"text"`	Style de l'en-tête : `"text"` ou `"logo"`
`headerText`	`string`	Nom du projet	Texte affiché dans l'en-tête (si `headerStyle: "text"`)
`headerLogoUrl`	`string`	—	URL de l'image affichée dans l'en-tête (si `headerStyle: "logo"`)
`customCss`	`string`	—	CSS brut injecté directement dans le Shadow DOM

Exemple de configuration

Depuis le Widget Builder, configure le theme de ton widget dans l'etape Personnalisation. Voici un exemple des options disponibles :

{
  "primaryColor": "#f59e0b",
  "backgroundColor": "#ffffff",
  "textColor": "#111827",
  "borderRadius": 8,
  "fontFamily": "Inter, sans-serif",
  "darkMode": false,
  "headerStyle": "logo",
  "headerLogoUrl": "https://ton-app.com/logo.svg"
}

Le theme est configure dans le dashboard Saasy, pas dans window.SaasyConfig. Le widget recupere automatiquement la configuration de theme depuis le serveur au chargement.

Couleur principale

La primaryColor s'applique aux éléments interactifs : boutons d'action, compteurs de votes actifs, liens, indicateurs de progression. Utilise une couleur avec un contraste suffisant sur fond blanc pour garantir l'accessibilité.

// Bleu (défaut Saasy)
theme: { primaryColor: "#2563eb" }

// Violet
theme: { primaryColor: "#7c3aed" }

// Ambre
theme: { primaryColor: "#f59e0b" }

Rayon des coins

Le borderRadius contrôle l'arrondi de tous les éléments du widget (cartes, boutons, champs). Une valeur de 0 donne un style entièrement rectangulaire, 24 donne un style très arrondi.

theme: { borderRadius: 0 }  // Angles droits
theme: { borderRadius: 12 } // Arrondi modéré (défaut)
theme: { borderRadius: 24 } // Très arrondi

Mode sombre

Active le darkMode pour adapter le widget aux interfaces sombres :

theme: {
  darkMode: true,
  primaryColor: "#60a5fa",   // Bleu clair pour meilleur contraste sur fond sombre
  backgroundColor: "#1f2937",
  textColor: "#f9fafb"
}

Le mode sombre se configure dans le Widget Builder. Si tu veux que ton widget suive la preference systeme de l'utilisateur, active l'option "Suivre la preference systeme" dans les parametres de theme du widget.

Police de caractères

Par défaut, le widget utilise la police système de l'OS de l'utilisateur (pas de chargement réseau). Tu peux spécifier une autre police :

Par défaut — police système (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif)
N'importe quelle police déjà chargée dans ta page

// Utiliser la police de ton application (si déjà chargée)
theme: { fontFamily: "'Geist', sans-serif" }

CSS personnalisé

L'option customCss te permet d'injecter du CSS brut directement dans le Shadow DOM du widget. C'est utile pour des ajustements fins que les options de thème ne couvrent pas.

theme: {
  customCss: `
    .saasy-header {
      border-bottom: 2px solid #f59e0b;
    }
    .saasy-idea-card {
      box-shadow: none;
      border: 1px solid #e5e7eb;
    }
    .saasy-vote-btn:hover {
      background-color: #fef3c7;
    }
  `
}

Note : les classes CSS internes peuvent changer entre les versions du widget. Utilise cette option avec parcimonie et prévois de la tester après chaque mise à jour.

Mise à jour dynamique du thème

Si tu veux changer le theme apres le chargement initial, modifie les options dans le Widget Builder du dashboard. Les changements sont appliques au prochain chargement du widget. Pour forcer un rechargement immediat, appelle window.Saasy.destroy() puis reinitialise le widget avec window.SaasyWidget.init({ embedKey: "...", appKey: "..." }).