Pour intégrer Lokki sur votre site internet, ajoutez un bouton de redirection : vos clients cliquent dessus et arrivent sur votre boutique en ligne. Deux versions sont disponibles ci-dessous copiez celle qui correspond à votre activité et collez-la sur votre site.
Bouton de redirection
En cliquant sur le bouton, vos clients arrivent sur votre boutique en ligne Lokki. Avant de coller le code, 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 seule
<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 : un 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>
Questions fréquentes
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 en bas de cet article.
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
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 :