Pour intégrer une bulle de chat sur votre boutique Shopify, il va falloir en modifier le code. Mais pas de panique, rien de plus simple.
Lorsque le client cliquera sur la bulle de chat, il sera redirigé vers un Chatbot Simio (Si vous ne savez pas comment faire un chatbot dans Simio, RDV dans le Guide Utilisateur). Cela permet de collecter des optins de de lancer le client sur un flow.
Voici deux codes à intégrer dans votre thème Shopify.
Vous pouvez si vous le souhaitez modifier la tournure des phrases et le style CSS.
Vous devez vous rendre dans le custom code de votre thème Shopify et vous rendre dans le fichier theme.liquid
<aside> 👉
Copiez le code ci dessous et insérez le tout en bas de la balise <body> de votre fichier theme.liquid de votre thème Shopify.
</aside>
<aside> 👉 Ensuite insérez le lien vers votre Chatbot Simio dans la balise <a> à la place de INSERER LE LIEN DU CHATBOT
</aside>
<div id="whatsapp-bubble">
<div id="whatsapp-icon-closed">
<img
src="<https://firebasestorage.googleapis.com/v0/b/phocea-75b47.appspot.com/o/whatsapp-chat.png?alt=media&token=d101a297-8cf3-480a-88b6-60cef3f57901>"
alt="WhatsApp Closed"
/>
</div>
<div id="whatsapp-icon-open" style="display: none">
<img
src="<https://firebasestorage.googleapis.com/v0/b/phocea-75b47.appspot.com/o/Compa%2FClose%20popup.svg?alt=media&token=1e36d102-415e-4db3-839c-502c50842c40&_gl=1*1m6q8vc*_ga*MjE1Njc1NTcyLjE2NzgwOTc2Nzc.*_ga_CW55HF8NVT*MTY5ODMxNDk3NC4xMTAuMS4xNjk4MzE0OTc5LjU1LjAuMA>.."
alt="WhatsApp Open"
/>
</div>
<div id="whatsapp-modal" style="display: none">
<div id="modal-header">
<img
src="<https://firebasestorage.googleapis.com/v0/b/phocea-75b47.appspot.com/o/Compa%2FDigital_Glyph_Green.svg?alt=media&token=0a3ff908-5eee-4459-ba39-8f6acb56e2d4&_gl=1*13co57p*_ga*MjE1Njc1NTcyLjE2NzgwOTc2Nzc.*_ga_CW55HF8NVT*MTY5ODMwODA3MC4xMDkuMS4xNjk4MzA4MTI5LjEuMC4w>"
alt="WhatsApp"
id="whatsapp-logo"
/>
<h2 id="modal-title">Je suis sur le site et j'ai quelques questions</h2>
</div>
<a
href="INSERER LE LIEN DU CHATBOT"
target="_blank"
class="whatsapp-button"
>DISCUTER AVEC NOUS</a
>
<div id="modal-footer">
<a href="<https://getsimio.com>" target="_blank">Powered by <b>Simio</b></a>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const whatsappBubble = document.getElementById("whatsapp-bubble");
const whatsappModal = document.getElementById("whatsapp-modal");
const whatsappIconClosed = document.getElementById("whatsapp-icon-closed");
const whatsappIconOpen = document.getElementById("whatsapp-icon-open");
whatsappBubble.addEventListener("click", function () {
if (whatsappModal.style.display === "flex") {
whatsappModal.style.display = "none"; // Close the modal if it's open
whatsappIconClosed.style.display = "block"; // Show the closed icon
whatsappIconOpen.style.display = "none"; // Hide the open icon
} else {
whatsappModal.style.display = "flex"; // Open the modal if it's closed
whatsappIconClosed.style.display = "none"; // Hide the closed icon
whatsappIconOpen.style.display = "block"; // Show the open icon
}
});
whatsappModal.addEventListener("click", function (event) {
if (event.target === whatsappModal) {
whatsappModal.style.display = "none"; // Close the modal if it's open
whatsappIconClosed.style.display = "block"; // Show the closed icon
whatsappIconOpen.style.display = "none"; // Hide the open icon
}
});
});
</script>
Vous devez vous rendre dans le custom code de votre thème Shopify et vous rendre dans le fichier theme.liquid
À insérer tout en bas de votre fichier theme.css de votre thème Shopify.
<aside> 👉 Copiez le code ci dessous et insérez le tout en bas de votre fichier theme.css de votre thème Shopify.
</aside>
<aside> 💡 Si vous n’avez pas de fichier theme.css Insérez le code ci dessous entre ces deux balises à la place des … <style> … </style>
Puis copiez collez le tout en dessous du code précédent, dans le fichier theme.liquid
</aside>
#whatsapp-bubble {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
}
#whatsapp-icon-closed img {
width: 60px; /* Adjust the size as needed */
height: auto;
cursor: pointer;
}
#whatsapp-icon-open img {
width: 60px; /* Adjust the size as needed */
height: auto;
cursor: pointer;
}
#whatsapp-modal {
position: absolute;
bottom: 80px; /* Adjust the distance from the bottom as needed */
right: 0px; /* Adjust the distance from the right as needed */
width: 300px;
height: 200px;
background-color: #fff;
padding: 10px;
display: none;
border-radius: 10px;
box-shadow: 4px 4px 0px 0px #22184b;
border: 1px solid #000000;
flex-direction: column;
justify-content: space-between; /* Add space between items */
align-items: flex-start;
}
.whatsapp-button {
display: block;
text-align: center;
background-color: #25d366; /* WhatsApp green color */
color: #fff;
padding: 10px;
border-radius: 5px;
text-decoration: none;
margin-top: 10px;
font-weight: bold;
width: 100%; /* Take the full width */
}
#modal-footer {
width: 100%; /* Take the full width */
text-align: center;
font-size: 10px;
}
#modal-header {
display: flex;
align-items: top;
}
#whatsapp-logo {
width: 45px; /* Adjust the size as needed */
height: auto;
}
#modal-title {
margin-left: 10px; /* Adjust the margin as needed to separate the title from the logo */
}