Différences

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

Lien vers cette vue comparative

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>​