Le widget ne se charge pas ou les styles sont cassés

Diagnostic rapide

Avant d'examiner les problèmes spécifiques, effectuez une vérification de base :

1. Ouvrez la page avec le widget.
2. Appuyez sur F12 (ou Cmd+Option+I sur Mac) -> onglet Console.
3. Recherchez les erreurs liées à tikento, widget.js, CSP ou CORS.
4. Vérifiez l'onglet Network -- trouvez la requête vers tikento.com/widget.js et assurez-vous que le statut est 200.

Problème : le widget ne se charge pas du tout

Cause 1 : Content Security Policy (CSP) bloque le script

Symptômes :

• Le formulaire n'apparaît pas.
• Dans la console : Refused to load the script 'https://tikento.com/widget.js' because it violates the following Content Security Policy directive: "script-src ...".

Solution :

Ajoutez tikento.com à la directive script-src de votre politique CSP :

script-src 'self' https://tikento.com;

Si vous utilisez une balise meta :

<meta http-equiv="Content-Security-Policy"
  content="script-src 'self' https://tikento.com;">

Il peut aussi être nécessaire d'ajouter connect-src https://tikento.com pour les requêtes API du widget et style-src 'unsafe-inline' https://tikento.com pour les styles.

Cause 2 : eventId incorrect

Symptômes :

• Le script se charge (200 dans Network), mais le formulaire ne s'affiche pas.
• Dans la console : [tikento] Event not found ou [tikento] Invalid eventId format.

Solution :

1. Ouvrez l'événement dans le tableau de bord tikento.
2. Accédez à l'onglet Inscription -> Widget pour le site.
3. Copiez l'UUID correct depuis le champ ou depuis le code du widget prêt à l'emploi.
4. Assurez-vous que l'attribut data-tikento-widget contient bien l'UUID sans espaces ni caractères superflus.

<!-- Correct -->
<div data-tikento-widget="550e8400-e29b-41d4-a716-446655440000"></div>

<!-- Incorrect -->
<div data-tikento-widget="VOTRE_EVENT_ID"></div>

Cause 3 : script non inclus ou inclus deux fois

Symptômes :

• Le conteneur div est présent sur la page, mais le formulaire n'apparaît pas.
• Pas d'erreurs dans la console, pas de requête vers widget.js dans Network.

Solution :

Assurez-vous que la balise <script> est présente sur la page et se charge exactement une fois :

<script src="https://tikento.com/widget.js" async defer></script>

Certains constructeurs de sites (Tilda, Wix) exigent d'ajouter les scripts dans des blocs spéciaux. Voir Installation sur Tilda, Webflow, Wix.

Problème : erreurs CORS

Symptômes :

• Le formulaire commence à se charger, mais les données (champs, billets) ne sont pas récupérées.
• Dans la console : Access to fetch at 'https://tikento.com/api/...' from origin 'https://your-site.com' has been blocked by CORS policy.

Solution :

Sur les forfaits Pro et supérieurs, vous devez ajouter le domaine de votre site à la liste des origines autorisées :

1. Dans le tableau de bord : événement -> Inscription -> Widget -> Domaines autorisés.
2. Ajoutez le domaine de votre site (par exemple, example.com ou *.example.com).
3. Cliquez sur Enregistrer.

Les modifications prennent effet dans la minute (après invalidation du cache widget:origins:{eventId}).

Sur le forfait Free, les restrictions CORS ne s'appliquent pas -- le widget fonctionne sur n'importe quel domaine.

En savoir plus -- Configuration CORS.

Problème : les styles du widget sont cassés

Propriétés CSS héritées

Le Shadow DOM isole la plupart des styles, mais certaines propriétés CSS sont héritées à travers la frontière du Shadow DOM :

• font-family, font-size, line-height
• color
• direction, text-align
• visibility

Si votre CSS reset définit des valeurs agressives sur body ou *, cela peut affecter le widget.

Solution :

Définissez les variables CSS du widget explicitement pour remplacer les valeurs héritées :

:root {
  --tikento-font: 'Inter', sans-serif;
  --tikento-text: #18181B;
}

Conteneur du widget rétréci ou invisible

Symptômes :

• Le widget s'affiche avec une hauteur ou largeur de 0.
• Le formulaire est tronqué.

Solution :

Vérifiez que l'élément parent du conteneur data-tikento-widget n'a pas :

• overflow: hidden avec une hauteur fixe
• display: none ou visibility: hidden
• max-height: 0 ou height: 0
• position: fixed / absolute sans dimensions définies

Le conteneur du widget nécessite une largeur libre d'au moins 320px.

Problème : ancienne version du formulaire affichée

Symptômes :

• Vous avez mis à jour les champs ou les billets dans le constructeur, mais le widget sur le site affiche l'ancienne version.

Solution :

1. Cache du navigateur. Appuyez sur Ctrl+Shift+R (ou Cmd+Shift+R sur Mac) pour un rechargement forcé.
2. Cache CDN / hébergement. Si votre site est derrière Cloudflare ou un CDN similaire, videz le cache pour la page avec le widget.
3. Cache Redis d'tikento. La configuration du widget est mise en cache avec un TTL de 300 secondes (5 minutes). Si plus de 5 minutes se sont écoulées et les modifications n'apparaissent pas, contactez le support.

Le script widget.js se charge avec l'en-tête Cache-Control: no-cache -- il est toujours à jour. Mais la configuration du formulaire (champs, billets, options) est mise en cache du côté d'tikento.

Problème : le widget ne fonctionne pas en mode popup

Symptômes :

• Le bouton avec data-tikento-popup n'ouvre pas le formulaire au clic.

Solution :

1. Assurez-vous que le script widget.js est chargé sur la page.
2. Vérifiez que l'attribut data-tikento-popup contient un UUID d'événement valide.
3. Si le bouton est ajouté dynamiquement (via un framework JS), assurez-vous qu'il est présent dans le DOM au moment de l'initialisation du widget, ou appelez window.tikento?.refresh() après l'ajout.

Erreurs dans la console : référence

Le problème persiste

Si après toutes les vérifications le problème persiste :

1. Faites une capture d'écran des erreurs dans la console (onglet Console).
2. Copiez l'URL de la page où le widget est installé.
3. Indiquez le navigateur et sa version.
4. Envoyez le tout au support via le tableau de bord (Aide -> Contacter le support) ou à support@tikento.com.