Un code d'intégration (on dit aussi code embed) est un court morceau de HTML que vous copiez depuis un service et collez dans une autre page, pour que le contenu du premier s'affiche à l'intérieur de la seconde. La vidéo YouTube dans un article de blog, le bloc d'inscription à la newsletter sur un portfolio, l'agenda de réservation sur le site d'une coach ou le bouton « Acheter » sur une landing page sont presque toujours des intégrations.

Le sujet concerne tous ceux qui construisent leurs pages avec plusieurs outils. Beaucoup de créateurs ont un site sur une plateforme, leurs vidéos sur une autre, leur newsletter ailleurs et leur boutique sur un quatrième service. Le code d'intégration est la colle qui fait tenir ces morceaux ensemble. Comprendre son fonctionnement vous aide à garder des pages rapides, respectueuses de la vie privée et fiables.

Qu'est-ce qu'un code d'intégration ?

C'est un extrait, en général d'une à dix lignes, qui demande au navigateur de charger et d'afficher un contenu venu d'une source extérieure. Le contenu reste hébergé par le service d'origine. Votre page ne contient que l'instruction pour aller le chercher. Si l'original change, l'intégration change aussi.

Il en existe deux grandes formes :

  • L'iframe. Une balise iframe ouvre une petite fenêtre dans votre page et y charge un autre site. Lecteurs vidéo, cartes et beaucoup de formulaires fonctionnent ainsi.
  • Le script. Une balise script charge du JavaScript fourni par le prestataire, qui construit ensuite le widget sur votre page. Bulles de chat, widgets d'avis et boutons d'achat utilisent souvent cette méthode.

Intégrer n'est pas copier. Si vous téléchargez une vidéo pour la mettre en ligne sur votre site, vous l'hébergez vous-même. Avec une intégration, c'est le prestataire qui l'héberge, et il peut la retirer, la modifier ou suivre qui la regarde.

Ce n'est pas non plus une API. Une API fournit des données brutes à un développeur qui construit sa propre interface. Le code d'intégration vous donne un morceau d'interface déjà prêt, à coller tel quel. C'est la manière no-code d'ajouter une fonction extérieure à votre page.

Le vocabulaire associé : widget (un petit élément interactif livré par intégration), snippet ou extrait (tout petit bout de code à coller), oEmbed (un standard qui transforme automatiquement une URL collée en intégration, d'où la vidéo qui apparaît quand vous collez un lien YouTube dans beaucoup d'éditeurs).

Pourquoi c'est important

Les intégrations permettent d'assembler un site à partir d'outils spécialisés sans faire appel à un développeur. Une formatrice peut réunir sur une même page un lecteur vidéo, un formulaire d'inscription et un carrousel de témoignages en un après-midi. Ce gain de temps a de la valeur.

Elles ont aussi des coûts qu'on ne découvre qu'après coup. Chaque script ajouté télécharge du code supplémentaire à chaque visite. Prenons une page de vente avec une vidéo, une bulle de chat, un widget d'avis et un outil de mesure d'audience. Chacun peut ajouter 200 à 500 Ko et quelques requêtes vers d'autres serveurs. Sur un téléphone avec une connexion moyenne, la page peut mettre deux ou trois secondes de plus à devenir utilisable.

Or la vitesse pèse sur les ventes. Supposons 3 000 visites par mois et un taux de conversion de 2 % sur une offre à 97 €, soit 60 ventes et 5 820 €. Si le poids supplémentaire fait partir 10 % des visiteurs avant la fin du chargement, vous perdez environ 6 ventes, soit 582 € par mois, près de 7 000 € par an. L'intégration « ajoutée en une minute » peut devenir l'élément le plus coûteux de la page.

L'autre coût, c'est la vie privée. Beaucoup d'intégrations déposent des cookies ou enregistrent les visites pour le compte du prestataire. En Europe, cela peut exiger un consentement avant le chargement, d'où les encarts « cliquez pour charger la vidéo » sur certains sites.

Comment ça marche

Le principe est le même pour la plupart des outils :

  • Le prestataire génère le code. Dans les réglages du service, une option « Partager », « Intégrer » ou « Installer » affiche l'extrait, souvent avec quelques options de taille ou de couleur.
  • Vous le collez dans votre page. Votre éditeur de site ou votre CMS doit proposer un bloc qui accepte du HTML personnalisé. Beaucoup d'éditeurs hébergés offrent un bloc « intégration » ou « HTML » prévu pour cela.
  • Le navigateur du visiteur le lit. À l'ouverture de la page, le navigateur rencontre l'iframe ou le script et demande le contenu aux serveurs du prestataire.
  • Le prestataire envoie le contenu. La vidéo, le formulaire ou le widget s'affiche dans l'espace réservé.
  • Les données repartent chez le prestataire. Inscriptions, clics et vues sont enregistrés de son côté, pas dans la base de données de votre site.

