Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
|
integrer_une_popup [2024/03/15 09:52] florent |
integrer_une_popup [2024/03/15 09:53] (Version actuelle) florent ancienne révision (2023/08/03 13:20) restaurée |
||
|---|---|---|---|
| Ligne 2: | Ligne 2: | ||
| ===== Créer une popup via Elfsight ===== | ===== 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) | 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 "FAQ" | + | Une fois connecté à Elfsight, rendez-vous sur l'application "Popup" |
| {{:elfsight.png?600|}} | {{:elfsight.png?600|}} | ||
| Ensuite, cliquez sur "Create widget" à droite de l'écran | Ensuite, cliquez sur "Create widget" à droite de l'écran | ||
| - | Une fois sur l'outil de création, vous pouvez choisir plusieurs paramètres pour modifier votre FAQ : template, texte, image, page(s) concernée(s), paramètres d'affichage, etc. | + | 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" : | Quelques exemples à paramétrer depuis "Settings" : | ||
| Ligne 14: | Ligne 16: | ||
| * 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) | * 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 FAQ** : 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 FAQ"). | + | **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 "Publish" pour mettre en ligne la FAQ. | + | Une fois votre configuration terminée, cliquez sur "Save" pour créer la popup. |
| - | ===== Intégrer la FAQ à votre MB ===== | + | ===== Intégrer la popup à votre MB ===== |
| - | Il faut récupérer le code du widget souhaité depuis Elfsight (https://dash.elfsight.com/apps/faq). | + | 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 "Install" de votre FAQ et copiez le code affiché. | + | Pour ce faire, cliquez sur le bouton "Add to website" de votre popup et copiez le code affiché. |
| {{::elfsight_add_to_website.png?600|}} | {{::elfsight_add_to_website.png?600|}} | ||
| - | Ensuite, rendez-vous sur le back office de votre marque blanche, sur la page où vous souhaiterez que la FAQ s'affiche. | + | 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 |
| - | Dans un champ texte (exemple "Body" ou "Text"), cliquer sur le bouton "Source", puis coller le code précédemment copié à l'endroit souhaité. | + | |
| + | 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> | ||
| - | {{::faq_elfsight.png?600|}} | + | <div class="elfsight-app-popup-1"></div> |
| - | Une fois la page enregistrée, la FAQ s'affichera. | + | <div class="elfsight-app-popup-2"></div> |