# Intégration & Popups

Intégrez votre formulaire sur un site web ou affichez-le en superposition popup.

## Intégration & Popups

Intégrez votre formulaire dans n’importe quelle page web sous forme d’intégration inline ou de popup en superposition. Vous le configurez dans le panneau Partager et collez un seul extrait dans votre site.

<p>
  Les deux extraits sont construits à partir du lien de partage que vous avez sélectionné : ils héritent donc de l’expiration, de la limite
  de réponses, du domaine personnalisé et des statistiques de ce lien. Créez d’abord le lien — voir{' '}
  <a href="/fr/sharing-publishing/sharing-embedding">liens de partage</a>. Les valeurs par défaut des paramètres de requête font exception :
  elles ne sont pas ajoutées aux extraits d’intégration ou de popup.
</p>

<h2 id="embed">Intégration inline</h2>

<p>
  Une intégration inline place votre formulaire directement dans une page via un iframe. Ouvrez le panneau <strong>Partager</strong>,
  cliquez sur la carte <strong>Intégrer</strong>, et copiez l’extrait généré dans le HTML de votre site.
</p>

<h3 id="embed-layout">Mise en page</h3>

<h3 id="embed-display">Affichage</h3>

<p>
  Cliquez sur <strong>Afficher le code</strong> pour voir le HTML généré. Utilisez <strong>Copier le code d’intégration</strong> pour le
  copier, puis collez-le dans votre site. <strong>Rétablir les valeurs par défaut</strong> restaure tous les réglages.
</p>

<h3 id="embed-snippet">Ce que contient l’extrait</h3>

<p>
  Avec l’ajustement automatique désactivé, l’extrait est un simple iframe qui pointe vers votre lien de partage avec <code>?embed=1</code>{' '}
  ajouté. Les options d’affichage ajoutent leurs propres paramètres : <code>hideCover=1</code>, <code>hideLogo=1</code>, et{' '}
  <code>theme=dark</code> ou <code>theme=light</code>.
</p>

```html
<iframe src="https://form.formstep.io/Abc12XYz?embed=1" width="100%" height="600" style="border: none;"></iframe>
```

<p>
  Avec l’ajustement automatique activé, l’iframe est enveloppé dans un <code>div</code> suivi d’un script. Le formulaire intégré envoie un
  message <code>formbase:resize</code> à chaque changement de hauteur ; le script vérifie l’origine du message et la frame émettrice, puis
  ajuste la hauteur de l’iframe. Rien d’autre sur votre page n’est touché, et aucun script externe n’est chargé.
</p>

<h2 id="popup">Popup</h2>

<p>
  Un popup affiche votre formulaire en superposition sur votre page. Ouvrez le panneau <strong>Partager</strong>, cliquez sur la carte{' '}
  <strong>Popup</strong>, configurez vos options et collez l’extrait de code généré dans votre site.
</p>

<h3 id="popup-trigger">Déclencheur</h3>

<p>Choisissez comment le popup s’ouvre :</p>

<h3 id="popup-layout">Mise en page</h3>

<h3 id="popup-display">Affichage</h3>

<h3 id="popup-styling">Style du popup</h3>

<h3 id="popup-behavior">Comportement</h3>

<p>
  Cliquez sur <strong>Afficher le code</strong> pour voir l’extrait généré. Utilisez{' '}
  <strong>Copier le code de la fenêtre contextuelle</strong> pour le copier, puis collez-le dans votre site.{' '}
  <strong>Rétablir les valeurs par défaut</strong> restaure tous les réglages.
</p>

<h3 id="popup-snippet">Ce que contient l’extrait</h3>

<p>
  L’extrait du popup est un unique bloc <code>{'<script>'}</code> autonome. Il construit la superposition, le bouton de fermeture et
  l’iframe en JavaScript pur au moment où le popup s’ouvre — rien n’est ajouté à votre page avant cela, aucune feuille de style n’est
  injectée, et aucun script externe n’est chargé. Le commentaire sous le script vous indique le nom de la fonction à appeler :
</p>

```html
<!-- Call window.openFormbasePopup_Abc12XYz() to open the form popup -->
```

<p>
  Un tiret dans un slug personnalisé devient un underscore dans le nom de la fonction, car un tiret n’est pas valide dans un identifiant
  JavaScript. Copiez le nom depuis le commentaire plutôt que de le déduire vous-même.
</p>

<h2 id="color-scheme">Thème de couleurs</h2>

<p>
  Les intégrations et les popups partagent les mêmes trois options, et toutes deux remplacent le thème propre du formulaire à l’intérieur du
  cadre :
</p>

<ul>
  <li>
    <strong>Laisser l’utilisateur choisir</strong> — par défaut. Le formulaire suit la préférence sombre/clair du système d’exploitation ou
    du navigateur du visiteur.
  </li>
  <li>
    <strong>Mode sombre</strong> — force le mode sombre quelle que soit la préférence du visiteur.
  </li>
  <li>
    <strong>Mode clair</strong> — force le mode clair quelle que soit la préférence du visiteur.
  </li>
</ul>

> 💡 **Correspondre au thème de votre site**
> <p>
>     Si votre site est toujours sombre, réglez l’intégration ou le popup sur Mode sombre pour que le formulaire s’intègre harmonieusement. Si
>     votre site respecte la préférence du visiteur, choisissez Laisser l’utilisateur choisir. Pour thématiser le formulaire lui-même, voir{' '}
>     <a href="/fr/branding-domains/appearance-theming">apparence et thèmes</a>.
>   </p>

<h2 id="next-steps">Prochaines étapes</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Liens de partage](/fr/sharing-publishing/sharing-embedding) — Créer et gérer des URL de liens de partage
  - [Codes QR](/fr/sharing-publishing/sharing-embedding#qr-codes) — Générer et placer des codes scannables
  - [Domaines personnalisés](/fr/branding-domains/custom-domains) — Servir des formulaires depuis votre propre domaine
  - [Apparence et thèmes](/fr/branding-domains/appearance-theming) — Thème, couverture, logo, mode sombre
</div>