A floating button on your website

With a floating button the configurator is on every page of your website, without you building a page for it. Your visitor clicks the button in the corner and the configurator opens in a window or side panel. They never leave your site.

Setting up the button in the Studio

1. Open the Studio.

   Go to CatalogStudio and open Appearance.

2. Under Presentation, choose As a button.

   Below that you choose how the button works:

   • Opens as: Small window, Large window or Side panel.
   • Position on your site: Bottom right or Bottom left.
   • Icon on the button: None, Arrow or Thumbnail.
   • Button text, per language.
   • Distance from the edge, in pixels.

3. Click Publish.

   Only then do visitors see your new button.

If your own site already asks for cookie consent, switch on My site already asks for cookie consent. The configurator then does not show its own cookie notice.

Putting the code on your website

You will find the code in the Studio under Embed code, at Floating button. Place it once per page, for example in your website's footer:

<script src="https://meetpiloot.nl/embed/mp-embed.js" async
  data-meetpiloot="{your-slug}" data-mode="launcher"></script>

Replace {your-slug} with your company link. If you change the button in the Studio later, your site updates automatically once you publish. You only need new code if you switch between a configurator on the page and a floating button.

Your own button or link that opens the configurator

Any element with data-meetpiloot-open opens the configurator, for example a button in your menu. Add a product name and it opens that product straight away:

<button type="button" data-meetpiloot-open>Design your veranda</button>
<button type="button" data-meetpiloot-open="lamellen">Design your louvred roof</button>

The floating button code does need to be on the page.

How it looks on a narrow screen

In a window, side panel or on a phone the picture is always at the top and your customer sees one question per step. In the step-by-step configurator, the surroundings (such as Terraced house) and the light (such as Golden hour) sit as two small round buttons in the corners of the picture. That leaves room for the design and the choices.

Check that it works

In the Studio under Embed code, enter your page's address at Check installation. meetpiloot checks whether the code is on it. Then also open the page yourself in a private window and click the button.

If someone else builds your website, use Send to your web developer. They get the code and the steps by email.