Whatsapp Chat Button

[IranDeliver]

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

[[ExiTuS]]

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]

[IranDeliver]

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 ?

[IranDeliver]

any1 would explain it in details?

[.m.]

^ in general, button related code should be added to footer template of the theme

<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

.wa_display { display: none; }

@media screen and (max-width: 720px) {
.wa_display { display: inline; }
}

[[ExiTuS]]

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]

[kaizes]

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