Embedding the Relay Point Map

Basic Integration

The simplest way to add the relay point map to your application is via an iframe element.

Minimal Setup

<iframe
  src="https://relay-points-map.wing.eu?channelId=YOUR_CHANNEL_ID"
  width="100%"
  height="600"
  frameborder="0"
  style="border: 1px solid #e0e0e0; border-radius: 4px;">
</iframe>

Dynamic Integration

Generate the iframe URL dynamically based on customer data:

Dynamic Iframe Integration

Examples showing how to generate relay point map URLs with customer data in different frameworks

import { useEffect, useState } from 'react';

export function RelayPointMapIframe({ address, channelId }) {
const [iframeUrl, setIframeUrl] = useState('');

useEffect(() => {
  const params = new URLSearchParams({
    channelId,
    service: address?.service || 'MONDIAL_RELAY',
    line1: address?.line1 || '123 rue de Rivoli',
    zip: address?.zip || '75001',
    city: address?.city || 'Paris',
    countryCode: address?.countryCode || 'FR'
  });

  setIframeUrl(`https://relay-points-map.wing.eu?${params.toString()}`);
}, [address, channelId]);

if (!iframeUrl) return null;

return (
  <iframe
    src={iframeUrl}
    width="100%"
    height="600"
    frameBorder="0"
    style={{ borderRadius: '8px' }}
    title="Select relay point"
  />
);
}

Responsive Design

Mobile-Friendly Setup

Adjust dimensions for mobile devices:

<style>
  .relay-map-container {
    width: 100%;
    height: 600px;
  }

  @media (max-width: 768px) {
    .relay-map-container {
      height: 500px;
    }
  }

  @media (max-width: 480px) {
    .relay-map-container {
      height: 400px;
    }
  }
</style>

<div class="relay-map-container">
  <iframe
    id="relay-point-map"
    width="100%"
    height="100%"
    frameborder="0"
    style="border: none;">
  </iframe>
</div>

<script>
function updateRelayMapUrl(channelId, address) {
  const params = new URLSearchParams({
    channelId,
    line1: address.street,
    zip: address.zip,
    city: address.city,
    countryCode: address.countryCode
  });

  const iframe = document.getElementById('relay-point-map');
  iframe.src = `https://relay-points-map.wing.eu?${params.toString()}`;
}
</script>

Common Issues

Iframe Not Loading

• Verify your domain is whitelisted
• Check the channelId parameter is correct
• Ensure the URL uses HTTPS
• Check browser console for CORS errors

Size Not Responsive

• Use percentage widths: width="100%"
• Use CSS media queries for responsive heights
• Avoid fixed pixel widths on smaller screens

Callback Not Working

• Verify callbackUrl parameter is URL-encoded
• Ensure your endpoint accepts POST requests
• Check that your server is publicly accessible
• Verify the endpoint returns a 2xx status code

Next Steps

• Set up Callback Integration to handle relay point selections
• Review Authentication & Parameters for advanced options