> ## Documentation Index
> Fetch the complete documentation index at: https://apidoc.crowdchange.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Aperçu des widgets

> Intégrez les widgets de financement CrowdChange à votre site avec une seule balise de script, étapes d'installation et configuration de l'embed.

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>` :

```html theme={null}
<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).

***

## Étape 3 — Ajouter un widget

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.

```html theme={null}
<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 :

```html theme={null}
<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`).