Documentation Charitable

Apprenez à tirer le meilleur parti de Charitable grâce à des instructions claires, étape par étape.

Ressources populaires

Commencez ici

Gestion des donateurs

Dons récurrents

Collecte de fonds pair-à-pair

Intégrations

Extensions

Bouton de don modal de campagne

Le bouton de don modal (également appelé bouton de campagne modal) vous permet de placer un bouton qui ouvre un formulaire de don dans une fenêtre contextuelle modale - ou qui renvoie directement à la page de don de la campagne - n'importe où sur votre site. Il est disponible en tant que bloc WordPress et raccourci, et fait partie du système de dons modaux universels de Charitable.

Table des matières

Exigences

  • Charitable Pro : Version 1.8.13 ou supérieure
  • WordPress : Version 6.2 ou supérieure
  • PHP : Version 7.4 ou supérieure

Démarrage

Bloc : Modifiez une page ou un article dans l'éditeur de blocs → ajoutez un bloc → recherchez Bouton de don modal ou Charitable → insérez le bloc → choisissez une campagne et configurez le bouton dans la barre latérale.

Raccourci : Utilisez [charitable_modal_button campaign_id="123"] dans n'importe quel article, page ou widget. Remplacez 123 par l'ID de votre campagne. Vous pouvez ajouter des attributs facultatifs pour le texte du bouton et les classes CSS (voir Raccourci).

Avantages clés

  • Placer n'importe où : Boutons dans les barres latérales, les pieds de page, les grilles de campagne (par exemple, Vitrine de campagne) ou le contenu intégré.
  • Modal ou lien : Le bloc vous permet de choisir « Fenêtre contextuelle modale » (formulaire de don dans une fenêtre contextuelle) ou « Lien vers la page de don » (lien normal). Le raccourci est uniquement modal.
  • Pas de rechargement de page : En mode modal, le formulaire se charge via AJAX et s'ouvre dans une superposition ; les donateurs restent sur la même page jusqu'à ce qu'ils soumettent ou ferment.
  • Contrôle du sélecteur de campagne : Lorsque le sélecteur de campagne est activé globalement, vous pouvez le masquer pour un bouton spécifique afin que le modal n'affiche que la campagne choisie.

Bloc (Éditeur)

Le bloc est enregistré sous le nom Bouton de don modal (charitable/modal-donate-button) dans la catégorie Widgets.

Paramètres du bloc (barre latérale)

Paramètres

  • Campagne – Obligatoire. Sélectionnez la campagne que ce bouton utilisera pour les dons.
  • Texte du bouton – Libellé du bouton (par défaut : « Faire un don maintenant »).
  • Action du bouton
    • Fenêtre contextuelle modale – Le clic ouvre le formulaire de don dans une fenêtre modale (par défaut).
    • Lien vers la page de don – Le clic renvoie à la page de don de la campagne.
  • Ouvrir dans un nouvel onglet – Uniquement lorsque l'action du bouton est « Lien vers la page de don ». Ouvre la page de don dans un nouvel onglet.
  • Masquer le sélecteur de campagne – Uniquement lorsque l'action du bouton est « Fenêtre contextuelle modale ». Lorsque cette option est activée, le menu déroulant du sélecteur de campagne est masqué dans ce modal, même s'il est activé dans les paramètres de Charitable.

Couleurs

  • Arrière-plan – Couleur d'arrière-plan du bouton.
  • Texte – Couleur du texte du bouton.
  • Bordure – Couleur de la bordure du bouton.

Survol

  • Arrière-plan – Arrière-plan du bouton au survol.
  • Texte – Couleur du texte du bouton au survol.

Taille et espacement

  • Largeur du bouton – par ex. auto, 100%, 200px.
  • Taille de la police – par ex. 16px, 1.2em.
  • Rayon de bordure – par ex. 4px, 25px.
  • Rembourrage horizontal – par ex. 24px, 2em.
  • Rembourrage vertical – par ex. 12px, 1em.

Avancé

  • Classe CSS personnalisée – Classe(s) supplémentaire(s) sur l'élément du bouton.
  • Classe CSS de la modale – Uniquement lorsque l'Action du bouton est « Fenêtre modale ». Classe(s) supplémentaire(s) sur le conteneur de la modale (la classe de modale par défaut est charitable-universal-modal).

