Shortcode – Group Chat

only need to add this attributes – to make styles navigate to Group Chat invite  ( num attribute is not needed )

type  –  ( group_chat  ) to make the link navigate to group chat then add attribute (  type=group_chat )
group_id  – to change the  group chat id

Example
[chat style=4 type=group_chat val='Sales Team' ]
Contact PersonSales Team

 

By default it will get group-id from admin setting page to change it
add attribute ‘group_id
[chat style=4 type=group_chat group_id='DuEZlyOo94A1QirOX42zKr' val='Support Team' ]
Contact PersonSupport Team

Style-2

[chat style=2]

 

Shortcode Attributes ( Specific to Style-2 )

s2_text_color  – to change text color
s2_text_color_onhover  – to change text color on hover
s2_decoration  – to change text decoration – like adding underline .. (  none, underline, overline, line-through, initial, inherit )
s2_decoration_onhover  – to chagne text decoration on hover (  none, underline, overline, line-through, initial, inherit ) ( e.g.  s2_decoration_onhover=underline )

 

num  – ( to change the number )
val   –  ( to change the display text for – style-1, style-2, style-4, style-8 )
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=2 s2_text_color=#ff9100  s2_text_color_onhover=#ffa726  s2_decoration=underline  s2_decoration_onhover=none ]

 


Fixed position

[chat style=2 position=fixed bottom=10px right=10px]

( fixed position located at bottom right corner )

Style-3

chat

 

Shortcode Attributes ( Specific to Style-3 )

s3_icon_size  – to change icon size (  s3_icon_size= 48px )

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=3  s3_icon_size=24px]
chat

 

[chat style=3  s3_icon_size=100px]
chat

 

 


Fixed position

[chat style=3 position=fixed bottom=10px right=10px]

( fixed position located at bottom right corner )

 


 

[chat style=3 s3_icon_size=24px; ]

[chat style=3 s3_icon_size=48px;]

[chat style=3 s3_icon_size=96px; ]

 

chat chat chat

 

Style-4

Contact PersonWhatsApp us

 

Shortcode Attributes ( Specific to Style-4 )

s4_text_color  – to change text color inside chip
s4_background_color  – to change background color of chip

 

In some  themes – wordpress adds autop  – as it cause the element to display in next line.

so to add chip style ( style-4 ) inline with in content- use style-4.1
so style-4.1 make previous element display – inline.

 

num  – ( to change the number )
val   –  ( to change the display text for – style-1, style-2, style-4, style-8 )
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=4   s4_text_color=#ffa500  s4_background_color=#c6ff00  ]
Contact PersonWhatsApp us

 


Fixed position

[chat style=4 position=fixed bottom=10px right=10px]

( fixed position located at bottom right corner )

Style-5

 

Shortcode Attributes ( Specific to Style-5 )

s5_color  – to change icon color
s5_hover_color – to change icon color when hover
s5_icon_size  – to change icon size ( s5_icon_size= 48px )

 

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=5  s5_color=#ffa500    s5_hover_color=#ffbb3d     s5_icon_size=48px   ]

 

 


Fixed position

[chat style=5 position=fixed bottom=10px right=10px]

( fixed position located at bottom right corner )

Style-6

 

Shortcode Attributes ( Specific to Style-6 )

s6_color  – to change icon color
s6_hover_color  – to change icon color when hover
s6_icon_size  – to change icon size
s6_circle_background_color  – to change circle background color ( border color  )
s6_circle_background_hover_color  – to change  circle background color when hover
s6_circle_height  – to change circle height
s6_circle_width  – to change circle width
s6_line_height  – to change circle line height

 

 ( circle have radius – but here how circle  created is by adding border-radius to 50% of the given height, width )

 

 ( try to add same values for – s6_circle_height  , s6_circle_width  ,  s6_line_height  – if not perfect then change the values )

 

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=6 s6_color= #fff s6_hover_color=orange     s6_icon_size=50px   s6_circle_background_color=#9cff57  s6_circle_background_hover_color =#00e51e  s6_circle_height=100px   s6_circle_width=100px   s6_line_height=100px ]

 

 


Fixed position

[chat style=6 position=fixed bottom=10px right=10px]

( fixed position located at bottom right corner )

Style-7

 

Shortcode Attributes ( Specific to Style-7 )

s7_color  – to change icon color
s7_hover_color  – to change icon color when hover
s7_icon_size  – to change icon size
s7_box_background_color  – to change box background color ( border color )
s7_box_background_hover_color  – to change box background color on hover
s7_box_height  – to change box height
s7_box_width  – to change box width
s7_line_height  – to change line height

 

( try to add same values for – s7_box_height, s7_box_width,  s7_line_height  –  if not perfect then change the values )

 

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=7  s7_color= #fff    s7_hover_color=#ffa500    s7_icon_size=50px     s7_box_background_color=#9cff57   s7_box_background_hover_color=#00e51e      s7_box_height=100px     s7_box_width=100px      s7_line_height=100px ]

 

 


Fixed position

[chat style=7 position=fixed bottom=10px right=10px]

( fixed position located at bottom right corner )

Style-8

[chat style=8]

 

Shortcode Attributes ( Specific to Style-8 )

s8_text_color  – to change text color
s8_background_color  – to change button color
s8_icon_color  – to change change icon color
s8_text_color_onhover  – to change text color when hover on button
s8_background_color_onhover  – to change button color when hover
s8_icon_color_onhover  – to change icon color when hover on button
s8_icon_float  –   (  left, right , hide )  to change icon floats on left or right side of text or hide icon

 

