On commence sur UPERIA :
Etape 1 : Assurez vous que votre formulaire soit sur “Formulaire Actif” pour le mettre en ligne, dans les Paramètres du formulaire.
Etape 2 : Récupérez l’URL finale à utiliser” dans les réglages de votre formulaire
Etape 3 : Intégrez l’URL fraîchement récupérée à l’étape précédente dans le code suivant, à la place de « URL FINALE DU FORMULAIRE ». Gardez ce code bien au chaud.
<div id="uperiaIframe"></div>
<script>
function getCookieValue (cookieName) {
var cookie = [];
var cookieValue = "";
cookie = document.cookie.split(';');
for (var i = 0; i < cookie.length; i++) {
var subcookie = cookie[i].split('=');
if (subcookie[0].trim() == cookieName) {
cookieValue = subcookie[1];
break;
}
}
return cookieValue;
}
var url = "URL FINALE DU FORMULAIRE";
var cookieValue = getCookieValue('hubspotutk');
var iframe = document.getElementById('uperiaIframe');
iframe.innerHTML = '<iframe id="uperiaIframeContent" width="100%"
src="'+url+'?hubspotutk='+cookieValue+'"></iframe>';
window.addEventListener('message', function(e) {
document.getElementById('uperiaIframeContent').style.height = e.data.height + 40 +
'px';
document.getElementById('uperiaIframe').style.height = e.data.height + 40 + 'px';
} , false);
</script>
Puis, on termine sur Shopify :
Etape 4 : Connectez-vous sur votre compte Shopify.
Dans le menu de gauche, cliquez sur “Boutique en ligne”, puis cliquez sur “Thèmes”.
Etape 5 : Sélectionnez le bouton “Modifier le code”
Etape 6 : Dans le menu de gauche, sous “Modèles, cliquez sur “Ajouter une nouvelle ressource”
Etape 7 : Choisissez le type de modèle sur lequel vous souhaitez créer.
Dans notre cas, choisissez “page” ainsi que “liquid”. Ensuite, donnez un nom à votre nouveau modèle.
Etape 8 : Y copier le code préparé en ETAPE 3, avec l’URL FINALE DU FORMULAIRE remplacée par l’URL de votre formulaire. Enregistrez.
Etape 9 : Dans le menu de gauche, allez sur “Boutique en ligne”, puis, sur “Pages”
Etape 10 : Cliquez sur “Ajouter une page”
Donnez-lui un nom à cette page pour qu’elle puisse ensuite être facilement accessible, puis enregistrez.
Etape 11 : Cliquez sur le menu déroulant sous “Modèle de thème” et choisissez le nom du modèle créé en ETAPE 7. Cliquez sur “Enregistrer”.
Etape 12 : Cliquez sur “Afficher la page” pour voir à quoi ressemble l’intégration sur votre site Shopify en direct !
Le tour est joué, félicitations 👏
Vous rencontrez des difficultés pour intégrer votre formulaire ? Nous restons à votre disposition à contact@uperia.tech pour vous aider dans l’intégration de votre formulaire intelligent ! 🙂