L'éditeur affiche un aperçu du bouton et du nom de la campagne sélectionnée. Sur le frontend, le bloc produit le même comportement que le shortcode (en mode modale) ou un lien stylisé (en mode lien).

Raccourci

Nom du shortcode : charitable_modal_button

Attribut requis

  • campaign_id – L'ID de la campagne. Le bouton ouvrira le formulaire de don pour cette campagne dans une modale.

Attributs optionnels

AttributDescriptionDéfaut
texteLibellé du bouton.« Faire un don maintenant »
classeClasse(s) CSS supplémentaire(s) pour le bouton.–
modal_classClasse(s) CSS supplémentaire(s) pour le conteneur de la modale.–

Exemples

[charitable_modal_button campaign_id="42"]
[charitable_modal_button campaign_id="42" text="Give to this campaign"]
[charitable_modal_button campaign_id="42" class="my-donate-btn" modal_class="my-modal"]

Remarque : Le shortcode ouvre toujours le formulaire de don dans une modale. Pour lier plutôt vers la page de don, utilisez le bloc avec l'Action du bouton définie sur « Lien vers la page de don », ou utilisez le lien/shortcode de don standard (par ex. [charitable_donate_button] avec la campagne et le comportement de lien appropriés).

Comment fonctionne le modal

  1. Déclencheur : Le bouton a la classe charitable-modal-trigger et un attribut data-campaign-id. Le script de la Modale Universelle écoute les clics sur cette classe.
  2. Chargement : Au clic, le script charge le formulaire de don via AJAX pour la campagne donnée et l'injecte dans la superposition de la modale.
  3. Affichage : La fenêtre modale s'ouvre (en utilisant la même superposition et la même structure que les fenêtres modales existantes de Charitable). Les donateurs peuvent remplir le formulaire ou fermer la fenêtre modale.
  4. Sélecteur de campagne : Si la fonctionnalité de sélecteur de campagne est activée dans les paramètres de Charitable et n'est pas remplacée par le bouton (voir ci-dessous), le formulaire peut afficher une liste déroulante pour changer de campagne. Les boutons individuels peuvent la masquer de force avec l'option « Masquer le sélecteur de campagne » du bloc ou en passant data-hide-campaign-selector lors de la création du bouton dans le code.

La fenêtre modale utilise le Système universel de dons modaux (Charitable Pro 1.8.13+), elle fonctionne donc de manière cohérente, que le bouton provienne du bloc, du shortcode ou d'autres fonctionnalités (par exemple, les boutons de don rapide dans le bloc Vitrine des campagnes).

Sélecteur de campagne dans le modal

  • Paramètre global : Paramètres Charitable → Général → Formulaire de don → Sélecteur de campagne. Lorsqu'il est activé, les formulaires de don peuvent afficher une liste déroulante « Choisir une campagne ».
  • Remplacement par bouton (bloc uniquement) : Dans le bloc Bouton de don modal, lorsque l'Action du bouton est « Fenêtre modale », activez Masquer le sélecteur de campagne pour masquer cette liste déroulante pour la fenêtre modale de ce bouton. Utile lorsque le bouton est destiné à une seule campagne et que vous ne souhaitez pas le sélecteur dans la fenêtre contextuelle.
  • Shortcode : Le shortcode n'expose pas d'attribut « masquer le sélecteur de campagne ». Pour le masquer pour un bouton de shortcode, vous devrez ajouter une classe CSS personnalisée et utiliser JavaScript pour définir data-hide-campaign-selector sur le déclencheur, ou utiliser le filtre charitable_modal_donate_button_html pour ajouter l'attribut de données.

Dépannage

