Widget HTML


Le bouton en haut à droite , donne un aperçu de l'aspect visuel de votre widget au fur et à mesure sans avoir besoin d'enregistrer à chaque fois. 

Il est toutefois nécessaire d' afin de prendre en compte vos modifications et les mettre en ligne. 


Design du widget

Contenu du widget

Sur la gauche un outil Wysiwyg permet de mettre en place le contenu de votre widget HTML comme vous le souhaitez. 

Avec quelques connaissances, vous pouvez également réaliser votre contenu en code HTML en cliquant sur le bouton .

Configurer le widget

Sur la droite, plusieurs onglets donnent la main sur la configuration du widget.

Style

Renseigner le nom de l'ID


Il vous faudra ensuite intégrer le code qui vous est donné, directement dans votre site pour afficher votre widget. 

Couleur de fond du widget et fond transparent




Couleur de texte du widget



Image de fond


Cette fonction est (dés)activable. 

Formats acceptés : PNG, JPG, GIF

Taille conseillée : L x H = 540px x Libre 

La taille de l'image de fond ne modifie pas la taille de la popup

En cliquant sur Editer, il est possible d'ajouter une image de fond présente sur votre ordinateur ou avec une url. 


Il est également possible de modifier l'opacité de l'image. Plus celle ci est faible et plus le fond est transparent. 



Largeur et hauteur du widget


Cette configuration est optionnelle mais vous permet d'indiquer une taille pour votre widget HTML. Si vous laissez ces champs vide, le widget s'adaptera à l'espace dont il dispose. 

 

Action


Cet onglet donne la main sur les interactions possibles avec le widget. Chacune d'entre elles est (dés)activable. En voici le détail ci-dessous. 

Lien du widget

Si cette option est désactivée, le bouton et le formulaire email ne seront pas disponibles.



  • Si l'option "Ouvrir le lien dans un nouvel onglet" est décochée, la redirection se fera dans la page en cours. 

En Aperçu direct, le lien sera toujours ouvert dans un nouvel onglet pour éviter de perdre vos modifications. En effet, ce bouton montrant vos modifications sans que vous n'ayez besoin d'enregistrer à chaque fois, une ouverture dans le même onglet vous ferait perdre les données non sauvegardées.

  • Lien vers un module de l'opération, permet de sélectionner directement un module faisant partie de la même opération.

  • Lien personnalisé, donne la possibilité d'indiquer un lien quelconque pour une redirection de votre choix (exemple : une page produit). 

Bouton


  • Texte du bouton : modifie le texte indiqué sur le bouton,
  • Couleur de fond et couleur du texte : personnalisent les couleurs, 
  • Taille du bouton : 4 tailles sont pré-configurées,
    • Très petit : 
    • Petit : 
    • Normal : 
    • Grand : 
  • Alignement du bouton : déplace le bouton sur le widget.


Formulaire email

Cette option permet uniquement une connexion automatique pour éviter l'étape de connexion du module. En revanche, cela ne permet pas de remonter les profils dans la CRM si le lien du widget redirige vers une page spécifique et non le module.




CSS (avancé)


Il est possible de pousser la configuration des widgets en les modifiant par CSS. Nous nous assurons que les modifications ne concerneront que le widget ciblé en préfixant, nous-même, chacune des règles insérées. Il n'est donc pas nécessaire d'indiquer les ID #sp-widgets-container et #sp-widget-widget_id. 

Affichage

