Hey
Can any1 share code or plugin that add a WhatsApp icon in the corner ( Like a live support ) and its only visible on mobiles/tablets ?
Regards
First create your button link with an URL described in this FAQ:
https://faq.whatsapp.com/general/26000030/?lang=de
An easy way to display this button on mobiles or tablets is using CSS Media Queries to hide or show the button depending on the display resolution. For example:
<span class="wa_display"><a href="..." target="_blank"><img src="whatsapp_image.png" ...></a></span>
.wa_display { display: none; }
@media screen and (max-width: 720px) {
.wa_display { display: inline; }
}
Of course you can play with parameter, position and appearance.
[ExiTuS]
(2020-01-09, 11:27 AM)[ExiTuS] Wrote: [ -> ]First create your button link with an URL described in this FAQ:
https://faq.whatsapp.com/general/26000030/?lang=de
An easy way to display this button on mobiles or tablets is using CSS Media Queries to hide or show the button depending on the display resolution. For example:
<span class="wa_display"><a href="..." target="_blank"><img src="whatsapp_image.png" ...></a></span>
.wa_display { display: none; }
@media screen and (max-width: 720px) {
.wa_display { display: inline; }
}
Of course you can play with parameter, position and appearance.
[ExiTuS]
Thanks for your reply can you be a bit more specific
where each code should be copied to ?
any1 would explain it in details?
^ in general,
button related code should be added to
footer template of the theme
Quote:<span class="wa_display"><a href="..." target="_blank"><img src="whatsapp_image.png" ...></a></span>
And
style related code should be added at the bottom of
global.css of the theme
Quote:.wa_display { display: none; }
@media screen and (max-width: 720px) {
.wa_display { display: inline; }
}
Excuse my first post with link to the German english page of the WhatsApp FAQ. Go here for English:
https://faq.whatsapp.com/general/26000030/?lang=en
Just create a simple link mentioned in this FAQ. For example:
<span class="wa_display">
<a href="https://wa.me/123456789" target="_blank">
<img src="whatsapp_image.png" width="..." height="..." alt="WhatsApp Contact" title="WhatsApp Contact">
</a>
</span>
(where 123456789 is your number in international format)
Then style your link with mentioned methods.
[ExiTuS]
(2020-01-09, 11:27 AM)[ExiTuS] Wrote: [ -> ]First create your button link with an URL described in this FAQ:
https://faq.whatsapp.com/general/26000030/?lang=de
An easy way to display this button on mobiles or tablets is using CSS Media Queries to hide or show the button depending on the display resolution. For example:
<span class="wa_display"><a href="..." target="_blank"><img src="whatsapp_image.png" ...></a></span>
.wa_display { display: none; }
@media screen and (max-width: 720px) {
.wa_display { display: inline; }
}
Of course you can play with parameter, position and appearance.
[ExiTuS]
seems usable. thanks for sharing