Aller au contenu

Un bouton flottant sur votre site

Placez dans un coin de votre site un bouton qui ouvre le configurateur dans une fenêtre ou un panneau latéral. Votre visiteur reste sur votre site.

Toutes les formules3 min de lecture
Sur cette page5
  1. Régler le bouton dans le Studio
  2. Placer le code sur votre site
  3. Votre propre bouton ou lien qui ouvre le configurateur
  4. L'affichage sur un écran étroit
  5. Vérifier que tout fonctionne

Ce dont vous avez besoin

  • Le lien de votre entreprise (slug)
  • L'accès à l'administration de votre site

Avec un bouton flottant, le configurateur est accessible depuis chaque page de votre site, sans page dédiée. Votre visiteur clique sur le bouton dans le coin et le configurateur s'ouvre dans une fenêtre ou un panneau latéral. Il ne quitte pas votre site.

Régler le bouton dans le Studio

  1. Ouvrez le Studio.

    Allez sur CatalogusStudio et ouvrez Weergave (affichage).

  2. Sous Presentatie, choisissez Als knop (en bouton).

    En dessous, vous réglez le comportement du bouton :

    • Opent als (s'ouvre en) : Klein venster (petite fenêtre), Groot venster (grande fenêtre) ou Zijpaneel (panneau latéral).
    • Positie op je site (position) : Rechtsonder (en bas à droite) ou Linksonder (en bas à gauche).
    • Icoon op de knop (icône) : Geen (aucune), Pijl (flèche) ou Miniatuur (miniature).
    • Tekst op de knop, le texte du bouton, par langue.
    • Afstand tot de rand, la distance au bord, en pixels.
  3. Cliquez sur Publiceren (publier).

    Vos visiteurs ne voient le nouveau bouton qu'à partir de ce moment.

Votre site demande déjà le consentement aux cookies ? Activez alors Mijn site vraagt al om cookietoestemming. Le configurateur n'affiche alors plus son propre bandeau cookies.

Placer le code sur votre site

Le code se trouve dans le Studio sous Insluitcode (code d'intégration), à Zwevende knop (bouton flottant). Placez-le une seule fois par page, par exemple dans le pied de page de votre site :

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

Remplacez {votre-slug} par le lien de votre entreprise. Si vous modifiez ensuite le bouton dans le Studio, votre site se met à jour automatiquement après publication. Vous n'avez besoin d'un nouveau code que si vous passez d'un configurateur intégré à la page à un bouton flottant.

Votre propre bouton ou lien qui ouvre le configurateur

Tout élément portant data-meetpiloot-open ouvre le configurateur, par exemple un bouton de votre menu. Avec un nom de produit, il ouvre directement ce produit :

HTML
<button type="button" data-meetpiloot-open>Composez votre véranda</button>
<button type="button" data-meetpiloot-open="lamellen">Composer une pergola bioclimatique</button>

Le code du bouton flottant doit toutefois être présent sur la page.

L'affichage sur un écran étroit

Dans une fenêtre, un panneau latéral ou sur téléphone, l'image est toujours en haut et votre client voit une question par étape. Dans le configurateur pas à pas, l'environnement (comme Rijtjeshuis, maison mitoyenne) et la lumière (comme Gouden uur, heure dorée) sont deux petits boutons ronds dans les coins de l'image. Le projet et les choix gardent ainsi toute la place.

Vérifier que tout fonctionne

Dans le Studio, sous Insluitcode, saisissez l'adresse de votre page à Controleer installatie (vérifier l'installation). meetpiloot vérifie que le code s'y trouve. Ouvrez ensuite la page vous-même dans une fenêtre de navigation privée et cliquez sur le bouton.

Votre site est géré par quelqu'un d'autre ? Utilisez alors Stuur naar je webbouwer (envoyer à votre développeur web). Il reçoit le code et les étapes par e-mail.

Vous êtes bloqué ?

Envoyez-nous un e-mail ou ouvrez un ticket depuis votre tableau de bord. Nous répondons sous 1 à 2 jours ouvrables.