Le widget de réservation Lokki s'affiche directement sur votre site internet.
Vos clients choisissent leurs dates et leur matériel, puis paient, sans quitter votre site.
Vous le configurez dans Paramètres > Boutique en ligne > Widget.

Pour renvoyer plutôt vos clients vers votre boutique en ligne, vous pouvez ajouter un bouton de redirection sur votre site.

Générer votre clé API

La clé API relie le widget à votre catalogue Lokki.

Avant de commencer, vérifiez que LokkiPayment est activé sur votre compte.
Votre client paie sa réservation dans le widget, et ce paiement passe par LokkiPayment.

Dans vos Paramètres, cliquez sur l'onglet Boutique en ligne.
Dans la colonne de gauche, cliquez sur la section Widget.
Dans la partie Widget de réservation, cliquez sur Générer ma clé API.

Lokki crée la clé API propre à votre compte.

Intégrer le widget sur votre site

Le code d'intégration tient en deux lignes, à coller dans la page de votre site où le widget doit apparaître.

Dans la partie Code d'intégration, cliquez sur Copier le code.
Dans le code copié, remplacez VOTRE_CLE_API par la clé API générée à l'étape précédente.
Dans l'éditeur de votre site, collez le code dans un bloc HTML, à l'endroit où le widget doit apparaître.

Voici le code d'intégration du widget :

<script src="https://bucket-prod.getlokki.com/widget/stable/widget.js" async></script>
<lokki-widget api-key="VOTRE_CLE_API" locale="fr"></lokki-widget>

L'attribut locale="fr" affiche le widget en français.

Ajouter un bouton de redirection vers votre boutique en ligne

Le bouton de redirection envoie vos clients sur votre boutique en ligne Lokki, où ils réservent.

Avant de coller le code, remplacez {url_boutique_en_ligne} par l'URL de votre boutique.
Vous trouvez cette URL dans Paramètres > Boutique en ligne > Contact.
Supprimez les accolades { } pour ne laisser que l'URL.

Version location seule : un bouton vers votre boutique en ligne

<div style="position: fixed; bottom: 2rem; right: 2rem; width: 30%; max-width: 200px; min-width: 175px; z-index: 200000; background-color: white; border-radius: 10px; box-shadow: 0px 0px 30px rgba(48, 35, 173, 0.15); padding: 15px 20px; text-align: center; line-height: 24px; display: flex; justify-content: space-between; flex-direction: column; font-family: 'Rubik', 'Helvetica', 'sans-serif'">  <span style="color: #8D8AAB; font-weight: 500; border-bottom: 1px solid #E9E7FA; padding-bottom: 6px; font-size: 16px"> RESERVEZ EN LIGNE </span>  <a style="width: 100%; padding: 9px 0px; border-radius: 5px; box-shadow: rgba(48, 35, 173, 0.13) 2px 2px 6px 0px; background-color: #3023ad; border: none; overflow: hidden; text-decoration: none; color: white; font-weight: 500; line-height: 20px; font-size: 16px;" href="{url_boutique_en_ligne}" target="_blank">    Location de Vélos  </a></div>

Version location et atelier : un bouton pour la location, un pour la réparation

Remplacez aussi {url_atelier} par l'URL de votre atelier, en supprimant les accolades.

<div style="position: fixed; bottom: 2rem; right: 2rem; width: 30%; max-width: 200px; min-width: 175px; height: 130px; z-index: 200000; background-color: white; border-radius: 10px; box-shadow: 0px 0px 30px rgba(48, 35, 173, 0.15); padding: 15px 20px; text-align: center; line-height: 24px; display: flex; justify-content: space-between; flex-direction: column; font-family: 'Rubik', 'Helvetica', 'sans-serif'">
  <span style="color: #8D8AAB; font-weight: 500; border-bottom: 1px solid #E9E7FA; padding-bottom: 6px; font-size: 16px"> RESERVEZ EN LIGNE </span>
  <a style="width: 100%; padding: 9px 0px; border-radius: 5px; box-shadow: rgba(48, 35, 173, 0.13) 2px 2px 6px 0px; background-color: #3023ad; border: none; overflow: hidden; text-decoration: none; color: white; font-weight: 500; line-height: 20px; font-size: 16px;" href="{url_boutique_en_ligne}" target="_blank">
    Location de vélos
  </a>
  <a style="width: 100%; padding: 9px 0px; border-radius: 5px; box-shadow: rgba(48, 35, 173, 0.13) 2px 2px 6px 0px; background-color: #2ad29b; border: none; overflow: hidden; text-decoration: none; color: white; font-weight: 500; line-height: 20px; font-size: 16px;" href="{url_atelier}" target="_blank">
    Réparation de vélos
  </a>
</div>

Ce que le widget de réservation ne permet pas

Le widget ne fonctionne pas sans LokkiPayment, et il ne reprend que les couleurs de votre boutique en ligne.

Sans LokkiPayment activé, votre client ne peut pas payer sa réservation dans le widget.
Le widget reprend les couleurs de votre boutique en ligne, paramétrées dans Paramètres > Boutique en ligne > Personnalisation.
Il ne reprend ni votre police de caractères ni votre logo.

Questions fréquentes

Comment intégrer le code sur WordPress ?

Utilisez un bloc HTML personnalisé.
Dans l'éditeur de votre page WordPress, ajoutez un bloc de type HTML personnalisé, collez le code Lokki, puis publiez la page.
Si votre thème ne propose pas ce bloc, cherchez l'option Code ou HTML brut dans les options de blocs.

Comment intégrer le code sur Squarespace ?

Utilisez un bloc Code.
Dans l'éditeur Squarespace, ajoutez un bloc Code à l'endroit voulu de votre page, collez le code Lokki, puis enregistrez.

Comment intégrer le code sur Wix ?

Utilisez un élément Code HTML.
Dans l'éditeur Wix, ajoutez un élément Code HTML depuis la section Intégrer, puis collez le code Lokki.
Si le widget ou le bouton est tronqué, augmentez la hauteur du bloc dans les paramètres de l'élément.

Où trouver l'URL de ma boutique en ligne ?

Dans Paramètres > Boutique en ligne > Contact.
Copiez l'URL affichée, puis remplacez {url_boutique_en_ligne} dans le code du bouton, en supprimant les accolades.

Puis-je confier l'intégration à mon agence web ?

Oui, transmettez-lui le code.
Pour le widget, votre agence a besoin du code d'intégration et de votre clé API.
Pour le bouton de redirection, elle a besoin du code de cet article et de l'URL de votre boutique en ligne.

✅ À retenir

Le widget se configure dans Paramètres > Boutique en ligne > Widget : générez votre clé API, puis copiez le code d'intégration.
Remplacez VOTRE_CLE_API par votre clé, puis collez le code dans un bloc HTML de votre site (WordPress, Wix, Squarespace ou tout outil qui accepte du HTML).
Le widget exige LokkiPayment activé, car vos clients y paient leur réservation.