Pages où le widget sera affiché


  • Sur toutes les pages, affiche le widget sur toutes les pages du site contenant le script d'affichage.  Avec possibilité d'exclure la page d'accueil, et/ou des pages du site dont l'url contient un ou plusieurs mots. Pour cela, il faut simplement indiquer les mots que l'url ne doit pas contenir. S'il y a plusieurs mots, il suffit de les séparer par une virgule sans espace. Ainsi, on pourrait par exemple exclure la page des conditions générales de ventes (http://www.monsite.fr/cgv.html)et les pages contenant des pantalons courts (http://www.monsite.fr/articles/pantalon-court-bleuetgris.html)en indiquant cgv,pantalon-court
  • Sur une sélection de pages, suit le même principe. Il faut indiquer des termes particuliers dans le champs dédié à cette effet pour cibler les pages dont l'url contient le ou les mots choisis. Il y est également possible d'y exclure des pages dont la page d'accueil en cochant l'option adéquat. 
  • Sur la page d'accueil, il faut simplement préciser l'url précise de la page en question. L'option d'inclure des pages supplémentaires en se basant sur l'url reste accessible ici aussi. 

Attention

L'url de votre page d'accueil est souvent différente de ce que vous voyez. Elle contient très souvent un slash ("/") à la fin que vous ne voyez pas. Pour être sûr que cela fonctionne, procédez à un copier/coller de l'url de la page.

  • Affichage manuel (utilisateurs avancés), permet de rediriger vers une url en y forçant l'affichage du widget. Cela fonctionne grâce à une ancre à ajouter à la fin de l'url. Cette ancre contient l'id du widget. Il faut toutefois bien sélectionner cette option et activer la popup pour que cela fonctionne. Il est également possible d'utiliser une fonction Javascript pour réaliser cet affichage de manière manuel : 
sp$('body').on('SPREAD_ready', function(){
//SPREAD.openWidget(remplacer par le widget_id);
//SPREAD.reduceWidget(remplacer par le widget_id);
//SPREAD.destroyWidget(remplacer par le widget_id);
});

Gestion des écrans d'affichage

Il est possible de choisir les écrans sur lesquels le widget sera affiché. 


Ceci ne fonctionne que si le site est responsive. Dans le cas contraire, la désactivation ne sera pas possible et les affichages "Tablette" et "Mobile" ne seront pas pris en compte. L'affichage "Ordinateur" sera prioritaire.

Délai d'affichage

Sur un nombre de pages vues


Pour les options tenant compte d'un nombre de pages : toutes les pages vues sont comptées et non pas uniquement les pages où le widget est censé être affiché.


Par exemple : Je mets en place un affichage après 5 pages vues sur une sélection de pages contenant le mot "article" dans l'url. En visitant le site, je passe par la page d'accueil, deux menus (hors articles), un article puis un second. Toutes les pages seront donc comptées et je ne verrai mon widget qu'à partir du second article vu.


  • Tout le temps, affiche le widget sans restriction sur le nombre de pages vues. 
  • Après x pages, indique un nombre de pages à parcourir avant que le widget ne s'affiche. Avec possibilité de remettre le compteur à zéro pour chaque visite.
  • Toutes les x pages, indique le l'affichage se fera après avoir vu x pages puis il disparaitra de nouveau avant de s'afficher de nouveau après x pages. On retrouve la possibilité de remettre le compteur à zéro pour chaque visite. 

Cette option peut être contrée par l'absence de version réduite. En effet, si l'internaute ferme définitivement le widget, il ne réapparaitra pas après avoir parcouru le nombre de pages attendu.

  • Jusqu'à x pages, permet d'indiquer un affichage uniquement sur la ou les premières pages chargées. De nouveau, le compteur peut être remis à zéro pour chaque visite. 

Sur le chargement de page


  • Immédiatement après le chargement du site, affiche le widget dès que la page est chargée. 
  • Après un certain temps passé sur la page, permet d'indiquer un temps en secondes après le chargement pour que l'affichage se fasse.
  • Quand l'utilisateur essaie de quitter la page, affiche le widget uniquement lorsque l'internaute tente de fermer le site.

Si vous activez la version réduite du widget, celle ci sera affichée par défaut. Et le widget s'ouvrira lorsque l'utilisateur essaiera de quitter.

Activation

  • Activer immédiatement, met le widget directement en ligne.
  • Programmer permet d'indiquer une date d'activation automatique ainsi qu'une date de désactivation automatique. 

Dans les deux cas, nous vous demandons de confirmer votre choix. 


Résultat

Vous obtenez ainsi une intégration directement dans votre HTML Vous pouvez ainsi ajouter à votre site un widget de la taille d'un encart jusqu'au widget qui prend toute une page de votre site.