Créer un bouton d'appel

augrasaugras Messages 206Moderateur
28 janv. modifié dans Trucs et astuces
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) : 
<!--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.

É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">&nbsp; 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

Commentaires

  • fredfred Messages 1,043Administrateur
    Tu aurais des captures d’écran du rendu ? C’est très intéressant.
    The f....g boss
  • augrasaugras Messages 206Moderateur
    Fichiers .gif animés ajoutés sous les liens.
  • augrasaugras Messages 206Moderateur
    28 janv. modifié
    Trouvant la fenêtre qui s'ouvre au clic sur le bouton trop large j'ai cherché comment obtenir ce que je voulais.
    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 ?

  • TipOTipO Messages 348Moderateur
    Bonjour,
    as-tu essayé 100% ? Je ne sais plus dans quel contexte, j'avais obtenu un résultat avec ce paramètre plutôt que Auto.
    Explorateur de ZwiiCMS, contributeur tâtonnant…
    Maquettes locales (MAMP, Php 7.4.2), pré prod en ligne sous Php 8.1


  • augrasaugras Messages 206Moderateur
    Bonjour @TipO,
    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.
  • augrasaugras Messages 206Moderateur
    Je suis vraiment trop con ! Si, si.
    .contact-widget-dropdown{width:auto !important}
    Ce n'est pas pris en compte tout simplement parce que c'est min-width qui'l y a dans le fichier css !
    Et ça fonctionne donc parfaitement avec :
    .contact-widget-dropdown{min-width:auto !important}
  • TipOTipO Messages 348Moderateur
    Ah oui, on n'est jamais à l'abri d'une bourde simplissime. On préfère ça, c'est ce qui fait le charme du développement…
    Explorateur de ZwiiCMS, contributeur tâtonnant…
    Maquettes locales (MAMP, Php 7.4.2), pré prod en ligne sous Php 8.1


  • augrasaugras Messages 206Moderateur
    Le "charme du développement" : il cache bien ses charmes pour moi !
    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.
  • NikoNiko Messages 64Membre
     Bonus
    On peut également ajoutez un bouton qui depuis un smarphone permet un appel direct ou envoyer un sms

    <a href="tel:+33711223344">Cliquez ici pour appeler le 07 11 22 33 44 ou <img src="../bouton-appel.png"></a>

    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.

    ou
    <a href="sms:+33711223344">
    <img src="../bouton-appel.png">
    </a>
    au clic, le visiteur est automatiquement redirigé vers son application sms native et peut vous envoyer un message.



  • augrasaugras Messages 206Moderateur
    Merci @Niko,
    C'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.
Connectez-vous ou Inscrivez-vous pour répondre.