Depuis août 2024, Wix ne permet plus l'intégration de notre plugin de réservation.
Il vous faut désormais faire une redirection vers votre instance 4escape.
Wix a modifié l'intégration HTML classique
En effet, tout code HTML ou iframe est dorénavant imbriqué dans une autre iframe, hébergée sur un autre domaine et de type https://www-votresite-com.filesusr.com/html/b81d41_1f3084a8fc32a6cd379b508ca9609f2d.html ...
Cela rend d'autant plus complexe le tracking ainsi que la communication entre les différents éléments :
[votre-site] <--> [iframe-wix] <--> [iframe-4escape]
Nous allons voir comment bypasser ce fonctionnement pour avoir :
[votre-site] <--> [iframe-4escape]
Prérequis
Il vous faut obligatoirement une des offres payantes de Wix, vous permettant d'utiliser les Eléments Personnalisés et Mode Développeur.
Intégration du code Javascript
Commencons par ajouter le code javascript de 4escape qui s'occupera d'insérer automatiquement l'iframe. Il faut cliquer sur Ajouter > Intégration > Outils marketing > Code personnalisé
Cliquez ensuite sur "+ Ajouter un code personnalisé"
Pour le premier élément "Collez l’extrait de code ici", vous allez devoir aller dans 4escape.
Dans Menu >Paramétrage > Intégration site web > Iframe et récupérez le code tout en bas.
Il devrait ressembler à ceci :
<script>!function(e,t){var r=e.createElement(t),a=e.getElementsByTagName(t)[0],n=new Date,s=""+n.getFullYear()+("0"+(n.getMonth()+1)).slice(-2)+("0"+n.getDate()).slice(-2);r.defer=1,r.src="https://jp.4escape.io/public/js/iframe.min.js?v="+s,a.parentNode.insertBefore(r,a)}(document,"script");</script>Copiez ce code, et insérez le dans Wix, dans le champ "Collez l’extrait de code ici" que nous avions laissé vide
Pour les champs suivants, voici la configuration recommandée :
Nom : Iframe 4escape
Ajouter un code aux pages : Toutes les pages > Télécharger le code une fois
Placez le code dans : Corps - fin
Vous devriez avoir cette configuration :
Enregistrez cet élément.
Intégration du code HTML
Commencez par activer le mode développeur dans Wix :
Ajoutez ensuite un Elément personnalisé en cliquant sur Ajouter > Intégration > Intégration personnalisée > Elément personnalisé
Placez cet élément comme bon vous semble sur votre page, ce sera lui qui contiendra le calendrier 4escape.
Sélectionnez ensuite cet élément, et cliquez sur "Paramètres".
Sélectionnez "Dossier Velo", créez un nouveau fichier Velo que vous nommerez forescape-iframe-container.js, et forescape-iframe-container en Nom du tag.
Une fenetre de modification de code va s'ouvrir en bas de la page, et dans l'onglet "forescape-iframe-container.js", collez le code suivant :
const createStyle = () => {
const styleElement = document.createElement('style');
styleElement.innerHTML = `
forescape-iframe-container {
display: flex;
height: 100%;
width: 100%;
}
`;
return styleElement;
};
class ForescapeIframeContainerElement extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.appendChild(createStyle());
}
}
customElements.define('forescape-iframe-container', ForescapeIframeContainerElement);
Vous pouvez réduire le panneau d'édition.
Cliquez dans votre page sur votre Elément personnalisé, puis sur "Définir les attributs".
C'est ici que vous allez reprendre un par un les attributs qui vous on été donnés dans 4escape dans le Générateur de code iframe :
Exemple :
<div class="forescape" data-subdomain="votre-escape" data-type="bookings"></div>
Vous devrez alors ajouter les attributs suivants :
class | forescape |
data-subdomain | votre-escape |
data-type | bookings |
Vous n'avez plus qu'a Sauvegarder dans Wix et Publier votre page. Votre calendrier devrait s'afficher correctement, et ce, sans iframe intermédiaire.