Embed Trampoline on your site

Embed the Trampoline widget on your website to help young people discover French-Spanish exchange opportunities. The widget adapts automatically to its content.

Quick start

Add these two lines to your HTML:

html

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

The data-trampoline attribute enables automatic height resizing.

WordPress

Via a custom HTML block

Edit the page or post where you want the widget
Add a Custom HTML block
Paste the embed code:

html

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

Via a theme file

Add the script once in your theme's header.php file or via Appearance > Theme Editor:

html

<script src="https://www.interface-trampoline.eu/embed.js"></script>

Then use iframes anywhere in your content.

Drupal

Via a basic page

Go to Content > Add content > Basic page
Change the text format to Full HTML
Click 'Source' in the editor toolbar
Paste the embed code

Via a block

Go to Structure > Block layout
Click Place block in the desired region
Add a Custom block with the Full HTML format

html

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

Joomla

Go to Content > Articles > New article
Click the Toggle editor button to access the raw HTML
Paste the embed code

If scripts are filtered, add the script tag in Extensions > Templates > your template in the head section.

Wix

In the Wix editor, click Add (+)
Select Embed code > Embed HTML
Click Enter code
Paste the embed code and click 'Update'

html

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

Note: Wix may require a fixed height. Adjust min-height to suit your needs.

Squarespace

Edit your page and add a section
Click Add a block > Code
Paste the embed code
Make sure Show source is unchecked

To include the script site-wide, go to Settings > Advanced > Code Injection and add the script tag in the Header section.

Webflow

Add an Embed element from the Add panel
Paste the embed code

For site-wide scripts, go to Project Settings > Custom Code and add the script in the Header Code section.

React

tsx

import { useEffect } from 'react';

function TrampolineWidget() {
  useEffect(() => {
    const s = document.createElement('script');
    s.src = 'https://www.interface-trampoline.eu/embed.js';
    document.body.appendChild(s);
    return () => { s.remove(); };
  }, []);

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

export default TrampolineWidget;

Usage:

tsx

<TrampolineWidget />

Next.js

tsx

'use client';

import Script from 'next/script';

export function TrampolineWidget() {
  return (
    <>
      <Script src="https://www.interface-trampoline.eu/embed.js" strategy="afterInteractive" />
      <iframe
        src="https://www.interface-trampoline.eu"
        allow="clipboard-write; geolocation"
        data-trampoline
        style={{ width: '100%', border: 'none' }}
        referrerPolicy="unsafe-url"
        title="Trampoline"
      />
    </>
  );
}

Native HTML/JavaScript

The simplest integration using our hosted script:

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://www.interface-trampoline.eu/embed.js"></script>
</head>
<body>
  <h1>Opportunities</h1>
  <iframe
    src="https://www.interface-trampoline.eu"
    allow="clipboard-write; geolocation"
    data-trampoline
    style="width: 100%; border: none;"
    referrerpolicy="unsafe-url"
  title="Trampoline"
  ></iframe>
</body>
</html>

Manual integration (without embed.js)

Cette intégration n'inclut pas l'assistant Lino flottant. Pour bénéficier de Lino, utilisez plutôt embed.js comme indiqué ci-dessus.

If you prefer not to load our script:

html

<iframe
  id="trampoline-widget"
  src="https://www.interface-trampoline.eu"
  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>

Troubleshooting

The widget doesn't resize

Check that the data-trampoline attribute is present on the iframe
Check that embed.js is loaded before the iframe
Check there are no JavaScript errors in the browser console

The widget appears too small

Add min-height: 600px to the iframe style as a fallback
Make sure the iframe has width: 100%

Content Security Policy errors

If your site has strict CSP headers, add www.interface-trampoline.eu to your frame-src and script-src directives.

Need help embedding the widget?

If the documentation doesn't cover your case or something isn't working as expected, contact us directly — the Trampoline team will help you with the integration.