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

style-1

Style-1 is the default theme button.
(looks like currently activated Theme button).

For customizable button, please select style-8


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

 

List of Styles

Style-1

Appears as Theme Button


Style-2

Plain Link


Style-3

WhatsApp chat

Image


Style-4

Contact PersonWhatsApp us

Image + Text ( chip Style )


Style-5

 Icon


Style-6

Icon With Round Border


Style-7

Icon With Box Border


Style-8

Button style (Icon, Text )


Style – 9

WhatsApp chat

Image in Green square


Style – 99 – own image / GIF

WhatsApp chat

Own Image / GIF