Iframe

L'élément Iframe intègre du contenu externe (carte Google Maps, calendrier, widget de réservation, lecteur audio…) via une balise HTML <iframe>.

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 regroupe l'arrière-plan, les bordures, l'arrondi des angles, l'ombre, les marges intérieures, les filtres et les transitions. Vous pouvez aussi encadrer le bloc dans une maquette d'appareil 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, 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 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 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.

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 qui ouvre le lien dans un nouvel onglet.