Full width button  ( Change width )
There is sub style for style-8 which is style-8.1
created to change width and there is no icon for style-8.1

 

s8_1_width  – to change width of button  ( new for style – 8.1 )
s8_text_color  – to change text color

s8_background_color  – to change button color
s8_text_color_onhover  – to change text color when hover on button
s8_background_color_onhover  – to change button color when hover

 

num  – ( to change the number )
val   –  ( to change the display text for – style-1, style-2, style-4, style-8 )
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=8  s8_text_color=#a7ffeb      s8_background_color=#1de9b6     s8_icon_color=#a7ffeb     s8_text_color_onhover=#ddd     s8_background_color_onhover=#00cbcc       s8_icon_color_onhover=#ddd        s8_icon_float=right   ]

 

 

 

Change Width  ( using style 8.1 )

 

[chat style=8.1 val=' support team'     s8_1_width=40% ]
[chat style=8.1 val='Chat with Sales Team' s8_1_width=60% ]
[chat style=8.1 val='Chat with COO'     s8_1_width=80% ]
[chat style=8.1 val='Chat with CEO'    s8_1_width=100% ]

 


Fixed position

[chat style=8 position=fixed bottom=10px right=10px]

( fixed position located at bottom right corner )

Style-1

[chat style=1]

 

Shortcode Attributes ( Specific to Style-1 )

s1_text_color  –  to change text color
s1_text_color_onfocus  – to change text color on focus
s1_border_color – to change input field border color
s1_border_color_onfocus  – to change input field border color on focus
s1_submit_btn_color  – to change button color
s1_submit_btn_text_and_icon_color  – to change text, icon color in button
s1_width  – to change the width of input form ( e.g.  100% , 50%, 200px )

 

num  – ( to change the number )
val   –  ( to change the display text for – style-1, style-2, style-4, style-8 )
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=1 s1_text_color=#ffd180   s1_border_color=#ffa726    s1_text_color_onfocus=#ff9100  s1_border_color_onfocus=#ff9100 s1_submit_btn_color=#c6ff00    s1_submit_btn_text_and_icon_color=#ff9100   ]

 

 


Fixed position

[chat style=1 position=fixed bottom=10px right=10px]

( fixed position located at bottom right corner )

 

Shortcode Attributes

 

By default shortcodes get values what’s given in options page ( settings page of this plugin in admin ), we can override that using attributes

Overall Attributes – supports most of the styles

num  – ( to change the number )
val   –  ( to change the display text for – style-1, style-2, style-4, style-8 )
style  – (  e.g. style=1   – right now there are 8 styles )
position  –  ( e.g. position=fixed  – to add fixed position style,  any  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

Attributes Specific to styles :

style-1
s1_text_color  –  to change text color
s1_text_color_onfocus  – to change text color on focus
s1_border_color – to change input field border color
s1_border_color_onfocus  – to change input field border color on focus
s1_submit_btn_color  – to change button color
s1_submit_btn_text_and_icon_color  – to change text, icon color in button
s1_width  – to change the width of input form

style-2
s2_text_color  – to change text color
s2_text_color_onhover  – to change text color on hover
s2_decoration  – to change text decoration – like adding underline ..
s2_decoration_onhover  – to chagne text decoration on hover

style-3
s3_icon_size  – to change icon size (  s3_icon_size= 48px )

style-4
s4_text_color  – to change text color inside chip
s4_background_color  – to change background color of chip
In some  themes – wordpress adds autop  – as it cause the element to display in next line.
so to add chip style ( style-4 ) inline with in content- use style-4.1
so style-4.1 make previous element display – inline.

style-5
s5_color  – to change icon color
s5_hover_color – to change icon color when hover
s5_icon_size  – to change icon size ( s5_icon_size= 48px )

style-6
s6_color  – to change icon color
s6_hover_color  – to change icon color when hover
s6_icon_size  – to change icon size
s6_circle_background_color  – to change circle background color ( border color  )
s6_circle_background_hover_color  – to change  circle background color when hover
s6_circle_height  – to change circle height
s6_circle_width  – to change circle width
s6_line_height  – to change circle line height
 ( circle have radius – but here how circle  created is by adding border-radius to 50% of the given height, width )
 ( try to add same values for – s6_circle_height  , s6_circle_width  ,  s6_line_height  – if not perfect then change the values )

style-7
s7_color  – to change icon color
s7_hover_color  – to change icon color when hover
s7_icon_size  – to change icon size
s7_box_background_color  – to change box background color ( border color )
s7_box_background_hover_color  – to change box background color on hover
s7_box_height  – to change box height
s7_box_width  – to change box width
s7_line_height  – to change line height
( try to add same values for – s7_box_height, s7_box_width,  s7_line_height  –  if not perfect then change the values )

style-8
s8_text_color  – to change text color
s8_background_color  – to change button color
s8_icon_color  – to change change icon color
s8_text_color_onhover  – to change text color when hover on button
s8_background_color_onhover  – to change button color when hover
s8_icon_color_onhover  – to change icon color when hover on button
s8_icon_float  – to change icon floats on left or right side of text or hide icon
Full width button  ( Change width )
There is sub style for style-8 which is style-8.1
created to change width and there is no icon for style-8.1
s8_1_width  – to change width of button  ( new for style – 8.1 )
s8_text_color  – to change text color
s8_background_color  – to change button color
s8_text_color_onhover  – to change text color when hover on button
s8_background_color_onhover  – to change button color when hover