Le bouton ne fait rien lorsqu'il est cliqué

  • Confirmez que l'ID de la campagne est valide et que la campagne est publiée.
  • Assurez-vous que le script de la fenêtre modale universelle est chargé (pas d'erreurs de script ou de suppression agressive des scripts Charitable sur cette page).
  • Vérifiez la console du navigateur pour les erreurs JavaScript lors du clic sur le bouton.

La fenêtre modale ne s'ouvre pas ou le formulaire ne se charge pas

  • Vérifiez que vous utilisez Charitable Pro 1.8.13+ et qu'aucun plugin/thème ne bloque charitable-universal-modal ou la requête AJAX qui charge le formulaire.
  • Testez avec un thème par défaut et les autres plugins désactivés pour exclure les conflits.
  • Assurez-vous que la campagne peut recevoir des dons (par exemple, pas terminée, pas entièrement financée si cela bloque les dons).

Le bouton a une apparence incorrecte ou le style est manquant

  • Utilisez les options Couleurs, Taille et espacement et Avancé (classe personnalisée) du bloc pour ajuster l'apparence.
  • Pour le shortcode, ajoutez une class et stylisez cette classe dans votre thème ou CSS personnalisé. Le déclencheur utilise la classe charitable-modal-trigger plus toutes les classes que vous passez.

« Lien vers la page de don » non disponible

  • Cette option existe uniquement sur le bloc. Le shortcode [charitable_modal_button] est uniquement modal. Pour un simple lien vers la page de don, utilisez le bloc avec Action du bouton = « Lien vers la page de don » ou le lien de don de votre thème/plugin pour cette campagne.

Ressources pour les développeurs

PHP

  • Fonction de modèle : charitable_get_modal_donate_button( $campaign_id, $args ) – Renvoie le HTML du bouton. Utilisé par le shortcode et le bloc.
  • Assistant d'affichage : charitable_modal_donate_button( $campaign_id, $args ) – Affiche le même HTML.

Arguments pour charitable_get_modal_donate_button :

CléTypeDéfautDescription
textechaîne de caractères« Faire un don maintenant »Libellé du bouton.
classechaîne de caractèrescharitable-modal-triggerClasses CSS pour le bouton.
modal_classchaîne de caractèrescharitable-universal-modalClasse CSS pour le conteneur modal.
button_tagchaîne de caractèresboutonbutton ou a.
stylechaîne de caractères''Chaîne de style en ligne pour le bouton.
hide_campaign_selectorboolfauxLorsqu'il est vrai, ajoute data-hide-campaign-selector="1" pour que la fenêtre modale masque le sélecteur de campagne.

Filtres

  • charitablemodaldonatebuttonshortcode_output – Filtre la sortie du shortcode. Paramètres : $output, $args.
  • charitablemodaldonatebuttonhtml – Filtre le HTML du bouton de charitable_get_modal_donate_button. Paramètres : $button_html, $campaign_id, $args.

CSS / HTML

  • Bouton : Le déclencheur a la classe charitable-modal-trigger et les attributs data-campaign-id, éventuellement data-modal-class, data-hide-campaign-selector.
  • Wrapper de bloc : .wp-block-charitable-modal-donate-button.
  • Modal : La superposition et le conteneur modal sont créés par le script Universal Modal ; la fenêtre modale utilise la classe que vous passez (par exemple charitable-universal-modal).

Historique des versions

VersionModifications
1.8.13Bloc et shortcode Modal Donate Button ; Système de dons Universal Modal ; le bloc prend en charge Popup Modal vs Lien, style, Masquer le sélecteur de campagne ; charitable_get_modal_donate_button gagne style et hide_campaign_selector.

Pour les paramètres globaux du formulaire de don et du sélecteur de campagne, voir Sélecteur de campagne. Pour intégrer des formulaires de don complets (pas dans une fenêtre modale), voir la documentation du formulaire de don et du shortcode de campagne.

Vous avez encore des questions ? Nous sommes là pour vous aider !

Soumettre un ticket de support
Contactez-nous

Dernière modification :

Quoi de neuf dans Charitable

Voir les dernières mises à jour
🔔 Abonnez-vous pour recevoir nos dernières mises à jour
📧 Abonnez-vous aux e-mails

Abonnement par e-mail

Rejoignez notre newsletter

Nous ne vous enverrons pas de spam. Nous envoyons un e-mail uniquement lorsque nous pensons qu'il vous sera réellement utile. Désabonnez-vous à tout moment !

ambassadeurs Nouveau

🖨️ Présentation des prospectus et affiches : collectez des fonds loin de l'écran !

Une grande partie de la collecte de fonds de pair à pair se fait loin d'un écran : à la ligne d'arrivée d'un 5 km, sur un panneau d'affichage d'école, dans une cuisine de bureau. Charitable Ambassadors 3.4.7 ajoute 2 imprimables, un prospectus de collecte de fonds portant la propre histoire et le code QR de chaque collecteur de fonds, et une affiche de recrutement qui inscrit de nouveaux collecteurs de fonds. Les deux s'ouvrent comme une page Web normale et s'impriment directement depuis le navigateur. Pourquoi c'est important :

  • 🏁 Un prospectus pour chaque collecteur de fonds : Chacun porte la propre photo, histoire et objectif de ce collecteur de fonds, avec un code QR qui ouvre sa page plutôt que votre campagne principale.
  • 📌 Une affiche qui recrute : Elle affiche « Recrutement en cours » au-dessus du nom de votre campagne avec un grand code QR qui ouvre votre formulaire d'inscription, afin que quelqu'un puisse commencer à collecter des fonds sans attendre un lien de votre part.
  • 🪄 Aucun outil de conception nécessaire : Les deux imprimables s'affichent comme une page Web normale et s'impriment depuis le navigateur, sans plugin PDF et sans designer.
  • 📄 2 mises en page de prospectus : « À distribuer » contient l'histoire complète pour donner à vos amis et à votre famille, et « À afficher » contient un court message accrocheur avec 5 languettes détachables pour un panneau d'affichage.
  • 🛡️ Désactivé jusqu'à ce que vous l'activiez : Les prospectus restent désactivés après la mise à jour jusqu'à ce que vous les activiez sous Charitable » Ambassadeurs » Autre » Prospectus, et seul le propriétaire ou un administrateur peut en ouvrir un.

Consultez notre annonce ici.

Amélioration Paiements

💸 Introduction des tarifs échelonnés pour l'allègement des frais : Adaptez la demande au don !

L'allègement des frais pose une courte question à vos donateurs lors du paiement : souhaitez-vous couvrir les frais de traitement de ce don ? Jusqu'à présent, cette question utilisait un taux unique pour chaque don sur une passerelle, de sorte qu'un don de 10 $ et un don de 500 $ se voyaient demander le même pourcentage. L'allègement des frais 1.3.0 vous permet de définir autant de tranches de dons que vous le souhaitez, chacune portant son propre taux. Pourquoi c'est important :

  • 🪙 Plus doux pour les petits dons : Un coût de transaction fixe représente une part beaucoup plus importante d'un don de 10 $ que d'un don de 500 $, les tranches vous permettent donc de demander moins en bas.
  • 🎚️ Autant de tranches que nécessaire : Chaque tranche porte son propre pourcentage et son propre montant fixe, et la tranche supérieure s'exécute sans limite supérieure.
  • 🛑 Un plafond facultatif : Un champ de frais maximum empêche qu'un donateur ne se voie demander plus qu'un nombre que vous choisissez, quel que soit le montant du don.
  • 🔌 Défini par passerelle de paiement : Stripe peut fonctionner avec quatre tranches tandis que Windcave et Payfast restent sur un taux unique, car les tranches appartiennent à une passerelle et non à l'ensemble de votre site.
  • 🛡️ Rien ne change tant que vous ne le décidez pas : Vos taux actuels restent exactement les mêmes jusqu'à ce que vous activiez « Utiliser les tarifs échelonnés » sous Charitable » Paramètres » Avancé » Allègement des frais.

Consultez notre annonce ici.

Dons Amélioration

📊 Votre tableau de bord Pro peut désormais comparer, exporter et évaluer !

La plupart des tableaux de bord de collecte de fonds vous indiquent seulement combien vous avez collecté. Charitable Pro 1.8.19 reconstruit le tableau de bord et la Vue d'ensemble des rapports autour des questions les plus difficiles : si quelque chose ne fonctionne pas, si cette période a été meilleure que la précédente, et quel changement unique ferait la plus grande différence aujourd'hui. Pourquoi c'est important :

  • 📈 Chaque chiffre a une tendance : Choisissez une période et les vignettes ainsi que le graphique bougent ensemble, chaque total étant affiché par rapport à la période précédente.
  • 🗓️ Des graphiques lisibles : Les courtes périodes regroupent les dons jour par jour, tandis que les longues périodes regroupent par semaine ou par mois, de sorte qu'une année complète se lit comme une courbe au lieu d'une ligne plate.
  • 🔀 Comparez n'importe quelles 2 périodes : Pas seulement consécutives, vous pouvez donc demander comment ce mois de décembre s'est comparé au mois de décembre dernier. C'est important car la collecte de fonds est saisonnière.
  • 📤 Exportez le résumé complet : Envoyez la vue d'ensemble complète en CSV ou PDF, prête pour un dossier de conseil d'administration ou un rapport de bailleur de fonds.
  • 🎯 Évaluez votre configuration gratuitement : Faites évaluer votre configuration de collecte de fonds, de sorte que le seul changement à faire ensuite soit celui que vous pouvez voir.

Consultez notre annonce ici.

Fonctionnalité Nouveau

🎟️ Présentation des Événements Caritatifs : Vendez des Billets dans Vos Campagnes !

La plupart des organisations à but non lucratif vendent des billets d'événement dans un outil et collectent des dons dans un autre, ce qui laisse deux ensembles de rapports et une correspondance manuelle à la fin de l'année. Événements Caritatifs réunit les deux, en vendant des billets via les mêmes formulaires de don et passerelles de paiement que vous utilisez déjà dans Charitable. Pourquoi c'est important :

  • 🎟️ Chaque billet est un don : Les ventes de billets passent par la passerelle que vous utilisez déjà et comptent pour l'objectif de la campagne, le tout géré sous Charitable » Événements.
  • 📱 Enregistrement par QR code depuis n'importe quel téléphone : Chaque participant reçoit son propre code QR sur le reçu, et les bénévoles scannent à l'entrée via un lien d'enregistrement qui ne nécessite aucun compte WordPress.
  • 🧾 Reçus prêts pour la déclaration de revenus : Attribuez à chaque type de billet une juste valeur marchande, et Charitable indiquera le montant déductible d'impôt correct sur chaque reçu de donateur.
  • 📋 Détails des participants au moment du paiement : Demandez à chaque invité son choix de repas, sa taille de chemise ou ses besoins d'accès, avec un enregistrement distinct du participant créé pour chaque billet.
  • 🗓️ Blocs et calendriers inclus : Trois blocs d'éditeur ainsi que la prise en charge de Sugar Calendar et The Events Calendar placent vos événements là où les supporters les recherchent déjà.

Consultez notre annonce ici.

ia Nouveau

🚀 Libérez la puissance de l'IA dans Charitable !

Votre assistant IA peut désormais créer, modifier et gérer vos campagnes de collecte de fonds Charitable directement — il suffit de demander. Avec Charitable Pro ajoutant la prise en charge de l'écriture pour l'API WordPress Abilities, des outils comme ChatGPT, Claude et Cursor peuvent gérer des actions administratives complètes en toute sécurité via MCP. Pourquoi c'est important :

  • 🤖 Création de campagnes en langage clair : Demandez à votre assistant un objectif comme « Mettre en place une collecte de fonds pour le refuge avec un objectif de 5 000 $ », et il crée une ébauche de campagne complète avec des paliers de dons suggérés.
  • 🎨 Modifications instantanées du formulaire de don : Ajoutez des champs personnalisés, changez les couleurs des boutons ou réorganisez les éléments sans avoir à modifier les paramètres du formulaire.
  • 📝 Enregistrement des dons hors ligne : Informez votre assistant des dons en espèces ou par chèque, et il associera les e-mails des donateurs et enregistrera les transactions dans votre historique.
  • 🛡️ Sécurité et contrôle par défaut : L'accès en écriture reste désactivé jusqu'à ce qu'il soit activé dans Charitable » Outils » AI MCP, maintenant la sécurité des rapports en lecture seule par défaut.
  • 📜 Journalisation complète des audits : Chaque modification apportée par un assistant IA est suivie dans Charitable » Outils » Journaux, vous savez donc toujours qui (ou quoi) a mis à jour votre site.

Consultez notre annonce ici.

Voir toutes les annonces