Pour intégrer Lokki sur votre site internet, vous avez deux options : un bouton de redirection qui redirige vos clients vers votre boutique en ligne, ou une iFrame en popup qui affiche la boutique directement sur votre site sans redirection. Copiez le code correspondant ci-dessous et collez-le dans votre site.
Option 1 : Bouton de redirection
Le bouton de redirection est la méthode la plus simple. En cliquant sur le bouton, vos clients sont redirigés vers votre boutique en ligne Lokki. Copiez le code ci-dessous et collez-le sur votre site. Remplacez {url_boutique_en_ligne} par l'URL de votre boutique, disponible dans Paramètres > Boutique en ligne > Contact. Supprimez les accolades { } en ne laissant que l'URL.
Version location uniquement :
<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 (deux boutons) :
<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>
Option 2 : iFrame en popup
L'iFrame affiche votre boutique en ligne Lokki directement sur votre site, en popup. Vos clients ne quittent pas votre site. Copiez le code ci-dessous, collez-le sur votre site et remplacez {url_boutique_en_ligne} par l'URL de votre boutique.
<div id="widget-Lokki">
<div
id="popup-lokki"
style="
display: none;
position: fixed;
z-index: 300000;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);"
>
<div
id="popup-lokki-content"
style="
height: 100%;
width: 100%;
position: fixed;
z-index: 100001;
top: 0;
left: 0;
overflow-x: hidden;
-webkit-transform:scale(.9, .9);">
<span
id="btn-close-lokki"
style="
position: fixed;
top: 1px;
right: 30px;
font-size: 50px;
font-weight: 900;
cursor: pointer;
color: grey;"
>
×
</span>
<iframe
id="lokki-frame"
style="height: 100%; width: 100%;"
src="{url_boutique_en_ligne}"
frameborder="0"
marginheight="0"
marginwidth="0"
></iframe>
</div>
</div>
<div
style="position: fixed;
bottom: 2rem;
right: 2rem;
width: 30%;
max-width: 200px;
min-width: 175px;
z-index: 100000;
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>
<p
id="btn-open-lokki"
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;
cursor: pointer;"
>
Location Vélo
</p>
</div>
<script>
document.getElementById("btn-close-lokki").addEventListener("click", function() {
document.getElementById("popup-lokki").style.display = "none";
document.getElementById("btn-close-lokki").style.display = "none";
});
document.getElementById("btn-open-lokki").addEventListener("click", () => {
document.getElementById("popup-lokki").style.display = "block";
document.getElementById("btn-close-lokki").style.display = "block";
});
window.onclick = function(event) {
if (event.target.id != "popup-lokki-content" && event.target.id != "btn-open-lokki") {
document.getElementById("popup-lokki").style.display = "none";
document.getElementById("btn-close-lokki").style.display = "none";
}
}
</script>
</div>
Sur Safari, l'iFrame n'est pas supportée par mesure de sécurité. Vos clients verront à la place un encart bleu Accéder à la réservation qui les redirige vers votre boutique en ligne.
Questions fréquentes
Quelle méthode choisir : bouton de redirection ou iFrame ?
Le bouton de redirection est recommandé dans la majorité des cas : il est plus simple à intégrer, fonctionne sur tous les navigateurs (y compris Safari) et ne nécessite pas de compétences techniques particulières. L'iFrame est utile si vous souhaitez que vos clients restent visuellement sur votre site, mais elle ne fonctionne pas sur Safari.
Comment intégrer le code sur WordPress ?
Dans l'éditeur de votre page WordPress, ajoutez un bloc de type HTML personnalisé, collez le code Lokki et 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 ?
Dans l'éditeur Squarespace, ajoutez un bloc Code à l'endroit souhaité sur votre page, collez le code Lokki et enregistrez.
Comment intégrer le code sur Wix ?
Dans l'éditeur Wix, ajoutez un élément Code HTML depuis la section "Intégrer", puis collez le code Lokki. Si le bouton est tronqué, augmentez la hauteur du bloc dans les paramètres de l'élément. Vous pouvez aussi suivre la vidéo dédiée dans la section ci-dessus.
Où trouver l'URL de ma boutique en ligne ?
Rendez-vous dans Paramètres > Boutique en ligne > Contact. L'URL de votre boutique est indiquée dans ce sous-onglet. Copiez-la et remplacez {url_boutique_en_ligne} dans le code, en supprimant les accolades.
Puis-je confier l'intégration à mon agence web ?
Oui. Transmettez directement le code de cet article à votre agence ou développeur. Ils n'ont besoin que du code et de l'URL de votre boutique en ligne.
✅ À retenir
Deux méthodes disponibles : bouton de redirection (compatible tous navigateurs, recommandé) ou iFrame en popup (non compatible Safari).
Dans les deux cas, remplacez {url_boutique_en_ligne} par l'URL disponible dans Paramètres > Boutique en ligne > Contact.
Le code fonctionne sur WordPress, Wix, Squarespace et tout CMS acceptant du HTML personnalisé.
Vidéo pour vous aider :