Comment intégrer un widget changelog dans votre application

Pourquoi un widget in-app plutôt qu'une page ?

Votre changelog existe. Mais si personne ne le lit, il ne sert à rien. Un widget intégré directement dans votre application résout ce problème : il place vos mises à jour là où vos utilisateurs passent leur temps.

Les chiffres parlent d'eux-mêmes :

• Page publique seule : consultée par ~2% de vos utilisateurs actifs
• Widget in-app : consulté par 15-25% de vos utilisateurs actifs

C'est un facteur 10× sur la visibilité de vos efforts produit.

Étape 1 : Choisir le bon emplacement

Le widget doit être visible sans être intrusif. Les trois emplacements qui fonctionnent :

Dans la navbar (recommandé)

Un icône cloche ou mégaphone avec un badge de notification. C'est le pattern le plus courant (utilisé par Notion, Intercom, Linear).

Dans la sidebar

Si votre application a une navigation latérale, ajoutez une entrée "Quoi de neuf" ou "Mises à jour" en bas de la sidebar.

En bas à droite (flottant)

Un bouton flottant discret. Moins élégant que les deux options précédentes, mais ne nécessite aucune modification de votre layout existant.

Étape 2 : Intégrer le script

Avec Changelo, l'intégration se fait en une seule balise script :

<script
  src="https://changelo.dev/widget.js"
  data-project="votre-slug"
  async
></script>

Placez ce script juste avant la fermeture de votre balise . Le chargement asynchrone garantit que votre page ne ralentit pas.

Pour les applications React / Next.js

Utilisez un composant dédié pour charger le widget :

'use client';
import { useEffect } from 'react';

export function ChangelogWidget({ projectSlug }: { projectSlug: string }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://changelo.dev/widget.js';
    script.dataset.project = projectSlug;
    script.async = true;
    document.body.appendChild(script);
    return () => { document.body.removeChild(script); };
  }, [projectSlug]);

  return null;
}

Pour les SPA (Vue, Angular, Svelte)

Le principe est identique : chargez le script dynamiquement dans un hook de lifecycle (onMounted pour Vue, ngOnInit pour Angular, onMount pour Svelte).

Étape 3 : Personnaliser l'apparence

Le widget s'adapte automatiquement au thème de votre application. Vous pouvez ajuster :

Étape 4 : Activer le badge de notification

Le badge est le détail qui fait la différence. Un petit chiffre rouge ("3") indique à l'utilisateur qu'il a des mises à jour non lues. C'est le mécanisme qui transforme un widget passif en outil d'engagement actif.

Avec Changelo, le badge est activé par défaut. Il se réinitialise quand l'utilisateur ouvre le widget et consulte les dernières entrées.

Bonnes pratiques d'intégration

Ne chargez pas le widget sur les pages publiques

Le widget est conçu pour vos utilisateurs connectés. Sur votre landing page ou vos pages marketing, un lien vers votre page publique de changelog suffit.

Testez sur mobile

Le widget doit être utilisable sur petit écran. Si votre application est responsive, vérifiez que le widget ne bloque pas d'éléments interactifs.

Mesurez l'impact

Après l'intégration, surveillez :

• Le taux de consultation du widget (fourni dans les analytics Changelo)
• L'évolution du nombre de tickets support de type "quand est-ce que X sera disponible ?"
• L'adoption des nouvelles features (les utilisateurs informés les adoptent plus vite)

En résumé

L'intégration d'un widget changelog prend 5 minutes et multiplie par 10 la visibilité de vos mises à jour. C'est l'action la plus simple et la plus efficace pour améliorer votre communication produit.

Intégrez le widget Changelo gratuitement — une ligne de code, un impact immédiat.