Ein schwebender Button auf deiner Website

Mit einem schwebenden Button ist der Konfigurator auf jeder Seite deiner Website, ohne dass du eine eigene Seite dafür anlegst. Dein Besucher klickt auf den Button in der Ecke, und der Konfigurator öffnet sich in einem Fenster oder einer Seitenleiste. Er verlässt deine Website nicht.

Den Button im Studio einstellen

1. Öffne das Studio.

   Geh zu KatalogStudio und öffne Darstellung.

2. Wähle bei Darstellung Als Button.

   Darunter legst du fest, wie der Button funktioniert:

   • Öffnet als: Kleines Fenster, Großes Fenster oder Seitenleiste.
   • Position auf deiner Website: Unten rechts oder Unten links.
   • Symbol auf dem Button: Keins, Pfeil oder Vorschaubild.
   • Text auf dem Button, pro Sprache.
   • Abstand zum Rand, in Pixeln.

3. Klicke auf Veröffentlichen.

   Erst dann sehen Besucher deinen neuen Button.

Fragt deine eigene Website schon nach Cookie-Zustimmung, schalte Meine Website fragt schon nach Cookie-Zustimmung ein. Dann zeigt der Konfigurator keinen eigenen Cookie-Hinweis.

Den Code auf deine Website setzen

Den Code findest du im Studio unter Einbettungscode, bei Schwebender Button. Setz ihn einmal pro Seite ein, zum Beispiel in den Footer deiner Website:

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

Ersetze {dein-slug} durch deinen Firmenlink. Passt du den Button später im Studio an, zieht deine Website nach dem Veröffentlichen von selbst mit. Nur wenn du zwischen einem Konfigurator auf der Seite und einem schwebenden Button wechselst, brauchst du neuen Code.

Ein eigener Button oder Link, der den Konfigurator öffnet

Jedes Element mit data-meetpiloot-open öffnet den Konfigurator, zum Beispiel ein Button in deinem Menü. Mit einem Produktnamen dazu öffnet er sofort dieses Produkt:

<button type="button" data-meetpiloot-open>Terrassenüberdachung zusammenstellen</button>
<button type="button" data-meetpiloot-open="lamellen">Lamellendach zusammenstellen</button>

Der Code des schwebenden Buttons muss dafür auf der Seite stehen.

So sieht es auf schmalen Bildschirmen aus

In einem Fenster, einer Seitenleiste oder auf dem Handy steht das Bild immer oben, und dein Kunde sieht eine Frage pro Schritt. Im Schritt-für-Schritt-Konfigurator stehen die Umgebung (etwa Reihenhaus) und das Licht (etwa goldene Stunde) als zwei kleine runde Buttons in den Ecken des Bildes. So bleibt Platz für den Entwurf und die Auswahl.

Prüfen, ob es funktioniert

Im Studio unter Einbettungscode trägst du bei Installation prüfen die Adresse deiner Seite ein. meetpiloot schaut, ob der Code darauf steht. Öffne die Seite danach auch selbst in einem privaten Fenster und klicke auf den Button.

Baut jemand anderes deine Website, nutze An deinen Webentwickler senden. Er bekommt den Code und die Schritte per E-Mail.