Aller au contenu
Mode démonstration — les paiements passent par les clés de test Stripe, aucun euro n'est encaissé.
Panache

Documentation

Une ligne,
huit plateformes.

Panache s'installe partout de la même façon : un conteneur vide qui porte votre clé publique, et un script chargé une seule fois. Ce qui change d'une plateforme à l'autre, c'est seulement l'endroit où coller.

Le code

Vous trouvez votre clé publique dans votre espace, sur la page du mur. 

<div data-panache="pnc_votre_cle"></div>
<script src="https://panache.corentinmre.fr/w.js" async></script>

Le <div> marque l'emplacement. Le <script> ne se met qu'une fois par page, même si vous affichez plusieurs murs. Il peut aller n'importe où — l'attribut async évite qu'il bloque l'affichage.

Par plateforme

  • ·

    WordPress (éditeur de blocs)

    Ajoutez un bloc HTML personnalisé à l'endroit voulu, collez les deux lignes, publiez. N'utilisez pas un bloc « Paragraphe » : il échappe le code.

  • ·

    WordPress (Elementor)

    Widget HTML, collez, mettez à jour. Le mur ne s'affiche pas dans l'éditeur — c'est normal, regardez l'aperçu ou la page publiée.

  • ·

    Webflow

    Glissez un élément Embed depuis le panneau « Add », collez les deux lignes, puis publiez. L'aperçu du Designer ne charge pas les scripts externes.

  • ·

    Shopify

    Dans l'éditeur de thème, ajoutez une section Code personnalisé, ou collez directement dans un fichier .liquid. Les deux fonctionnent.

  • ·

    Wix

    Ajouter → Embed → Code personnalisé. Choisissez « Le code apparaît sur toutes les pages » ou seulement celle qui vous intéresse. Wix place le contenu dans un cadre à hauteur fixe : pensez à l'agrandir.

  • ·

    Squarespace

    Bloc Code (disponible à partir du forfait Business). Décochez « Afficher la source » si l'option apparaît.

  • ·

    Framer

    Insérez un composant Embed en mode HTML et collez les deux lignes.

  • ·

    HTML écrit à la main

    Collez où vous voulez dans le <body>. Rien d'autre à faire.

  • ·

    React, Vue, Next.js, Astro

    Placez le <div data-panache="…"> dans votre composant et chargez le script une fois. Si le mur apparaît après une navigation côté client, appelez window.Panache.monter() pour lui demander de balayer à nouveau la page.

Questions techniques

  • ?

    Combien pèse le widget ?

    Trois kilo-octets et demi, compressés, pour le script, plus une requête JSON dont la taille dépend du nombre de témoignages. Pas d'iframe, pas de police téléchargée : le mur emprunte la pile de polices du système.

  • ?

    Est-ce que ça casse ma mise en page ?

    Non. Le mur se dessine dans un shadow DOM avec all: initial : vos styles n'entrent pas et les nôtres ne sortent pas. Le conteneur prend la largeur que vous lui donnez.

  • ?

    J'ai une politique de sécurité de contenu (CSP)

    Autorisez https://panache.corentinmre.fr en script-src et en connect-src. Le widget n'a besoin de rien d'autre : ni image distante, ni police, ni eval.

  • ?

    Combien de temps avant qu'une modification apparaisse ?

    Cinq minutes au plus. Les données sont servies avec un cache court, volontairement, pour que votre site reste rapide sans que vous ayez à attendre une journée.

  • ?

    Et si vos serveurs tombent ?

    Le conteneur reste vide et le reste de votre page s'affiche normalement. Le script est chargé en async et n'interrompt jamais le rendu.

  • ?

    Accessibilité

    Le mur utilise <figure>, <blockquote> et <figcaption>. Les notes portent un libellé lisible par les lecteurs d'écran, les pastilles d'initiales sont masquées, et l'animation du bandeau se coupe si le visiteur a demandé à réduire les mouvements.

  • ?

    Les témoignages sont-ils lus par Google ?

    Non, et il faut le savoir : le contenu est injecté par JavaScript, il n'entre pas dans le HTML de votre page. Panache sert à convaincre vos visiteurs, pas à améliorer votre référencement.