HelloAsso Stream est un outil gratuit qui permet aux associations et aux streamers de suivre en temps réel les dons collectés via HelloAsso, directement sur un live (Twitch, YouTube, etc.) ou sur un site web. Il fonctionne grâce à des widgets personnalisables (barre de progression, alertes, carte de don) que vous intégrez dans votre logiciel de streaming (OBS, Streamlabs…) ou sur votre site via une iframe.
- Créer un compte et se connecter
- Tableau de bord
- Gérer les événements
- Gérer les streams
- Les widgets
- Intégrer un widget dans OBS / sur votre site
- Mode test
- FAQ / Résolution de problèmes
- Rendez-vous sur la page d'inscription.
- Renseignez votre adresse email et un mot de passe.
- Le mot de passe doit respecter les règles suivantes :
- Au moins 8 caractères
- Au moins une majuscule et une minuscule
- Au moins un chiffre
- Au moins un caractère spécial
- Cliquez sur S'inscrire.
- Un email de confirmation est envoyé à votre adresse. Cliquez sur le lien pour activer votre compte.
ℹ️ Le lien de vérification est valable 1 heure. Si vous ne le recevez pas, vérifiez vos spams.
Connectez-vous avec votre email et votre mot de passe. Si votre email n'a pas encore été vérifié, un nouvel email de confirmation vous sera renvoyé automatiquement.
- Cliquez sur Mot de passe oublié sur la page de connexion.
- Entrez votre adresse email.
- Vous recevrez un email contenant un lien pour définir un nouveau mot de passe.
Une fois connecté, vous accédez au tableau de bord qui présente deux onglets principaux :
- Événements : liste de vos événements (campagnes multi-streams).
- Streams : liste de vos streams individuels (chacun lié à un formulaire de don HelloAsso).
Depuis ce tableau de bord, vous pouvez créer, éditer et supprimer vos événements et streams.
Un événement regroupe plusieurs streams. Son compteur agrège en temps réel la somme de tous les dons de ses streams rattachés. C'est utile pour suivre une campagne de collecte globale composée de plusieurs initiatives.
- Dans l'onglet Événements, cliquez sur Créer un événement.
- Renseignez un titre.
- Validez.
Depuis la page d'édition d'un événement, vous pouvez :
- Modifier le titre.
- Définir un objectif de collecte (en €).
- Voir la liste des streams rattachés et en créer de nouveaux directement.
- Configurer les widgets (barre de don, carte de don).
- Activer le mode test (voir section dédiée).
Cliquez sur le bouton de suppression depuis le tableau de bord. Une confirmation vous sera demandée.
Un stream est lié à un formulaire de don HelloAsso. Il récupère en temps réel les dons effectués sur ce formulaire pour alimenter les widgets.
Deux méthodes sont proposées :
- Cliquez sur Nouveau stream puis choisissez Depuis mon association.
- Cliquez sur Connecter mon asso : une fenêtre d'autorisation HelloAsso s'ouvre.
- Connectez-vous à votre compte HelloAsso et autorisez l'accès.
- Une fois connecté, vos formulaires de don sont automatiquement listés.
- Sélectionnez le formulaire souhaité, donnez un titre au stream, puis validez.
- Choisissez Manuellement.
- Renseignez :
- Le slug de l'association (la partie après
helloasso.com/associations/). - Le slug du formulaire de don (la partie après
/formulaires/don/). - Un titre pour le stream.
- Le slug de l'association (la partie après
- Validez.
- Événement parent (optionnel) : rattacher le stream à un événement existant.
- Appliquer le style de l'événement parent : copie automatiquement le style du widget barre de don de l'événement vers le stream.
Depuis la page d'édition d'un stream, vous pouvez :
- Modifier le titre et l'objectif (en €).
- Lier / délier un événement parent : rattacher le stream à un événement ou l'en détacher.
- Accéder au formulaire HelloAsso lié via le lien direct.
- Configurer les 3 types de widgets : barre de don, alerte, carte de don.
- Activer le mode test.
Cliquez sur le bouton de suppression depuis le tableau de bord.
Chaque stream dispose de 3 widgets personnalisables. Les événements disposent de 2 widgets (barre de don et carte de don). Tous se mettent à jour automatiquement en temps réel.
Une barre de progression horizontale qui affiche le montant collecté par rapport à l'objectif.
Options de personnalisation :
| Option | Description |
|---|---|
| Couleur du texte primaire | Couleur du texte affiché sur le fond de la barre |
| Couleur du texte secondaire | Couleur du texte affiché sur la partie remplie |
| Texte | Texte central affiché sur la barre (ex : « Objectif : Sauvons les forêts ! ») |
| Couleur de la barre | Couleur de la partie remplie (progression) |
| Couleur du fond | Couleur d'arrière-plan de la barre |
Un aperçu en direct est affiché sous le formulaire de configuration.
Disponible sur : Streams et Événements.
Une alerte animée qui s'affiche à chaque nouveau don reçu. Idéal pour un overlay de stream.
Options de personnalisation :
| Option | Description |
|---|---|
| Image | Image affichée lors de l'alerte (GIF animé recommandé) |
| Durée de l'alerte | Temps d'affichage en secondes |
| Son | Fichier audio joué lors de l'alerte |
| Volume du son | Volume de 0 à 100 |
| Template de message | Le texte affiché lors du don, avec des variables dynamiques |
Variables disponibles dans le template de message :
{pseudo}— le pseudo du donateur{amount}— le montant du don{message}— le message laissé par le donateur
Vous pouvez utiliser du HTML pour formater le texte du template.
Un bouton Prévisualiser permet de tester l'alerte directement depuis la page de configuration.
Disponible sur : Streams uniquement.
Une carte visuelle élégante qui affiche la progression de la collecte avec une image, un titre, une description et une barre de progression. Idéale pour une intégration sur un site web ou en superposition de stream.
Options de personnalisation :
| Option | Description |
|---|---|
| Image de fond | Image affichée à gauche de la carte |
| Tag | Étiquette courte (ex : « URGENCE NATURE ») |
| Titre | Titre principal de la carte |
| Description | Texte descriptif de la campagne |
| Couleurs | Fond de la carte, texte, barre de progression, fond de la barre, texte du tag, fond du tag |
La carte affiche automatiquement :
- Le montant collecté
- Le pourcentage de l'objectif atteint
- Le nombre de donateurs
- L'objectif en euros
Un aperçu en direct est affiché sous le formulaire de configuration.
Disponible sur : Streams et Événements.
- Dans la page d'édition de votre stream ou événement, repérez l'URL du widget souhaité (affichée sous chaque widget).
- Dans OBS, ajoutez une source Navigateur (Browser Source).
- Collez l'URL du widget.
- Ajustez la taille selon vos besoins :
- Barre de don : largeur ~800 px, hauteur ~60 px
- Alerte : largeur ~600 px, hauteur ~400 px
- Carte de don : largeur ~720 px, hauteur ~340 px
Pour le widget carte de don, un code iframe prêt à copier est disponible dans la page de configuration. Cliquez sur 📋 Copier pour l'ajouter à votre site.
Exemple de code généré :
<iframe src="https://votre-domaine.com/widget-stream/GUID/card"
width="720" height="340" frameborder="0"
style="border:none;overflow:hidden;"
scrolling="no" allowtransparency="true"></iframe>💡 Vous pouvez aussi utiliser directement l'URL de n'importe quel widget dans une iframe.
Le mode test permet de simuler des dons sans passer par HelloAsso. C'est utile pour vérifier le bon fonctionnement de vos widgets avant un live.
- Dans la page d'édition d'un stream ou d'un événement, repérez la section 🧪 Mode test.
- Cliquez sur Activer le mode test.
Une fois le mode test activé, un formulaire de simulation apparaît :
- Pseudo : le pseudo du donateur fictif (par défaut : « Testeur »).
- Montant : le montant en euros du don simulé.
- Message : le message associé au don.
Cliquez sur 💸 Simuler un don pour envoyer le don fictif. Les widgets se mettent à jour en temps réel.
Cliquez sur 🔄 Remettre à zéro pour réinitialiser le compteur de test à 0 €.
Cliquez sur ❌ Désactiver le mode test. Le montant test est automatiquement remis à zéro et les widgets repassent en mode réel (données HelloAsso).
⚠️ En mode test, aucun appel à l'API HelloAsso n'est effectué. Les widgets affichent uniquement les montants simulés.
Le token d'accès à l'API HelloAsso a expiré. Pour le renouveler :
- Depuis le tableau de bord, notez le slug de l'association concernée.
- Reconnectez l'association en créant un nouveau stream via la méthode Depuis mon association, ou demandez à un administrateur de relancer l'autorisation OAuth.
- Vérifiez votre dossier spam / indésirables.
- Essayez de vous reconnecter : un nouvel email sera envoyé automatiquement si votre adresse n'est pas encore vérifiée.
- Le lien expire après 1 heure. Si le délai est dépassé, tentez une nouvelle connexion pour recevoir un nouveau lien.
- Vérifiez que le stream n'est pas en mode test (les widgets afficheraient alors les montants simulés et non les vrais dons).
- Vérifiez que le token de l'association est valide (pas de badge
⚠️ dans le tableau de bord). - Les widgets disposent d'un cache de quelques secondes. Patientez un instant avant que les nouveaux dons n'apparaissent.
Oui, c'est précisément le rôle des événements. Chaque stream est lié à un formulaire de don différent, et l'événement agrège la somme de tous les dons de ses streams.
Oui. Utilisez le code iframe fourni dans la page de configuration du widget carte, ou copiez directement l'URL du widget dans une iframe personnalisée.