______________________________________________________
Créer un bouton d'appel
augras
Messages 436Moderateur
Ils'agit d'un bouton qui attire votre attention pour une prise de contact, demander un rappel téléphonique, un don, des liens rapides vers les médias dits sociaux...
J'ai utilisé le script suivant ;
https://github.com/axxler/contacts-button-widget
Vous y trouverez un exemple du script tel que proposé par son créateur et reproduit ci-dessous :
Et là vous trouverez l'adaptation réalisée et décrite dans ce message : https://augras.eu/ZwiiCMS/bouton-d-appel
:
Pour commencer il faut mettre les lignes suivantes dans l'Éditeur de script Head (dans l'administration du site icône Configuration puis à la rubrique Scripts externes cliquer sur Script dans Head) :
Éditer la page la page sur laquelle vous voulez mettre le bouton et aller à l'onglet Extensions.
Dans la partie Contenu avancé cliquer sur Éditeur CSS et coller intégralement le code ci-dessous :
Le code d'origine est repris et largement mis en commentaire (si envie/besoin d'ajouter des médias sociaux se sera extrêmement simple) : la dernière partie a été dupliquée 2 fois et des icônes ont été modifiées pour obtenir l'exemple mis en lien plus haut.
Les liens sont vers des pages internes : elles n'existent pas forcément chez vous et il faut donc adapter.
Il suffit de décompresser l'archive ci-dessous à la racine de votre site pour voir apparaître le bouton sur la page.
Il est très simple de définir un bouton différent suivant les pages.
Édition : correction du code pour afficher l'icône d'un caddy pour la Boutique (fas fa-shopping-cart au lieu de fas fa fa-address-book qui est utilisée pour les Contacts)
J'ai utilisé le script suivant ;
https://github.com/axxler/contacts-button-widget
Vous y trouverez un exemple du script tel que proposé par son créateur et reproduit ci-dessous :
Et là vous trouverez l'adaptation réalisée et décrite dans ce message : https://augras.eu/ZwiiCMS/bouton-d-appel
: Pour commencer il faut mettre les lignes suivantes dans l'Éditeur de script Head (dans l'administration du site icône Configuration puis à la rubrique Scripts externes cliquer sur Script dans Head) :
<!--Contact widget</script>--> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" media="screen" /> <link href="site/data/contacts-widget/css/contacts-button-widget.css" rel="stylesheet" media="screen" /> <script src="site/data/contacts-widget/js/contacts-button-widget.js"></script> <!--Fin Contact widget</script>-->
Dans le script d'origine il y a un appel à JQuery qu'il ne faut pas mettre avec Zwii : JQuery y est déjà intégré et cet appel à une version différente créé des effets de bord.
Enregistrer.
On constate qu'il va falloir les fichiers contacts-button-widget.css et contacts-button-widget.js à placer respectivement dans site/data//contacts-widget/css/ et site/data/contacts-widget/js/ : ces fichiers sont dans le zip ci-dessous.
Enregistrer.
On constate qu'il va falloir les fichiers contacts-button-widget.css et contacts-button-widget.js à placer respectivement dans site/data//contacts-widget/css/ et site/data/contacts-widget/js/ : ces fichiers sont dans le zip ci-dessous.
Éditer la page la page sur laquelle vous voulez mettre le bouton et aller à l'onglet Extensions.
Dans la partie Contenu avancé cliquer sur Éditeur CSS et coller intégralement le code ci-dessous :
</code><style>
#contact_widget_button{bottom: 20% !important;}
</style></pre>Enregistrer<br><br>Par défaut le bouton est placé en bas à droite de la page : si la page est plus grande que la hauteur de l'écran le bouton n'est pas continuellement visible.<br>Avec ce paramètre le bouton est toujours présent à l'écran.<br><br>Le code HTML du bouton est à placer directement dans le code de la page : au lieu de l'onglet extension cliquer sur l'onglet Contenu et dans la barre d'icône de l'éditeur de texte sur <> pour afficher le code de la page.<br>Coller le code n'importe où :<br></div><div><pre class="CodeBlock"><code><!-- [START] Contact Widget Button -->
<div id="contact_widget_substrate"></div>
<div id="contact_widget_button" class="contact_widget_left d-flex align-items-center justify-content-center">
<div class="contact-widget-pulsation"></div>
<div class="contact-widget-icon text-center d-flex align-items-center justify-content-center"><i class="fa fa-bars"></i><span class="contact-widget-text d-none"> Menu</span></div>
<div class="contact-widget-dropdown d-flex flex-column align-items-start"><!--<a rel="noopener noreferrer" href="https://m.me/my-facebook-messenger" target="_blank" class="contact-widget-item d-flex align-items-center"><span class="contact-widget-item-icon contact-widget-messenger d-flex align-items-center justify-content-center"><i class="fab fa-facebook-messenger"></i></span><span>Messenger</span></a> <a rel="noopener noreferrer" href="https://api.whatsapp.com/send?phone=+199999999999" target="_blank" class="contact-widget-item d-flex align-items-center"><span class="contact-widget-item-icon contact-widget-whatsapp d-flex align-items-center justify-content-center"><i class="fab fa-whatsapp"></i></span><span>WhatsApp</span></a> <a rel="noopener noreferrer" href="https://t.me/+199999999999" target="_blank" class="contact-widget-item d-flex align-items-center"><span class="contact-widget-item-icon contact-widget-telegram d-flex align-items-center justify-content-center"><i class="fab fa-telegram"></i></span><span>Telegram</span></a> <a rel="noopener noreferrer" href="viber://chat?number=+199999999999" target="_blank" class="contact-widget-item d-flex align-items-center contact-widget-viber-desktop"><span class="contact-widget-item-icon contact-widget-viber d-flex align-items-center justify-content-center"><i class="fa-phone-square fab fa-viber"></i></span><span>Viber</span></a> <a rel="noopener noreferrer" href="viber://add?number=+199999999999" target="_blank" class="contact-widget-item d-flex align-items-center contact-widget-viber-mobile"><span class="contact-widget-item-icon contact-widget-viber d-flex align-items-center justify-content-center"><i class="fa-phone-square fab fa-viber"></i></span><span>Viber</span></a> <a rel="noopener noreferrer" href="mailto:email@to.me" class="contact-widget-item d-flex align-items-center"><span class="contact-widget-item-icon contact-widget-email d-flex align-items-center justify-content-center"><i class="far fa-envelope fa fa-envelope-open"></i></span><span>email@to.me</span></a>--> <!-- <div data-src="#callback_form" data-fancybox="" class="contact-widget-item d-flex align-items-center"><span class="contact-widget-item-icon contact-widget-call d-flex align-items-center justify-content-center"><i class="fas fa fa-phone"></i></span><span>Callback request</span></div>--> <a href="contact" rel="data-lity" class="contact-widget-item d-flex align-items-center"><span style="background: blue;" class="contact-widget-item-icon contact-widget-contacts d-flex align-items-center justify-content-center"><i class="fas fa fa-address-book"></i></span><span>Contacts</span></a> <a href="contact" class="contact-widget-item d-flex align-items-center"><span style="background: orange;" class="contact-widget-item-icon contact-widget-contacts d-flex align-items-center justify-content-center"><i class="fas fa-shopping-cart"></i></span><span>Boutique</span></a> <a href="contact" class="contact-widget-item d-flex align-items-center"><span style="background: green;" class="contact-widget-item-icon contact-widget-contacts d-flex align-items-center justify-content-center"><i class="fas fa-euro-sign"></i></span><span>Dons</span></a></div>
</div>
<!-- [END] Contact Widget Button -->Valider en cliquant sur OK puis sur Enregistrer (en haut à droite de l'éditeur).Le code d'origine est repris et largement mis en commentaire (si envie/besoin d'ajouter des médias sociaux se sera extrêmement simple) : la dernière partie a été dupliquée 2 fois et des icônes ont été modifiées pour obtenir l'exemple mis en lien plus haut.
Les liens sont vers des pages internes : elles n'existent pas forcément chez vous et il faut donc adapter.
Il suffit de décompresser l'archive ci-dessous à la racine de votre site pour voir apparaître le bouton sur la page.
Il est très simple de définir un bouton différent suivant les pages.
Édition : correction du code pour afficher l'icône d'un caddy pour la Boutique (fas fa-shopping-cart au lieu de fas fa fa-address-book qui est utilisée pour les Contacts)
Post edited by augras on
0
Connectez-vous ou Inscrivez-vous pour répondre.
Commentaires
Cest à la ligne 35 du fichier contact-button-widget que ça se passe :
.contact-widget-dropdown{position:absolute;bottom:60px;right:36px;padding:20px;border-radius:6px;background:#fff;display:block;opacity:0;z-index:-1;margin-bottom:20px;-webkit-transition:margin-bottom .3s ease,opacity .3s ease;transition:margin-bottom .3s ease,opacity .3s ease;box-shadow:5px 12px 30px rgba(0,0,0,.35);visibility:hidden;min-width:250px}C'est le min-width:250px qui règle ça, tout à fait à la fin de la ligne.J'ai donc mis dans l'édition de la page, onglet extension puis Éditer CSS:
.contact-widget-dropdown{width:auto !important}Mais ça ne fonctionne pas !Si je mets width:450px c'est bon mais auto n'est pas pris en compte.
J'ai été obligé de corriger le fichier initial et là ça fonctionne.
Pourquoi ça ne fonctionne pas comme ça devrait ? Il y a un truc que je ne vois pas ?
Le 100% est bien pris en compte, par contre il n'englobe que les icônes, pas le texte à côté.
C'est très étonnant que auto fonctionne directement dans le fichier css mais pas dans l'éditeur css de la page.
.contact-widget-dropdown{width:auto !important}Et ça fonctionne donc parfaitement avec :
.contact-widget-dropdown{min-width:auto !important}C'est vrai que je suis très content quand j'arrive à faire un truc.
Malheureusement ça me prend un temps fou !
Les abstractions des langages "récents" me passent à 100000 : j'arrive à quelque trucs en html de papi, en php, en css sous la torture (j'exagère mais pas tant que ça).
Heureusement il y a des gens talentueux qui font plein de belles et bonnes choses et les partage.
Le lien href=”tel” ne doit pas comporter d’espace, vous devez écrire l’indicatif international du pays et ne pas inscrire le premier 0 du numéro de téléphone.
https://artweave.fr.foC'est effectivement étonnant que l'appel téléphonique ne soit pas dans les types de contacts proposés puisqu'il y a par ailleurs quasiment tout les appels possibles..
La demande de rappel téléphonique est également quelque chose de courant et est pourtant absente : mais elle implique plus de choses et est certainement plus complexe à mettre en oeuvre.
J'étais en train de mettre ce bouton sur un site et je me suis rendu compte qu'avec ce que j'ai mis dans le zip le fonctionnement était un peu différent du script initial... dû à une erreur de ma part.
Je laisse tel quel le zip car après tout c'est un fonctionnement que l'on peut vouloir aussi.
Mais je donne ici les infos pour avoir le fonctionnement initial du script qui est que l'icône enveloppe, remplacée chez moi par le burger, devrait clignoter puis disparaître au clic pour ne laisser que le texte.
Et pour que cela fonctionne il faut simplement remplacer fa-envelope par fa-bars dans les fichiers contacts-button-widget.css (lignes 33 et 55) et contacts-button-widget.js (lignes 6 et 14).
En partant du zip ci-dessus une adaptation intéressante est possible : le burger est donc fixe mais on lui ajoute une icône en haut à droite qui elle clignote (pour avoir un effet du style "vous avez un nouveau message" par exemple), et au clic pas de texte et seulement le burger.
Dans l'exemple ci-dessous c'est une étoile jaune qui est utilisée.
Dans le code de la page il faut remplacer
par
et dans les fichiers contacts-button-widget.css (lignes 33 et 55) et contacts-button-widget.js (lignes 6 et 14) fa-enveloppe par fa-star.
Tout cela n'est certainement pas très canonique, mais c'est déjà pas mal pour moi.