Coder CTA en html
Bonjour,
J'ai codé un bouton call to action cette semaine et j'aimerais ajouter quelque chose. Je vous explique. En journée, j'aimerais le laissé tel quel (il redirige vers le numéro de l'entreprise). cependant, j'aimerais qu'entre 19h30 et 8H, le bouton se modifie avec un autre message et il redirigerait vers un lien du site. C'est possible ?
voici mon code actuel (j'ai délibérément retirer le numéro de tph)
<div style="display: flex; justify-content: center;"><a href="0100000000" style="display: block; height: 100px; width: 500px; background: #ff6e36; color: #ffffff; text-align: center; font-weight: bold; font-size: 300%; line-height: 100px; font-family: Arial; border-radius: 20px; text-decoration: none;">Appelez nous !</a></div>
<hr style="margin-top: 55px; margin-bottom: 55px; text-align: center; width: 700px;" />
J'ai codé un bouton call to action cette semaine et j'aimerais ajouter quelque chose. Je vous explique. En journée, j'aimerais le laissé tel quel (il redirige vers le numéro de l'entreprise). cependant, j'aimerais qu'entre 19h30 et 8H, le bouton se modifie avec un autre message et il redirigerait vers un lien du site. C'est possible ?
voici mon code actuel (j'ai délibérément retirer le numéro de tph)
<div style="display: flex; justify-content: center;"><a href="0100000000" style="display: block; height: 100px; width: 500px; background: #ff6e36; color: #ffffff; text-align: center; font-weight: bold; font-size: 300%; line-height: 100px; font-family: Arial; border-radius: 20px; text-decoration: none;">Appelez nous !</a></div>
<hr style="margin-top: 55px; margin-bottom: 55px; text-align: center; width: 700px;" />
1 réponse
-
ModérateurBonjour,
En html seul ... non ...
le html n'est pas un langage de programmation...
Pour cela il va falloir y ajouter un langage de programmation tel que du javascript par exemple.
-
ModérateurSalut,
Effectivement, je pense que quelques lignes de javascript peuvent répondre à la problématique.
Je n'ai pas testé, mais ce genre de code devrait donner une bonne base : https://stackoverflow.com/questions/13823856/javascript-check-time-and-display-message/13823986#13823986
Juste une petite remarque en passant, il est généralement conseillé de gérer tout ce qui est apparence dans un fichier CSS séparé plutôt que directement dans les balises. -
@PierrecastorIl ne faut pas oublier que le temps est relatif ;)
Avec ce code on va récupérer l'heure du navigateur.
A priori le but de la demande est d'afficher le numéro uniquement aux heures d'ouvertures du bureau. Il faudrait donc prendre en compte le fuseau horaire car si on consulte le site depuis un autre pays/un autre fuseau, le numéro va s'afficher en dehors des horaires d'ouvertures.
Au final il serait p-e plus pratique d'afficher le numéro à tout moment et d'afficher simplement les horaires en dessous (avec éventuellement un lien vers un formulaire de contact).
Ne pas afficher le numéro n’empêchera pas ceux qui l'ont déjà ou qui le récupère autrement d'appeler en dehors des horaires.
Ceux qui respectent les horaires pourront au moins noter le numéro pour appeler le lendemain (plutôt que ne pas appeler du tout, ce qui le but inverse d'un clic to action). -
Modérateur@PitetHeureusement, en javascript, il est plutôt facile de calculer les heures en fonction des différents fuseaux horaires...
On peut même utiliser les heures UTC ...
-
