Shortcodes help us place the WhatsApp icon\/button inline within posts, pages, or widgets. They use values from plugin settings by default, but we can adjust each instance using attributes.<\/p>\n\n\n\n\n\n
<\/p>\n\n\n\n
[ht-ctc-chat]<\/pre>\n\n\n\nBy default, this uses the plugin\u2019s global settings. We can use attributes to customize its behavior and appearance.<\/p>\n\n\n\n
Shortcode Attributes:<\/h3>\n\n\n\n
Style 5 and Style 8 Shortcodes<\/strong><\/h4>\n\n\n\n
Style 5<\/a> and Style 8<\/a> come with their own set of customization options that allow greater control over layout and appearance.<\/p>\n\n\n\n
\n
- Style 5<\/strong>: A button-based layout that allows customization of the button width and icon position. Suitable for embedding a prominent WhatsApp button.<\/li>\n\n\n\n
- Style 8<\/strong>: A floating layout with minimal design, offering options to adjust the width and show or hide the icon.<\/li>\n<\/ul>\n\n\n\n
These styles include additional Shortcode attributes such as
s5_width<\/code>,s5_icon_position<\/code>,s8_width<\/code>, ands8_icon_position<\/code> to refine their display.
<\/p>\n\n\n\nWhatsApp Number<\/h4>\n\n\n\n
To Change the WhatsApp number, use the “number” attribute<\/p>\n\n\n\n
[ht-ctc-chat number=915123456789] <\/pre>\n\n\n\n<\/p>\n\n\n\n
Call to Action<\/h4>\n\n\n\n
To change Call to Action, use the “call_to_action” Attribute<\/p>\n\n\n\n
[ht-ctc-chat call_to_action=\"Chat with Us\"] <\/pre>\n\n\n\n<\/p>\n\n\n\n
Pre-Filled Message<\/h4>\n\n\n\n
To Change the pre-filled text, use the “pre_filled” Attribute<\/p>\n\n\n\n
[ht-ctc-chat pre_filled=\"{{url}}, Hello\"]<\/pre>\n\n\n\n<\/p>\n\n\n\n
Style<\/h4>\n\n\n\n
To Change Style, use the “style” Attribute<\/p>\n\n\n\n
[ht-ctc-chat style=3]<\/pre>\n\n\n\n<\/p>\n\n\n\n
For Extended styles like 3_1 and 7_1<\/p>\n\n\n\n
[ht-ctc-chat style='7_1']<\/pre>\n\n\n\n<\/p>\n\n\n\n
Position<\/h4>\n\n\n\n
To change the position, use attribute position=fixed and choose the values(top, right, bottom, left) with the appropriate CSS values<\/p>\n\n\n\n
[ht-ctc-chat style=2 position=fixed top=50px right=40px]
[ht-ctc-chat style=5 position=fixed top=40% left=30%]
[ht-ctc-chat style=1 position=fixed bottom=20% right=70px]
[ht-ctc-chat style=6 position=fixed botttom=10px left=60px]<\/pre>\n\n\n\n<\/p>\n\n\n\n
Hide Shortcode based on the device<\/h4>\n\n\n\n
To hide styles\/icons based on the device used.<\/p>\n\n\n\n
To hide on mobile:<\/p>\n\n\n\n
[ht-ctc-chat hide_mobile=yes]<\/pre>\n\n\n\nTo hide on desktop:<\/p>\n\n\n\n
[ht-ctc-chat hide_desktop=yes]<\/pre>\n\n\n\nCall to Action for Shortcodes in Style-2, 3, 3 Extend, 7 – on hover will display as a title attribute. (As shortcodes are inline – call to action on hover can move the post content )<\/p>\n\n\n\n
Click-to-Chat Styles<\/h4>\n\n\n\n
[ht-ctc-chat style=5]<\/code><\/pre>\n\n\n\n[ht-ctc-chat style=8]<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
Shortcode Resources<\/h4>\n\n\n\n
[ht-ctc-group]<\/code><\/pre>\n\n\n\n[ht-ctc-share]<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
Custom Element<\/h4>\n\n\n\n
Instead of using shortcodes, we can also create our own design and make it to navigate to WhatsApp by adding the class name ctc_chat<\/strong> <\/p>\n\n\n\n
Custom element<\/a><\/pre>\n\n\n\n<\/p>\n\n\n\n
\n\n\n\n<\/p>\n\n\n\n
Explore More Shortcodes<\/strong><\/h4>\n\n\n\n