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
text  –   to add pre-filled text.   ( e.g.  text=”to the sales team:” ) ( since version 1.3 )
hide_mobile  –   Hide that shortcode on mobile device (hide_mobile=true)
hide_desktop  –   Hide that shortcode on desktop device (hide_desktop=true)
inline_issue–   If shortcode output is display in new line and don’t want that, add inline_issue=”true”, fix for the autop issue

type  –  ( group_chat or chat ) ,  default to chat ,   shortcode – group chat
group_id  –  if type=group_chat, then to change group_id. ( how to find WhatsApp group id )

Attributes Specific to styles :

style-1 

Style-1 is the default theme button. (looks like currently activated Theme button). For customizable button, please select style-8

Style-1-Examples


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

style-9

( since version 1.4 )

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

Style-99 – own Image / GIF ( since version 1.5 )
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

Shortcodes

Basic shortcode

[chat]

Attributes

To Change Style use style attribute

[chat style=4]

To change number, instead of using default one use num attribute

[chat num=915123456789]

To change the height for style-3  use height attribute

[chat style=3 height=40px]

To change display text value use val attribute

[chat val='Contact us']

can add multiple attributes within a shortcode

[chat style=1 val="Let's chat"]

To add/ change the pre-filled text  ( since version 1.3 )

[chat style=4 text="To the Sales Team:"]

Floating style / Fixed position

Shortcodes can make the styles to a fixed position to the screen

[chat style=4 position="fixed" bottom="100px" left="10px"]

Shortcode Attributes List

Floating Style

Floating Styles are stay at one position in a screen. even if the Web page scrolls.

By default, the positions are set to bottom-right corner,
10px to bottom and 10px to right.

To change the floating position

add CSS units as suffix after the numeric value  – px, %, rem, em ..

e.g.

adding values in pixel  – 10px
adding values in percentage – 2%

 

we can select any thing and place a fixed style at any place by changing it values.

 

If plan to make the icon bottom center of the screen

select – bottom-right or bottom-left

and change the right or left value to 50%

If plan to change only on mobile devices, please add custom CSS

 

@media ( max-width: 1024px) {
  .ccw_plugin {
    right: 50% !important;
  }
}

this is just an example, based on your Web design please change change max-width