Een zwevende knop op je website

Met een zwevende knop staat de configurator op elke pagina van je website, zonder dat je er een eigen pagina voor maakt. Je bezoeker klikt op de knop in de hoek en de configurator opent in een venster of zijpaneel. Hij verlaat je site niet.

De knop instellen in de Studio

1. Open de Studio.

   Ga naar CatalogusStudio en open Weergave.

2. Kies bij Presentatie voor Als knop.

   Daaronder kies je hoe de knop werkt:

   • Opent als: Klein venster, Groot venster of Zijpaneel.
   • Positie op je site: Rechtsonder of Linksonder.
   • Icoon op de knop: Geen, Pijl of Miniatuur.
   • Tekst op de knop, per taal.
   • Afstand tot de rand, in pixels.

3. Klik op Publiceren.

   Pas dan zien bezoekers je nieuwe knop.

Vraagt je eigen site al om cookietoestemming, zet dan Mijn site vraagt al om cookietoestemming aan. Dan toont de configurator geen eigen cookiemelding.

De code op je website zetten

Je vindt de code in de Studio onder Insluitcode, bij Zwevende knop. Plaats hem één keer per pagina, bijvoorbeeld in de footer van je website:

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

Vervang {jouw-slug} door je bedrijfslink. Pas je later de knop aan in de Studio, dan past je site zich na publiceren vanzelf aan. Alleen als je wisselt tussen een configurator op de pagina en een zwevende knop, heb je nieuwe code nodig.

Een eigen knop of link die de configurator opent

Elk element met data-meetpiloot-open opent de configurator, bijvoorbeeld een knop in je menu. Met een productnaam erbij opent hij meteen dat product:

<button type="button" data-meetpiloot-open>Stel je veranda samen</button>
<button type="button" data-meetpiloot-open="lamellen">Lamellendak samenstellen</button>

De code van de zwevende knop moet dan wel op de pagina staan.

Hoe het eruitziet op een kleine schermbreedte

In een venster, zijpaneel of op de telefoon staat het beeld altijd boven en ziet je klant één vraag per stap. In de stap-voor-stap configurator staan de omgeving (zoals Rijtjeshuis) en het licht (zoals Gouden uur) als twee kleine ronde knoppen in de hoeken van het beeld. Zo blijft er ruimte voor het ontwerp en de keuzes.

Controleren of het werkt

In de Studio onder Insluitcode vul je bij Controleer installatie het adres van je pagina in. meetpiloot kijkt of de code erop staat. Open de pagina daarna ook zelf in een privévenster en klik op de knop.

Bouwt iemand anders je website, gebruik dan Stuur naar je webbouwer. Die krijgt de code en de stappen per mail.