---
title: "Élément Iframe : intégrer du contenu externe"
description: "Intégrez un contenu externe (carte Google Maps, calendrier, widget de réservation, lecteur audio) sur votre page via une balise iframe."
url: https://docs.vivlab.com/editor/menu/iframe
---

# Iframe

L'élément **Iframe** affiche dans votre page un contenu fourni par un autre service : carte Google Maps, calendrier, outil de réservation ou lecteur audio, par exemple. Il utilise un morceau de code HTML appelé balise `<iframe>`, fourni par ce service.

<DocsScreenshot name="editor-iframe-code" alt="Un exemple de code iframe saisi avant validation." :width="340" :height="240" />

## Code iframe

Collez le code complet (par exemple `<iframe src="https://…"></iframe>`) dans le champ **Code iframe**, puis cliquez sur **Valider**. Vivlab analyse le code et conserve uniquement la partie utile pour optimiser la compatibilité avec votre site.

Si le code n'est pas valide (mauvaise structure, absence d'attribut `src`, autre balise que `<iframe>`), un message d'erreur **Le code inséré n'est pas valide** s'affiche : assurez-vous bien que ce que vous collez est une balise HTML iframe.

Le bouton **Annuler** annule la modification en cours et **Modifier** rouvre le code pour l'éditer à nouveau.

## Style

Le [panneau de style](https://docs.vivlab.com/editor/style/index.md) regroupe l'[arrière-plan](https://docs.vivlab.com/editor/style/background.md), les [bordures](https://docs.vivlab.com/editor/style/border.md), l'[arrondi des angles](https://docs.vivlab.com/editor/style/border-radius.md), l'[ombre](https://docs.vivlab.com/editor/style/box-shadow.md), les [marges intérieures](https://docs.vivlab.com/editor/style/padding.md), les [filtres](https://docs.vivlab.com/editor/style/filter.md) et les [transitions](https://docs.vivlab.com/editor/style/transition.md). Vous pouvez aussi encadrer le bloc dans une [maquette d'appareil](https://docs.vivlab.com/editor/style/mockup.md) pour présenter un site externe dans un MacBook ou un iPhone.

## Cas d'usage courants

### Intégrer une carte Google Maps

Afficher l'emplacement de votre boutique ou de votre adresse de rendez-vous rassure vos visiteurs et les aide à se projeter avant un déplacement.

1. Sur [google.com/maps](https://www.google.com/maps), recherchez votre adresse ou votre établissement.
2. Cliquez sur **Partager** dans la fiche, puis sur l'onglet **Intégrer une carte**.
3. Choisissez la taille souhaitée (petit, moyen, grand, personnalisé), puis cliquez sur **COPIER LE HTML**.
4. Revenez sur votre page Vivlab, ajoutez un élément **Iframe**, collez le code copié dans le champ **Code iframe**, puis cliquez sur **Valider**.

### Intégrer un calendrier de prise de rendez-vous

Pour permettre à vos clients de réserver eux-mêmes un créneau, intégrez un outil de planification externe comme **Calendly**, **Cal.com** ou **Google Agenda** (rendez-vous publics).

1. Créez votre calendrier et définissez vos disponibilités dans l'outil de votre choix.
2. Récupérez le **code d'intégration** (`<iframe>`) proposé par l'outil, souvent depuis un menu **Partager** ou **Intégrer**.
3. Sur votre page Vivlab, ajoutez un élément **Iframe** et collez le code dans **Code iframe**, puis validez.

Vous pouvez aussi remplacer l'intégration par un simple [bouton](https://docs.vivlab.com/editor/menu/button.md) qui ouvre l'URL publique de votre calendrier dans un nouvel onglet.

### Autres usages

L'iframe accepte tout contenu externe valide : lecteur audio (Soundcloud, Spotify), formulaire d'inscription (voir [Formulaire](https://docs.vivlab.com/editor/menu/form.md) pour Tally ou Brevo), widget de réservation (Booking, The Fork), visite virtuelle, etc. Suivez la même logique : récupérez le code `<iframe>` proposé par le service, collez-le, validez.

::: tip Sites qui refusent l'intégration
Certains sites empêchent leur affichage en iframe via leurs en-têtes de sécurité (`X-Frame-Options`). Si le contenu reste blanc une fois collé, c'est généralement parce que le site interdit l'intégration : utilisez plutôt un [bouton](https://docs.vivlab.com/editor/menu/button.md) qui ouvre le lien dans un nouvel onglet.
:::