# Diffuser des missions par widget

## Qu'est-ce que le widget API Engagement ?

Le widget permet d'afficher les missions de l'API sur un site web via un iframe (comme les cartes Google Maps sur les sites).

Vous pouvez choisir entre deux formats de widget pour assurer une intégration optimisée sur votre site web. Votre widget peut prendre la forme d'une **page de résultats de missions** ou se présenter plus discrètement dans un **carrousel de missions.**

### Widget - Page de résultats

<figure><img src="https://2489729786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG18aCd8mNuBlmkXXgR3Q%2Fuploads%2FSdeUvWm7TS53kqgZJowD%2Fimage.png?alt=media&#x26;token=cfb5dc82-b520-400d-825a-3f4ab1d95c21" alt=""><figcaption></figcaption></figure>

### Widget - Carrousel de missions

<figure><img src="https://2489729786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG18aCd8mNuBlmkXXgR3Q%2Fuploads%2FjPQ5BQh5a69luqms2C3B%2Fimage.png?alt=media&#x26;token=801f0f5f-93a0-4b2b-b045-e9f5e47cb966" alt=""><figcaption></figcaption></figure>

## Comment intégrer le widget sur votre site web ?

Pour intégrer le widget, vous devez récupérer le code du widget qui se trouve dans le tableau de bord API [Diffuser des missions > Widgets de missions](https://app.api-engagement.beta.gouv.fr/broadcast/widgets).

<figure><img src="https://2489729786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG18aCd8mNuBlmkXXgR3Q%2Fuploads%2FFWqe3cD6dS1NFohX66VE%2Fimage.png?alt=media&#x26;token=ddfc11ae-4342-41e5-a11d-46e252fb1e59" alt=""><figcaption></figcaption></figure>

**Vous trouverez le lien du widget à intégrer en bas de page**

<figure><img src="https://2489729786-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FG18aCd8mNuBlmkXXgR3Q%2Fuploads%2FhBTw5QfYIpJOkpQ8xApX%2Fimage.png?alt=media&#x26;token=091518dd-769b-4cf1-a5c3-898394aabe4e" alt=""><figcaption></figcaption></figure>

***Important** : ce script est conçu pour garantir une intégration optimisée sur votre site web. Le code est de la forme suivant&#x65;**.***

```html
<iframe border="0" frameborder="0" style="display:block; width:100%;" loading="lazy" allowfullscreen allow="geolocation" src="https://xxx.api-engagement.beta.gouv.fr?widget=xxxxxxxxx"></iframe>

```

Après avoir intégré le widget sur votre site, l'utilisateur voit l'ensemble des missions disponibles. Il pourra alors **cliquer sur une mission** présente dans le widget et sera renvoyé vers le site de l'Annonceur où il pourra candidater.

## Pour une intégration réussie

Vous pouvez trouver toutes les bonnes pratiques pour maximiser l'engagement autour de votre widget API Engagement ici :&#x20;

{% embed url="<https://api-engagement.beta.gouv.fr/integration-des-widgets/>" %}

## Pour aller plus loin

Vous pouvez retrouver toutes les **informations** concernant les **moyens de diffusion** ici :&#x20;

{% embed url="<https://api-engagement.beta.gouv.fr/diffuser-les-missions-de-partenaires/#widget>" %}