Différences

Ci-dessous, les différences entre deux révisions de la page.

--- integrer_une_popup [2023/05/16 07:47]
florent créée
+++ integrer_une_popup [2024/03/15 09:53] (Version actuelle)
florent ancienne révision (2023/08/03 13:20) restaurée
@@ Ligne 1: / Ligne 1: @@
-====== Intégrer une popup ======
+====== Créer et intégrer une popup ======
+===== Créer une popup via Elfsight =====
+Vous pouvez créer une popup dédié via l'outil "Elfsight" : https://apps.elfsight.com/ (codes de connexion transmis par mail / slack, renvoyés sur demande à jules.grzyb@francevelotourisme.com)
+Une fois connecté à Elfsight, rendez-vous sur l'application "Popup"
+{{:elfsight.png?600|}}
+Ensuite, cliquez sur "Create widget" à droite de l'écran
+Une fois sur l'outil de création, vous pouvez choisir de nombreux paramètres pour modifier votre popup : template, texte, image, page(s) concernée(s), paramètres d'affichage, etc.
+__**Point de vigilance :** les popups peuvent rapidement être perçues comme intrusives pour l'utilisateur : nous vous conseillons de bien les paramétrer pour limiter ce risque__
+Quelques exemples à paramétrer depuis "Settings" :
+  * Frequency : préférez "Show once", "Show every day" ou "Show every week" plutôt que "Show every time"
+  * Pages : sélectionnez les pages précises sur lesquelles apparaitront votre popup plutôt que "All pages"
+  * Triggers : cochez par exemple "Time on page duration" en indiquant une durée à partir de laquelle la popup apparaîtra pour l'utilisateur (ex : 4 secondes)
+**Pensez à nommer votre popup** : le compte étant mutualisé, pour retrouver votre popup, identifiez la avec le nom de votre marque blanche (champ en haut à gauche de l'écran, nommé par défaut "Untitled widget").
+Une fois votre configuration terminée, cliquez sur "Save" pour créer la popup.
+===== Intégrer la popup à votre MB =====
+Il faut récupérer le code du widget souhaité depuis Elfsight (https://apps.elfsight.com/panel/applications/popup/).
+Pour ce faire, cliquez sur le bouton "Add to website" de votre popup et copiez le code affiché.
+{{::elfsight_add_to_website.png?600|}}
+Ensuite, rendez-vous sur le back office de votre marque blanche, onglet "Configuration", puis cliquez sur "Popup Elfsight". Lien d'accès : urldelaMB/admin/config/fvt/popup
+Collez le code précédemment copié puis cliquez sur "Enregistrer la configuration".
+Votre popup est maintenant fonctionnelle.
+==== Intégrer plusieurs popups sur un même site ====
+Si vous souhaitez ajouter plusieurs popups sur un même site, pour chaque nouvelle popup, il suffira de copier et ajouter la 2ème ligne de code seulement (qui débute et se termine par <div>).
+Exemple de rendu pour 2 popup:
+<script src="https://apps.elfsight.com/p/platform.js" defer></script>
+<div class="elfsight-app-popup-1"></div>
+<div class="elfsight-app-popup-2"></div>