# Intégration

Le bloc **Intégration** affiche dans votre page une vidéo, une publication, un lecteur audio, une carte, une présentation, un formulaire ou un agenda d’un fournisseur autorisé. Il part de son adresse ou de son code d’intégration. Cette page décrit les gestes pour intégrer, les fournisseurs acceptés, le format du cadre et ce que le fournisseur apprend de vos visiteurs.

## Intégrer un contenu

Trois gestes posent un bloc **Intégration**.

| Geste | Résultat |
| --- | --- |
| Coller l’adresse seule dans un paragraphe vide | Le paragraphe devient un bloc **Intégration**. |
| Coller dans la page le code d’intégration du fournisseur, celui de **Partager** puis **Intégrer** sur YouTube par exemple | Le bloc **Intégration** garde l’adresse du code. |
| Insérer le bloc depuis l’inserteur | Le bloc attend une adresse. Les étapes suivantes détaillent ce geste. |

1. Dans l’éditeur, ouvrez l’inserteur et choisissez **Intégration**, ou cherchez `vidéo`, `youtube` ou `carte`. [Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/) détaille les façons d’insérer un bloc.
2. Dans le champ **Adresse de l’intégration**, collez l’adresse ou le code d’intégration d’un fournisseur autorisé, puis sortez du champ. Le champ ne garde que l’adresse d’un code d’intégration.
3. Si l’adresse est acceptée, le contenu s’affiche dans le bloc.
4. Remplissez le **Titre (accessibilité)**, par exemple « Vidéo de présentation » ou « Plan d’accès ».

