Hide Styles Based on Devices

To Hide styles on one device and display on another device,

To Hide the floating style on the Desktop devices

from the plugin settings

Click to Chat -> ‘Styles for Desktops’ field

Select the last option – ‘Hide on – Desktops’.

hide styles for desktop devices

 


To Hide the floating style on the Mobile devices

from the plugin settings

Click to Chat -> ‘Styles for Mobile devices’ field

Select the last option – ‘Hide on – Mobile Devices’.

hide styles for mobile devices


Using Shortcodes

To hide styles based on the device, if shortcodes are used

To Hide the style on the Desktop devices, by using the shortcode – ‘hide_desktop’  ( since version 1.5 )

E.g: Set hide_desktop attribute to true

[chat hide_desktop="true"]  – If the attribute is set to true, the style is hidden on the desktop devices.

 

To  Hide the floating style on the Mobile devices, by using the shortcode – ‘hide_mobile’  ( since version 1.5 )

E.g: Set hide_mobile attribute to true

[chat hide_mobile="true"] – If the attribute is set to true, the style is hidden on the mobile devices.


Plugin detect device based on HTTP user agenda.

Style-99-own-Image / GIF

WhatsApp chat

 

Style-99 – own Image / GIF ( since version 1.5 )


At Plugin Settings ( Click to Chat  -> Customize Styles )

Please remove the default added image URL and add the new Image URL.

For Better result add the Image With perfect Size, Instead of changing the image width, height from plugin settings

i..e. If you plan to make your image size 100 x 100 PX width, height, can add the image with that size instead of adding large image and changing the image size.

If need to change the image Width or Height from plugin settings, recommended to change only one value – Width or Height ( best to add Height alone and leave Width proportion to Height – it will adjust automatically )

For Mobile Devices have to add separate / same image URL

Can Add GIF Images – may not good to add in all pages as user may get distraction. instead add on specific pages using shortcodes

continue image ..

style 99 - continue

If plan to change Height, Width add suffix with CSS Units. ( e.g.  100px )


some suggestions like ..

Where to host Image

* Can Add image in your WordPress Media Uploads and get the URL

* From AWS S3, including CDN – CloudFront

so many Image Hosting sites are there.

Where to Get Images

We just added some list, We are responsible on how to use the image, please read there license policy on how to use.

WhatsApp Brand – Official Site

ICONFINDER

FLATICON


Imgur

GIPHY  – GIF Images


( can find so many image with license of no attribution is required )

Flickr

Unsplash

pixbay


Create Images / Editor – online

Canva

PicMonkey


some of this sites can work as image hosting sites also, so can load images directly from there server

style-6

 

Icon with Circle border


Style – 6 – Customization

From plugin settings

Click to Chat -> Customize Styles

 

Color of icon

Color of icon when hover

Size of icon

Circle color  – the round border color

Circle color when hover

Circle Height

Circle Width

Circle Line Height  ( to adjust the icon position, WhatsApp icon is not exactly circle, sometime we may feel to adjust the icon position )

An example – If set the icon size to 40px, then set the circle height, circle width to around 62px and if needed adjust the circle line height to 61 px or 62px or 63px or similar.

 

 

 

style-5

 

plain WhatsApp icon – can customize color, height


Style – 5 – Customization, from plugin settings

Click to Chat -> Customize Styles

style-4

Contact PersonWhatsApp us
Contact PersonWhatsApp us

 

combination of WhatsApp logo and a text message – Chip style


Style – 4 – Customization, from plugin settings

Click to Chat -> Customize Styles