Ce dernier point compte. Si vous utilisez le formulaire intégré de l'outil A sur un site construit avec l'outil B, les inscrits sont stockés dans l'outil A. Il faudra les exporter ou relier les outils pour les retrouver ailleurs.

Repères et exemples

Les intégrations les plus courantes chez les créateurs et les petits vendeurs :

  • Les lecteurs vidéo. L'intégration la plus fréquente. Héberger soi-même de la vidéo coûte cher, l'intégrer depuis une plateforme vidéo est généralement le bon choix.
  • Les formulaires d'inscription. Les outils de newsletter fournissent des formulaires à intégrer sur un blog ou un portfolio.
  • Les boutons d'achat et widgets de paiement. Certains outils de vente permettent de vendre depuis n'importe quelle page grâce à un bouton qui ouvre une fenêtre de paiement.
  • Les agendas de réservation. Les coachs intègrent un calendrier sur leur page de contact.
  • Les publications sociales. Un post intégré comme preuve sociale.

Une règle pratique : une landing page avec une ou deux intégrations reste légère. Au-delà de quatre ou cinq scripts tiers, testez la vitesse de la page sur un téléphone avant de publier. Beaucoup d'outils gratuits de mesure de vitesse indiquent quelle intégration pèse le plus.

Erreurs fréquentes

  • Empiler les widgets. Chacun paraît léger, mais ensemble ils ralentissent la page et peuvent entrer en conflit.
  • Coller du code de source inconnue. Un script intégré s'exécute avec un accès complet à votre page. Ne collez que du code de services de confiance.
  • Oublier où vont les données. Les formulaires intégrés stockent les inscriptions chez le prestataire, ce qui surprend quand on cherche ses abonnés.
  • Négliger le mobile. Une iframe à largeur fixe peut déborder sur petit écran et provoquer un défilement horizontal.
  • Laisser des intégrations mortes. Quand vous résiliez un outil, ses intégrations cassent et affichent des erreurs ou des cadres vides.

Bonnes pratiques

  • Demandez-vous si un lien suffit. Un bouton clair vers une page hébergée rapide convertit souvent aussi bien qu'une intégration, et ne pèse rien.
  • Limitez les scripts tiers. Ne gardez que les intégrations qui servent directement l'objectif de la page.
  • Chargez à la demande les contenus lourds. Vidéos et cartes ne se chargent que lorsque le visiteur y arrive ou clique.
  • Respectez les règles de consentement. Retardez les intégrations qui déposent des cookies de suivi jusqu'à l'accord du visiteur, quand la loi l'impose.
  • Tenez un inventaire. Listez chaque intégration, son emplacement et le compte qui la possède, pour que rien ne casse en silence à la fin d'un abonnement.
  • Testez sur téléphone. Ouvrez la page en 4G, pas seulement sur le Wi-Fi du bureau.

Dans Roctify

Roctify ne fournit pas de codes d'intégration ni de widgets à insérer sur d'autres sites. La plateforme héberge plutôt l'ensemble de l'expérience de vente : une page lien en bio avec checkout intégré et une boutique en ligne complète, servies en HTTPS sur votre propre domaine. Chaque produit a sa page produit avec une URL partageable. Depuis un blog, la description d'une vidéo ou une newsletter, vous envoyez directement vers le produit, et l'acheteur paie sur place.

Comme la boutique, la page lien en bio et le catalogue forment un seul système, il n'y a aucun widget à synchroniser. Prix, stock et commandes restent au même endroit, et les produits numériques sont livrés automatiquement après le paiement.

FAQ

Un code d'intégration est-il sûr ?

Il est aussi sûr que le prestataire qui le fournit. Une iframe est assez isolée de votre page, alors qu'un script peut la lire et la modifier. Utilisez les intégrations de services reconnus et retirez celles qui ne servent plus.

Les intégrations nuisent-elles au référencement ?

L'intégration elle-même pénalise rarement le classement, mais une page lente, si. Et les moteurs de recherche n'attribuent généralement pas à votre page le contenu affiché dans une iframe. Gardez votre texte principal sur la page et réservez les intégrations aux éléments secondaires.

Faut-il intégrer un checkout ou y renvoyer par un lien ?

Les deux fonctionnent. Un bouton d'achat intégré garde le visiteur sur votre page, mais ajoute des scripts et dépend du widget du prestataire. Un lien vers un checkout hébergé est plus simple, plus rapide à charger et plus facile à maintenir. Pour la plupart des petits vendeurs, un bouton clair vers une page produit dédiée suffit.