Aperçu des widgets

Les widgets CrowdChange vous permettent d’intégrer un formulaire de don, une barre de progression ou un thermomètre directement dans votre propre site Web. Vous ajoutez le script d’intégration une seule fois, puis vous insérez autant de widgets que vous le souhaitez — soit de façon déclarative avec un élément <crowdchange>, soit de façon programmatique par l’entremise de l’API JavaScript CrowdChange.

Étape 1 — Activer l’intégration pour votre campagne

Dans votre panneau d’administration CrowdChange, ouvrez la campagne et accédez à Configuration → Intégration. Activez l’option Intégration, enregistrez vos paramètres, puis copiez l’extrait de code fourni à cet endroit.

Étape 2 — Ajouter le script d’intégration

Incluez le script d’intégration une seule fois par page, juste avant la balise fermante </body> :

<script type="module" crossorigin="anonymous" src="https://[your-site-domain]/js/embed/v2"></script>

Remplacez [your-site-domain] par votre domaine CrowdChange, par exemple site.crowdchange.co. Le script enregistre l’élément <crowdchange>, expose l’objet global CrowdChange et initialise automatiquement tous les widgets déjà présents sur la page (ainsi que ceux ajoutés plus tard).

Il existe deux façons d’ajouter un widget.

1. Utiliser l’élément `<crowdchange>`

Placez un élément <crowdchange> n’importe où sur votre page et configurez-le à l’aide d’attributs. Il s’agit de l’approche la plus simple, et elle fonctionne sans avoir à écrire de code JavaScript.

<crowdchange widget="donation-form" fundraiser="16" mode="inline"></crowdchange>

Consultez la page de chaque widget pour connaître la liste complète des attributs pris en charge.

2. Utiliser l’API JavaScript

Pour un contrôle programmatique — par exemple, pour ouvrir un formulaire de don à partir de votre propre bouton — utilisez CrowdChange.createWidget(). Cette méthode renvoie une instance de widget sur laquelle vous pouvez agir; en mode popup, appelez expand() pour l’ouvrir. Pour la première ouverture la plus rapide possible, créez le widget une seule fois lors du chargement de la page et appelez expand() uniquement à l’intérieur de votre gestionnaire de clic :

<button type="button" id="open-donation-widget">Faire un don</button>

<script>
  const donationWidget = CrowdChange.createWidget({
    widget: 'donation-form',
    fundraiser: 16,
    colorPrimary: '#ccc',
    colorBackground: '#e3ae7a',
    language: 'en'
  });

  document
    .getElementById('open-donation-widget')
    .addEventListener('click', () => donationWidget.expand());
</script>

Les noms d’attributs utilisent la notation kebab-case sur l’élément <crowdchange> (par exemple color-primary) et la notation camelCase dans l’API JavaScript (par exemple colorPrimary).

Analyse et suivi

Widgets

Étape 1 — Activer l’intégration pour votre campagne

Étape 2 — Ajouter le script d’intégration

Étape 3 — Ajouter un widget

1. Utiliser l’élément `<crowdchange>`

2. Utiliser l’API JavaScript

​Étape 1 — Activer l’intégration pour votre campagne

​Étape 2 — Ajouter le script d’intégration

​Étape 3 — Ajouter un widget

​1. Utiliser l’élément <crowdchange>

​2. Utiliser l’API JavaScript

Étape 1 — Activer l’intégration pour votre campagne

Étape 2 — Ajouter le script d’intégration

Étape 3 — Ajouter un widget

1. Utiliser l’élément `<crowdchange>`

2. Utiliser l’API JavaScript