Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Whatsapp Chat Button
#1
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
Reply
#2
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]
Reply
#3
(01-09-2020, 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 Sad  where each code should be copied to ?
Reply
#4
any1 would explain it in details?
Reply
#5
^ 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; }
}
Reply
#6
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]
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)