![L’inspecteur d’un bloc Intégration, avec les seuls onglets Réglages et Styles : le champ Adresse de l’intégration et son aide, puis le champ Titre (accessibilité) et son aide.](https://static.lovelyrender.com/uploads/2026/10/904-doc-blocs-integration.png)

Le code d’une carte OpenStreetMap ou d’une publication de X, de TikTok ou de Bluesky porte autre chose qu’un cadre. Collez-le dans le champ **Adresse de l’intégration**.

## Les fournisseurs acceptés

Quand la colonne **À coller** indique une adresse, l’adresse de la page suffit : le site en tire l’adresse du lecteur du fournisseur. Pour les autres, collez le code d’intégration que donne le fournisseur sous **Intégrer**, ou sous **Partager** puis **Intégrer**.

| Famille | Fournisseurs | À coller |
| --- | --- | --- |
| Vidéo | YouTube, Vimeo, Dailymotion, TikTok, Loom, Wistia | L’adresse de la vidéo. |
| Vidéo | TED, VideoPress | Le code d’intégration de la vidéo. |
| Réseaux sociaux | X, LinkedIn, Instagram, Facebook, Pinterest | L’adresse de la publication. |
| Réseaux sociaux | Bluesky | Le code d’intégration de la publication. |
| Musique et podcasts | Spotify, SoundCloud, Deezer, Apple Music, Apple Podcasts | L’adresse du titre, de l’album, de la liste ou de l’épisode. |
| Musique et podcasts | Mixcloud, Bandcamp, Ausha, Acast | Le code d’intégration du lecteur. |
| Cartes et visites | Google Maps et Google My Maps, OpenStreetMap, uMap | Le code d’intégration de la carte. |
| Cartes et visites | Matterport | L’adresse de la visite. |
| Cartes et visites | Kuula | Le code d’intégration de la visite. |
| Cartes et visites | Doterr, la carte des lieux de médiation numérique de la Région Centre-Val de Loire | L’adresse de la carte. |
| Présentations et documents | Google Drive | L’adresse du fichier, partagé avec toute personne disposant du lien. |
| Présentations et documents | Google Docs, Sheets, Slides | Le code de **Fichier** > **Partager** > **Publier sur le Web**. |
| Présentations et documents | Canva, Genially, Issuu, Calaméo, Scribd, Speaker Deck, SlideShare | Le code d’intégration du document. |
| Formulaires | Typeform, Google Forms | L’adresse du formulaire. |
| Formulaires | Tally, Jotform, Microsoft Forms | Le code d’intégration du formulaire. |
| Réservation et agendas | Calendly | L’adresse de la page de réservation. |
| Réservation et agendas | Google Agenda (agenda ou page de réservation), Zenchef | Le code d’intégration de l’agenda ou du module de réservation. |

Une adresse raccourcie par le fournisseur, comme `vm.tiktok.com`, `pin.it` ou `forms.gle`, n’est pas reconnue : collez l’adresse complète ou le code d’intégration.

## Quand l’adresse est refusée

Le bloc garde l’adresse et affiche **Ce type d’adresse n’est pas accepté. Contactez l’équipe technique si cela vous paraît anormal.** Écrivez-nous pour demander un fournisseur. Nous l’ajoutons s’il sert ses pages en HTTPS, se laisse intégrer et reste stable. Une carte doit avoir son équivalent en texte dans la page, une adresse ou une liste de lieux.

Le bouton **Insérer comme un simple lien** remplace le bloc par un paragraphe qui porte un lien vers l’adresse.

**Attention :** Toute adresse collée seule dans un paragraphe vide devient un bloc **Intégration**, même celle d’une page quelconque. Pour en faire un lien, cliquez sur **Insérer comme un simple lien**, ou collez l’adresse au milieu d’une phrase.

## Onglet Réglages

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Adresse de l’intégration** | L’adresse ou le code d’intégration du contenu. | Vide |
| **Titre (accessibilité)** | Le nom du contenu, annoncé par les lecteurs d’écran. Vide, il est remplacé par un libellé générique qui ne dit rien au visiteur. | Vide |
| **Ancre HTML** (panneau **Avancé**) | Un identifiant pour pointer le bloc avec une adresse terminée par `#`. | Vide |

## Onglet Styles

Le bloc se règle dans les états **Par défaut**, **Survol** et **Actif**. Pour une vidéo, il prend le format du lecteur : 16/9, ou 9/16 pour TikTok. Il affiche un instant **Proportions réglées automatiquement à** suivi du format. Pour un agenda, une carte, une publication ou un lecteur audio, réglez la hauteur ou les proportions vous-même.

| Panneau | Guide |
| --- | --- |
| **Taille et espacement** | La largeur, la hauteur et les **Proportions**, voir [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/). |
| **Couleurs** | [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/) |
| **Images de fond** | [Poser un arrière-plan](https://lovelyrender.com/fr/documentation/arriere-plans/) |
| **Bordures**, **Effets**, **Transitions** | [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/) |

Le bloc n’a pas d’onglet **Animations** : pour faire apparaître une vidéo au défilement, animez le [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/) qui l’entoure.

## La vie privée des visiteurs

Un contenu intégré est demandé au fournisseur par le navigateur du visiteur. Pour tous les visiteurs et sans réglage, le site réduit ce que cette demande révèle.

| Information | Reçue | Détail |
| --- | --- | --- |
| Le compte du visiteur | Non | Le contenu s’ouvre sans les cookies du visiteur : le fournisseur ne rattache pas la visite à son compte Google, Meta ou Spotify. |
| L’adresse de votre site | Non | Le fournisseur voit un site Lovely Render, le même pour tous les sites. |
| L’adresse IP et le navigateur | Oui | Dès que le lecteur se charge, quand le visiteur approche du bloc en faisant défiler la page. |

Le lecteur ne connaît pas le compte du visiteur. Spotify ne joue que des extraits de 30 secondes et une vidéo YouTube réservée aux personnes connectées ne se lit pas. Les publications Instagram ou Facebook s’affichent sans mentions J’aime ni commentaires.

**Conseil :** Pour qu’aucun tiers ne voie la visite, déposez votre vidéo dans un bloc [Média](https://lovelyrender.com/fr/documentation/bloc-media/) : elle est servie par votre site.

## Sur téléphone

Un format réglé par les proportions garde sa forme à toutes les largeurs : une vidéo en 16/9 reste en 16/9 sur un téléphone. Une hauteur fixe reste la même quelle que soit la largeur.

## Accessibilité

Le **Titre (accessibilité)** est le nom que les lecteurs d’écran donnent au contenu intégré. Remplissez-le. Le panneau **Accessibilité** de l’éditeur le rappelle. [Vérifier l’accessibilité de vos pages](https://lovelyrender.com/fr/documentation/accessibilite/) décrit le panneau.

## Limites

- Seuls les fournisseurs de la liste sont acceptés.
- Un bloc sans adresse acceptée n’affiche rien sur le site.
- Une vidéo copiée depuis un autre site qui l’héberge lui-même arrive en bloc [Média](https://lovelyrender.com/fr/documentation/bloc-media/) vide : déposez-y votre fichier.

## Voir aussi

- [Média](https://lovelyrender.com/fr/documentation/bloc-media/)
- [Document PDF](https://lovelyrender.com/fr/documentation/bloc-pdf/)
- [Envoyer vos photos et vos vidéos](https://lovelyrender.com/fr/documentation/images-et-videos/)