iframe-popup-load-example - Front-Commerce

Load iframe with a max-height of 350px and a max-width of 780px

Load iframe (href variant) with a max-height of 600px and a max-width of 380px

Exemples de code à insérer pour appeler une popup dans une iFrame:


<button onclick="openPopup({'iframeUrl': 'https://www.front-commerce.com/fr/tableau-comparatif-des-meilleurs-frontends-headless/'})">open iframe from button - full height</button>

<a href="javascript:void(0)" onclick="openPopup({'iframeUrl': 'https:\/\/www.front-commerce.com/fr/tableau-comparatif-des-meilleurs-frontends-headless/', 'maxHeight': '350', 'maxWidth': '780'})">Load iframe with a max-height of 350px and a max-width of 780px</a>

<a href="javascript:openPopup({'iframeUrl': 'https:\/\/www.front-commerce.com/fr/tableau-comparatif-des-meilleurs-frontends-headless/', 'maxHeight': '600', 'maxWidth': '380'})">Load iframe (href variant) with a max-height of 600px and a max-width of 380px</a>

Modifier la partie en violet pour personnaliser:

le lien de la fenêtre iframe
la hauteur de la popup
la largeur de la popup

Pour faire fonctionner les liens ci-dessus, toujours associer le shortcode ci-dessous afin de charger le Javascript correspondant :


[popup_js]

Pour auto-lancer la popup lorsque l’utilisateur quitte le viewport ou déclencher la popup après un délai, ajouter le shortcode ci-dessous à la suite du précédent en indiquant les paramètres de votre choix :

iframeurl: url de la page à afficher dans l’iframe (obligatoire)
maxpopupheight: hauteur maximale de la popup (en px) (optionnel)
maxpopupwidth: largeur maximale de la popup (en px) (optionnel)
snoozeduration: durée de la pause avant d’afficher la popup (en minutes) (optionnel – valeur par défaut : 1440mn = 1 jour)
automationtype: type d’automatisation (‘mouseleave’ ou ‘timeout’) (optionnel – valeur par défaut : ‘mouseleave’)
timeoutduration: durée de la pause avant d’afficher la popup (en ms) (optionnel – valeur par défaut : 6000ms = 6 secondes)

Structure de shortcode pour auto-lancer après un délai (automationtype=”timeout”) :


[popup_js_automation automationtype="timeout" iframeurl="{url}" maxpopupheight="{height}" maxpopupwidth="{width}" timeoutduration="{milliseconds}" snoozeduration="{minutes}"]

Exemple appliqué (maxpopupheight et maxpopupwidth sont optionnels) :


[popup_js_automation automationtype="timeout" iframeurl="https://www.front-commerce.com/best-headless-frontends-comparison-chart/" maxpopupheight="550" maxpopupwidth="680" timeoutduration="6000" snoozeduration="10"]

Structure de shortcode pour lancer la popup lorsque l’utilisateur quitte le viewport (automationtype=”mouseleave”) :


[popup_js_automation automationtype="mouseleave" iframeurl="{url}" maxpopupheight="{height}" maxpopupwidth="{width}" snoozeduration="{minutes}"]

Exemple appliqué (maxpopupheight et maxpopupwidth sont optionnels).

Dans l’exemple ci-dessous, la durée est réglé sur 2mn. Pour une durée d’une journée, par exemple, indiquer 1440 (24 * 60) :


[popup_js_automation automationtype="mouseleave" iframeurl="https://www.front-commerce.com/best-headless-frontends-comparison-chart/" maxpopupheight="550" maxpopupwidth="680" snoozeduration="1440"]

🍪 Cookies