Créer un bouton d'appel

augrasaugras Messages 426Moderateur
janvier 2023 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
______________________________________________________
             Logo de la boutique bi1sur.com
         https://bi1sur.com

Commentaires

  • fredfred Messages 1,603Administrateur
    Tu aurais des captures d’écran du rendu ? C’est très intéressant.
    The f....g boss
  • augrasaugras Messages 426Moderateur
    Fichiers .gif animés ajoutés sous les liens.
    ______________________________________________________
                 Logo de la boutique bi1sur.com
             https://bi1sur.com
  • augrasaugras Messages 426Moderateur
    janvier 2023 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 ?

    ______________________________________________________
                 Logo de la boutique bi1sur.com
             https://bi1sur.com
  • TipOTipO Messages 408Moderateur
    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.
    Utilisateur de ZwiiCMS, contributeur tâtonnant.
    Maquette en chantier.


  • augrasaugras Messages 426Moderateur
    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.
    ______________________________________________________
                 Logo de la boutique bi1sur.com
             https://bi1sur.com
  • augrasaugras Messages 426Moderateur
    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}
    ______________________________________________________
                 Logo de la boutique bi1sur.com
             https://bi1sur.com
  • TipOTipO Messages 408Moderateur
    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…
    Utilisateur de ZwiiCMS, contributeur tâtonnant.
    Maquette en chantier.


  • augrasaugras Messages 426Moderateur
    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.
    ______________________________________________________
                 Logo de la boutique bi1sur.com
             https://bi1sur.com
  • NikoNiko Messages 130Membre
     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.



    ______________________________________________________________________________________________________
    https://artweave.fr.fo

  • augrasaugras Messages 426Moderateur
    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.
    ______________________________________________________
                 Logo de la boutique bi1sur.com
             https://bi1sur.com
  • augrasaugras Messages 426Moderateur
    Bonjour,

    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
    <span class="contact-widget-text d-none">&nbsp; Menu</span>
    par

    <span style="color: yellow; width: 5px; height: 5px; position: absolute; top: 0px;" class="fa fa-star">

    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.

    ______________________________________________________
                 Logo de la boutique bi1sur.com
             https://bi1sur.com
Connectez-vous ou Inscrivez-vous pour répondre.