Intégrer le bouton Aldrin

Le bouton de support flottant d'Aldrin s'ajoute à n'importe quel site ou back-office avec une seule ligne. Il affiche d'abord une image fixe, puis s'anime une fois la page chargée. La saison (Halloween, fêtes…) change toute seule, sans rien toucher sur le site. Le bouton de cette page en est la démonstration, en bas à droite.

1. La ligne à copier

Avant la balise </body>, sur toutes les pages où le bouton doit apparaître :

<script src="https://aldrin.mozartsduweb.com/aldrin.js" defer
        data-href="https://lien-de-declaration-d-incident"
        data-size="64"></script>

C'est tout. Le script ajoute lui-même sa feuille de style et le bouton (en bas à droite, au-dessus du contenu). Il ne bloque pas l'affichage de la page (defer) et ne charge que les fichiers utiles.

2. Réglages

Attribut	Rôle	Valeurs	Défaut
`data-href`	Lien ouvert au clic (déclaration d'incident)	une URL	`#`
`data-size`	Diamètre affiché du bouton	`32`, `48`, `64`	`64`

À 64 et 48 px, le bouton s'anime. À 32 px, il reste en image fixe (l'animation ne se verrait pas).
Le script choisit lui-même la bonne résolution selon l'écran (Retina compris) : rien à prévoir.
Il reste en image fixe si le visiteur a demandé moins d'animations (réglage système) ou économise ses données.

3. WordPress

Dans le functions.php du thème (ou d'un petit plugin maison), pour ne pas toucher aux gabarits :

add_action('wp_footer', function () {
    echo '<script src="https://aldrin.mozartsduweb.com/aldrin.js" defer data-href="https://lien-de-declaration" data-size="64"></script>';
});

// également dans l'administration WordPress :
add_action('admin_footer', function () {
    echo '<script src="https://aldrin.mozartsduweb.com/aldrin.js" defer data-href="https://lien-de-declaration" data-size="48"></script>';
});

Thème Sage : ajouter la ligne dans resources/views/layouts/app.blade.php, juste avant </body>.

4. PrestaShop

Dans le gabarit du thème, juste avant </body> :

PrestaShop 1.7 et 8 : themes/<theme>/templates/layouts/layout-both-columns.tpl (ou le bloc {block name='javascript_bottom'}) ;
PrestaShop 1.6 : themes/<theme>/footer.tpl.

{literal}<script src="https://aldrin.mozartsduweb.com/aldrin.js" defer data-href="https://lien-de-declaration" data-size="64"></script>{/literal}

Pour le back-office, un module peut l'injecter sur le hook displayBackOfficeFooter. Vider le cache Smarty après la modification.

5. Laravel (Blade) et autres

Dans le layout principal, juste avant </body> :

<script src="https://aldrin.mozartsduweb.com/aldrin.js" defer data-href="{{ route('incident.create') }}" data-size="64"></script>

Sur tout autre site (HTML, Vue, React), même ligne dans le gabarit de page. Dans une application monopage, l'insérer une seule fois dans le document principal, pas dans un composant qui se recharge.

6. Sécurité : Content Security Policy

Si le site envoie un en-tête Content-Security-Policy, y autoriser le domaine d'Aldrin, sinon le bouton est bloqué :

script-src https://aldrin.mozartsduweb.com;
style-src  https://aldrin.mozartsduweb.com;
img-src    https://aldrin.mozartsduweb.com;
media-src  https://aldrin.mozartsduweb.com;

(À ajouter aux valeurs déjà présentes, pas à la place.) Sans CSP, rien à faire.

7. Personnaliser

Le bouton porte la classe .aldrin-support. Quelques variables CSS, à surcharger dans la feuille du site :

.aldrin-support {
    --aldrin-border: 5px;          /* épaisseur du cercle (4 px par défaut) */
    --aldrin-ring: #1374cc;        /* couleur du cercle */
    --aldrin-ring-hover: #00d2ee;  /* au survol et au focus clavier */
    right: 24px;                   /* position */
    bottom: 24px;
}

Si un autre élément flottant occupe déjà le coin (bouton de chat, retour en haut), décaler l'un des deux avec bottom.

8. E-mails

Dans un e-mail, pas de script : une image, avec son cercle intégré (Outlook ignore les coins arrondis en CSS).

<a href="https://lien-de-declaration">
    <img src="https://aldrin.mozartsduweb.com/aldrin/aldrin-support-email.png" width="64" height="64" alt="Appeler Aldrin, le support MozArtsduWeb">
</a>

L'image suit elle aussi les saisons : même adresse, contenu mis à jour.

9. Dépannage

Le bouton n'apparaît pas : vérifier dans la console du navigateur qu'aucune erreur CSP ne bloque aldrin.js (voir point 6), et que la ligne est bien dans le HTML final (cache du site vidé).
Il reste en image fixe : normal à 32 px, ou si le système demande moins d'animations. Sinon, vérifier que media-src autorise le domaine.
L'ancienne saison s'affiche encore : les fichiers sont gardés 24 h en cache par le navigateur, puis revérifiés. Au plus tard le lendemain, c'est à jour.
Deux boutons : la ligne est présente deux fois (thème et plugin, par exemple). N'en garder qu'une.

Voir le bouton en situation : page de démonstration (journal de chargement, tailles 32, 48, 64 px).