Skip to content
Free demo

React and Next.js

For web developers. A reusable React component that embeds the configurator and loads the tracking script once, plus a button to the configurator.

All plansFor developers1 min read
On this page3
  1. Component with an iframe
  2. Button to the configurator
  3. Check that it works

If your website is built with React or Next.js, create a component that embeds the configurator. The tracking script is loaded only once, even if the component appears on the page more than once.

Component with an iframe

TSX
import { useEffect } from 'react';

interface ConfiguratorProps {
  slug: string;
  height?: number;
}

export function Configurator({ slug, height = 800 }: ConfiguratorProps) {
  // Passes your page's source (UTM, gclid) on to the configurator.
  useEffect(() => {
    const src = 'https://meetpiloot.nl/embed/mp-tracking.js';
    if (document.querySelector(`script[src="${src}"]`)) return;
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return (
    <iframe
      src={`https://meetpiloot.nl/${slug}/configure?embed=true`}
      style={{ width: '100%', height, border: 0 }}
      title="Configurator"
    />
  );
}

Then use it on any page:

TSX
<Configurator slug="{your-slug}" />

Button to the configurator

TSX
export function ConfigureButton({ slug }: { slug: string }) {
  return (
    <a
      href={`https://meetpiloot.nl/${slug}/configure`}
      target="_blank"
      rel="noopener noreferrer"
    >
      Configure your product
    </a>
  );
}

Check that it works

Open the page and check in the developer tools that mp-tracking.js is loaded exactly once. If you listen to the events from the configurator, read events and dataLayer fields.

Read next

Stuck?

Email us or open a ticket from your dashboard. We reply within 1 to 2 working days.

Email supportOpen a ticket