Peut-on personnaliser le widget sur le forfait gratuit ?

Non. Sur le forfait Free, le widget s'affiche dans le style standard tikento avec le filigrane. La personnalisation des variables CSS est disponible à partir du forfait Pro.

Pourquoi mes styles CSS du site n'affectent-ils pas le widget ?

Le widget est rendu à l'intérieur du Shadow DOM -- un environnement isolé qui n'hérite pas des styles de la page hôte. Pour la stylisation, utilisez les variables CSS tikento.

Où voir le résultat de la personnalisation avant publication ?

Dans le tableau de bord de l'événement, ouvrez Inscription -> Widget -> Personnalisation. À droite s'affiche la prévisualisation du formulaire avec vos paramètres en temps réel.

Personnalisation du widget

Principe de fonctionnement

Le widget tikento est rendu dans le Shadow DOM -- une zone isolée dans laquelle les styles de votre site ne pénètrent pas. Cela garantit que le formulaire s'affiche toujours correctement. En contrepartie, les règles CSS ordinaires de votre site ne peuvent pas influencer le widget directement.

Pour le branding, des CSS custom properties (variables CSS) sont utilisées. Elles traversent la frontière du Shadow DOM et permettent de contrôler les couleurs, polices et arrondis.

Variables CSS disponibles

Définissez les variables dans le CSS de votre site ou directement dans l'attribut style du conteneur :

:root {
  /* Couleur principale (boutons, liens, accents) */
  --tikento-primary: #4F46E5;

  /* Couleur du texte sur les boutons */
  --tikento-primary-foreground: #FFFFFF;

  /* Fond du formulaire */
  --tikento-bg: #FFFFFF;

  /* Couleur principale du texte */
  --tikento-text: #18181B;

  /* Couleur du texte secondaire */
  --tikento-text-muted: #71717A;

  /* Couleur des bordures des champs de saisie */
  --tikento-border: #E4E4E7;

  /* Rayon d'arrondi (boutons, champs, cartes) */
  --tikento-radius: 8px;

  /* Police */
  --tikento-font: 'Inter', sans-serif;

  /* Couleur des erreurs de validation */
  --tikento-error: #EF4444;

  /* Couleur des états de succès */
  --tikento-success: #22C55E;
}

Toutes les variables sont optionnelles. Si vous n'en définissez pas certaines, le widget utilise la valeur par défaut.

Configuration via le tableau de bord

Méthode sans code -- configurez tout dans l'interface tikento :

Ouvrez l'événement dans le tableau de bord.
Accédez à l'onglet Inscription -> section Widget pour le site.
Cliquez sur Personnalisation.
Choisissez les couleurs, la police et les arrondis via les contrôles visuels.
À droite s'affiche la prévisualisation -- le formulaire se met à jour en temps réel.
Cliquez sur Enregistrer -- les modifications s'appliquent à tous les widgets intégrés de cet événement.

Le tableau de bord génère le code CSS prêt à l'emploi, que vous pouvez aussi copier et coller sur votre site manuellement.

Configuration via le code

Si vous avez besoin d'un contrôle plus fin, définissez les variables CSS directement sur la page :

Option 1 : Globalement via :root

:root {
  --tikento-primary: #0D9488;
  --tikento-radius: 12px;
  --tikento-font: 'Montserrat', sans-serif;
}

<div
  data-tikento-widget="VOTRE_EVENT_ID"
  style="--tikento-primary: #0D9488; --tikento-radius: 12px;"
></div>

La deuxième option est pratique s'il y a plusieurs widgets sur la page ou si vous ne souhaitez pas modifier les styles globaux.

Option 3 : Chargement d'une police

Si vous utilisez une police personnalisée, chargez-la sur la page hôte via <link> ou @font-face, puis indiquez-la dans la variable :

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">

:root {
  --tikento-font: 'Montserrat', sans-serif;
}

Le Shadow DOM hérite des variables CSS de la page hôte, mais la police doit être chargée au niveau du document.

Shadow DOM : ce qui est isolé et ce qui ne l'est pas

Traverse le Shadow DOM	Ne traverse pas
CSS custom properties (`--tikento-*`)	Règles CSS ordinaires (`.class`, `#id`)
Polices chargées (`@font-face`)	Sélecteurs par balise (`input`, `button`)
`color-scheme`, `direction`	Classes Tailwind, styles Bootstrap

Cela signifie que les styles de votre site ne casseront jamais le widget, et le widget n'affectera pas les styles de votre site.

Restrictions par forfait

Forfait	Personnalisation	Filigrane
Free	Non disponible. Style standard tikento	Toujours affiché
Pro	Personnalisation complète des variables CSS	Supprimé
Business	Personnalisation complète + support prioritaire	Supprimé
Enterprise	Personnalisation complète + white-label	Supprimé

En savoir plus sur le filigrane -- Filigrane « Powered by tikento ».

Conseils

Vérifiez le contraste : la couleur du bouton (--tikento-primary) doit offrir un contraste d'au moins 4,5:1 avec la couleur du texte dessus (--tikento-primary-foreground).
Testez le formulaire en mode sombre du navigateur si votre site supporte le mode sombre.
Indiquez une police de secours dans --tikento-font au cas où la police web ne se chargerait pas.
Après l'enregistrement de la personnalisation dans le tableau de bord, le cache Redis du widget (widget:config:{eventId}) est invalidé automatiquement -- les modifications prennent effet en quelques secondes.