Intégrer Trampoline sur votre site

Intégrez le widget Trampoline sur votre site web pour aider les jeunes à découvrir les opportunités d'échanges franco-espagnols. Le widget s'adapte automatiquement à son contenu.

Démarrage rapide

Ajoutez ces deux lignes à votre HTML :

html

<script src="https://trampoline.platane.io/embed.js"></script>
<iframe
  src="https://trampoline.platane.io"
  allow="clipboard-write; geolocation"
  data-trampoline
  style="width: 100%; border: none;"
  referrerpolicy="unsafe-url"
  title="Trampoline"
></iframe>

L'attribut data-trampoline permet le redimensionnement automatique de la hauteur.

WordPress

Via un bloc HTML personnalisé

Modifiez la page ou l'article où vous voulez le widget
Ajoutez un bloc HTML personnalisé
Collez le code d'intégration :

html

<script src="https://trampoline.platane.io/embed.js"></script>
<iframe
  src="https://trampoline.platane.io"
  allow="clipboard-write; geolocation"
  data-trampoline
  style="width: 100%; border: none; min-height: 600px;"
  referrerpolicy="unsafe-url"
  title="Trampoline"
></iframe>

Via un fichier de thème

Ajoutez le script une fois dans le fichier header.php de votre thème ou via Apparence > Éditeur de thème :

html

<script src="https://trampoline.platane.io/embed.js"></script>

Ensuite, utilisez des iframes n'importe où dans votre contenu.

Drupal

Via une page simple

Allez dans Contenu > Ajouter du contenu > Page simple
Changez le format de texte en HTML complet
Cliquez sur « Source » dans la barre d'outils de l'éditeur
Collez le code d'intégration

Via un bloc

Allez dans Structure > Mise en page des blocs
Cliquez sur Placer le bloc dans la région souhaitée
Ajoutez un Bloc personnalisé avec le format HTML complet

html

<script src="https://trampoline.platane.io/embed.js"></script>
<iframe
  src="https://trampoline.platane.io"
  allow="clipboard-write; geolocation"
  data-trampoline
  style="width: 100%; border: none; min-height: 600px;"
  referrerpolicy="unsafe-url"
  title="Trampoline"
></iframe>

Joomla

Allez dans Contenu > Articles > Nouvel article
Cliquez sur le bouton Basculer l'éditeur pour accéder au HTML brut
Collez le code d'intégration

Si les scripts sont filtrés, ajoutez la balise script dans Extensions > Templates > votre template dans la section head.

Wix

Dans l'éditeur Wix, cliquez sur Ajouter (+)
Sélectionnez Intégrer du code > HTML intégré
Cliquez sur Entrer le code
Collez le code d'intégration et cliquez sur « Mettre à jour »

html

<script src="https://trampoline.platane.io/embed.js"></script>
<iframe
  src="https://trampoline.platane.io"
  allow="clipboard-write; geolocation"
  data-trampoline
  style="width: 100%; border: none; min-height: 800px;"
  referrerpolicy="unsafe-url"
  title="Trampoline"
></iframe>

Note : Wix peut nécessiter une hauteur fixe. Ajustez min-height selon vos besoins.

Squarespace

Modifiez votre page et ajoutez une section
Cliquez sur Ajouter un bloc > Code
Collez le code d'intégration
Assurez-vous que Afficher la source est décoché

Pour inclure le script sur tout le site, allez dans Paramètres > Avancé > Injection de code et ajoutez la balise script dans la section En-tête.

Webflow

Ajoutez un élément Embed depuis le panneau Ajouter
Collez le code d'intégration

Pour les scripts sur tout le site, allez dans Paramètres du projet > Code personnalisé et ajoutez le script dans la section Code d'en-tête.

React

tsx

import { useEffect, useRef } from 'react';

function TrampolineWidget() {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    const handleMessage = (e: MessageEvent) => {
      if (e.data?.type !== 'trampoline-resize') return;
      if (iframeRef.current?.contentWindow === e.source) {
        iframeRef.current.style.height = e.data.height + 'px';
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  return (
    <iframe
      ref={iframeRef}
      src="https://trampoline.platane.io"
      allow="clipboard-write; geolocation"
      style={{ width: '100%', border: 'none' }}
      referrerPolicy="unsafe-url"
      title="Trampoline"
    />
  );
}

export default TrampolineWidget;

Utilisation :

tsx

<TrampolineWidget />

Next.js

Créez un composant client car nous avons besoin de useEffect :

tsx

'use client';

import { useEffect, useRef } from 'react';

export function TrampolineWidget() {
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    const handleMessage = (e: MessageEvent) => {
      if (e.data?.type !== 'trampoline-resize') return;
      if (iframeRef.current?.contentWindow === e.source) {
        iframeRef.current.style.height = e.data.height + 'px';
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  return (
    <iframe
      ref={iframeRef}
      src="https://trampoline.platane.io"
      allow="clipboard-write; geolocation"
      style={{ width: '100%', border: 'none' }}
      referrerPolicy="unsafe-url"
      title="Trampoline"
    />
  );
}

HTML/JavaScript natif

L'intégration la plus simple en utilisant notre script hébergé :

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <script src="https://trampoline.platane.io/embed.js"></script>
</head>
<body>
  <h1>Opportunities</h1>
  <iframe
    src="https://trampoline.platane.io"
    allow="clipboard-write; geolocation"
    data-trampoline
    style="width: 100%; border: none;"
    referrerpolicy="unsafe-url"
  title="Trampoline"
  ></iframe>
</body>
</html>

Intégration manuelle (sans embed.js)

Si vous préférez ne pas charger notre script :

html

<iframe
  id="trampoline-widget"
  src="https://trampoline.platane.io"
  allow="clipboard-write; geolocation"
  style="width: 100%; border: none;"
  referrerpolicy="unsafe-url"
  title="Trampoline"
></iframe>

<script>
  window.addEventListener('message', function(e) {
    if (e.data?.type !== 'trampoline-resize') return;
    var iframe = document.getElementById('trampoline-widget');
    if (iframe && iframe.contentWindow === e.source) {
      iframe.style.height = e.data.height + 'px';
    }
  });
</script>

Dépannage

Le widget ne se redimensionne pas

Vérifiez que l'attribut data-trampoline est présent sur l'iframe
Vérifiez que embed.js est chargé avant l'iframe
Vérifiez qu'il n'y a pas d'erreurs JavaScript dans la console du navigateur

Le widget apparaît trop petit

Ajoutez min-height: 600px au style de l'iframe comme solution de secours
Assurez-vous que l'iframe a width: 100%

Erreurs de Content Security Policy

Si votre site a des en-têtes CSP stricts, ajoutez trampoline.platane.io à vos directives frame-src et script-src.