Installer et personnaliser le widget BugsPointer.

Copiez cette balise pour afficher automatiquement le bouton BugsPointer sur votre site. Elle contient votre clé publique et charge le widget depuis BugsPointer.

<script src="https://bugspointer.com/widget/v1/modalPointer.js" data-public-key="pk_xxxxx" defer></script>

Utilisez cette option si vous voulez ouvrir la modal depuis un lien dans le footer, le menu, une page d’aide ou un bloc personnalisé. Le script charge la modal, mais n’affiche pas de bouton flottant.

<script src="https://bugspointer.com/widget/v1/modalPointer.js" data-public-key="pk_xxxxx" data-button-style="custom" defer></script> <a href="#" data-bugspointer-open data-bugspointer-key="pk_xxxxx"></a>

Laissez le lien vide si vous souhaitez utiliser le texte enregistré dans la personnalisation du widget. Vous pouvez aussi écrire votre propre texte entre les balises <a>.

data-public-key relie le widget a votre compte BugsPointer. Cette clé est publique : elle peut apparaître dans le HTML du site client.

Format obligatoire : pk_xxxxx.

Placez le script sur les pages où les utilisateurs peuvent signaler un bug. Le plus simple est de le coller avant la fermeture du </body>.

L’attribut defer laisse la page se charger correctement avant l’exécution du widget.

Si vous utilisez un lien personnalisé, placez aussi la balise <a data-bugspointer-open> à l’endroit exact où le lien doit apparaître.

Tips : Le plus simple est de placer le script dans un fichier présent dans toutes les pages

Ajoutez le script dans la zone de code personnalisé, le footer du thème, un module HTML ou un plugin d’injection de scripts.

Sur certaines plateformes SaaS, l’ajout de JavaScript externe dépend du plan du client.

Ajoutez le script dans le layout global, le template HTML principal, ou injectez-le au montage de l’application.

Pour une SPA, le widget reste disponible pendant la navigation et récupère l’URL courante au moment de l’ouverture de la modal.

Depuis la page Widget, vous pouvez modifier :

• la couleur principale du bouton et des actions
• la couleur de fond, du texte et du titre de la modal
• la couleur du lien placé dans le site
• le soulignement du lien
• le texte du lien
• le titre de la modal
• le libellé du champ description
• la taille, la position et les marges du bouton flottant

Le choix “bouton” ou “lien” dans la page Widget sert à prévisualiser les bons réglages. Il ne bloque pas l’autre déclencheur : si le code du bouton et le code du lien sont installés sur le site, les deux peuvent fonctionner.

Le chargement de la balise <script> n’est pas bloqué par CORS. En revanche, le widget appelle l’API BugsPointer pour récupérer la configuration et envoyer les rapports.

BugsPointer doit donc autoriser les routes publiques GET /api/widget/config et POST /api/user/modalControl.

Si le site client utilise une CSP stricte, il doit autoriser BugsPointer :

script-src https://bugspointer.com; connect-src https://bugspointer.com;

Sans cela, le navigateur peut bloquer le script ou les appels API.

La clé pk_xxxxx est publique. Elle identifie le projet, mais ne donne aucun accès privé.

Pour limiter les abus, le domaine du site doit être renseigné dans le compte BugsPointer et comparé à l’URL du rapport.

L’utilisateur clique sur le bouton ou le lien BugsPointer, pointe l’élément concerné sur la page, décrit le problème puis envoie le rapport.

Le rapport inclut l’URL, l’élément pointé, la description, le navigateur, l’OS, la langue du navigateur, le type d’appareil et la taille du viewport.

Les rapports arrivent dans le dashboard. Vous pouvez ensuite les classer en nouveau, en cours, résolu ou ignoré.

Selon vos préférences de notification, vous pouvez recevoir un e-mail à la réception d’un nouveau bug.