Version 1.7

Improved plugin performance (Reduced plugin size), and fixed some issues.

Style-4

Style-4 code is simplified. ( previously used MaterializeCSS, now rewritten without using any additional frameworks ).

Style-8

Simplified

Style-1

A new style-1 is created since Version 1.7, It’s a default theme button, which looks the same as the currently activated Theme’s button on your website

To use the previous style-1(input filed), please download the previous version(1.6) and reinstall the plugin.

FaceBook Analytics for Click to Chat Plugin

If Facebook Analytics is installed on your website, when the user clicks on any style it will create an event in Facebook Analytics.

Click to Chat plugin won’t install the Facebook Analytics. 
One of the simple plugin to install Facebook Analytics on WordPress Website.

To Enable this feature, check ‘Facebook Analytics’ option at “Click to Chat” plugin settings 

This plugin creates an event at Facebook Analytics, but not on Facebook Pixel.

By default, this plugin creates an event with the event name and three customer parameter.

  • Event Name  ->  Click to Chat
  • Custom Parameter 1  ->  Name: Category, Value: Click to Chat
  • Custom Parameter 2  ->  Name: Action, Value: Click 
  • Custom Parameter 3  ->  Name: label, Value: {{url}}
    {{url}} is a placeholder, will be replaced with the current page URL where the action took place.

To change the event name, custom parameter name, value

Navigate from Click to Chat -> Customize Style 

And Can change the values at ‘Facebook Analytics’ section.

We can view the analytics event in Facebook Analytics Dashboard.

To view Facebook Analytics

fb analytics
Screenshot from Facebook analytics – Event Debugging section

Google Analytics for Click to Chat Plugin

If Google Analytics is installed on your website, when the user clicks on any style it will create an event in Google Analytics.

Click to Chat plugin won’t install the Google Analytics. it will create Event, when user clicks on any style.

Install Google Analytics using Google Tag Manager

Google Analytics

To Enable this feature, check ‘Google Analytics’ option.

By default it will create an event with the parameters,

  • Category Name: Click to Chat for WhatsApp
  • Action Name: Click
  • Label Name: {{url}}

    {{url}} is a placeholder, will be replaced with the current page URL where the action took place.

To change the Event values

Navigate to “Click to Chat” -> “Customize Style

At ‘Google Analytics‘ Section, we can change the Category, Action, Label

Google Analytics

Can view the events in Google Analytics Dashboard

View the real time events at “Real Time” -> “Event”

View the events at “BEHAVIOUR” -> “Events” -> “Overview”


Instead of enabling this option, can use Google Tag Manager to create event

Facebook Analytics for Click-to-Chat

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.

autop issue

While adding shortcodes,  We expect the result to be inline to that content,

But in some cases we find that WordPress adds autop to the previous content. so the shortcode output will display in new line.

to fix this issue for shortcodes, add inline_issue attribute

inline_issue="true"

this attribute will make the previous shortcode content with “p” tag will display as inline content.

[chat style=2 inline_issue="true"]

autop means adding new p tag, i..e making that content as a paragraph. By default , for “p” tag display is block. so the next content will display in next line


To display shortcode output in a new line, add shortcode in new line.

App First

This plugin Detect’s the Device based on HTTP User Agent

i..e Android, IOS ..

If User Access Website from Mobile Device ( Android, IOS .. ). WhatsApp Mobile App will Open ( If WhatsApp is Installed ).

If User Access From Desktop – WhatsApp Web page will open to start chat from browser itself.

But the problem is When Cache plugins are installed, and that cache plugins are not creating  separate pages based on Device type. ( with some plugins there is no issue, where it will create separate version based on device ).

issues like - In Mobile device - 
the page is navigating to web.whatsapp.com 
instead of opening WhatsApp App.

If there is an issue with the cache plugin. Please Check ( tick ) the “App First” option.

If this option is Checked, in Mobile devices it works fine as expected, try to open in WhatsApp App.

but in desktop instead of directly open WhatsApp chat page. ( in one step )

opens a page which shows message text, send button ..

and when user click on send, WhatsApp Web Chat window will open. ( two steps )


If there is no issue with any cache plugin, it better to keep unchecked. if its unchecked, then in desktop devices, opens WhatsApp chat Window in one step, instead of two step process.


We are planning to implement new ways to detect mobile device.

 

Style-99 – own Image / GIF – shortcode

WhatsApp chat

[chat style=99]

( since version 1.5 )

Shortcode Attributes

s99_img_height_desktop  –  To Change the Image Height  for Desktop devices
s99_img_width_desktop  –  To change the image Width for Desktop devices
s99_img_height_mobile  –  To Change the Image Height for Mobile devices
s99_img_width_mobile  –  To Change the Image Height for Mobile devices
s99_desktop_img  –  Image URL to display on Desktop devices
s99_mobile_img  –  Image URL to display on Mobile devices

Instead of changing the image Width, Height add the image URL with perfect  image size.

Style – 99 – Own Image ( more information about style -99 own image / GIF – and added some links to get images )

 

num  – ( to change the number )
style  – (  e.g. style=1   – right now there are 8 styles )
position  –  ( e.g. position=fixed  – to add fixed position style,  css positions )
top  –  ( e.g.  –  left=10px , left=2% )
right  –  ( e.g.  –  left=10px , left=2% )
bottom  –  ( e.g.  –  left=10px , left=2% )
left  –  ( e.g.  –  left=10px , left=2% )
home   –   ( home= hide ) to hide shortcodes in home page , category, archive


[chat style=99  s99_img_height_desktop=100px]

WhatsApp chat

 

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

Animations

Animations on Page load  –  Run Animation when the page is loaded / refreshed. If “no-animation” is selected, animations are not enabled.

Animations on hover  –  If Yes  – Run animations when mouse hover on the WhatsApp style ( This Hover Animation type is the animation what set for Animation on page load )

It may be better, not to enable animation on hover, Because when user came to click on style to start chat, it will animate

From Dashboard  -> Click to Chat -> Customize Styles

animations


Currently Animations are in Alpha stage, things may change in later releases, may need to reconfigure also.

We are planning to expand animations types. ( At present bounce, tada type animations are added )