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.
Chat feature – Shortcode
[ht-ctc-chat]
By default, this uses the plugin’s global settings. We can use attributes to customize its behavior and appearance.
Shortcode Attributes:
Style 5 and Style 8 Shortcodes
Style 5 and Style 8 come with their own set of customization options that allow greater control over layout and appearance.
- Style 5: A button-based layout that allows customization of the button width and icon position. Suitable for embedding a prominent WhatsApp button.
- Style 8: A floating layout with minimal design, offering options to adjust the width and show or hide the icon.
These styles include additional Shortcode attributes such as s5_width, s5_icon_position, s8_width, and s8_icon_position to refine their display.
WhatsApp Number
To Change the WhatsApp number, use the “number” attribute
[ht-ctc-chat number=915123456789]
Call to Action
To change Call to Action, use the “call_to_action” Attribute
[ht-ctc-chat call_to_action="Chat with Us"]
Pre-Filled Message
To Change the pre-filled text, use the “pre_filled” Attribute
[ht-ctc-chat pre_filled="{{url}}, Hello"]
Style
To Change Style, use the “style” Attribute
[ht-ctc-chat style=3]
For Extended styles like 3_1 and 7_1
[ht-ctc-chat style='7_1']
Position
To change the position, use attribute position=fixed and choose the values(top, right, bottom, left) with the appropriate CSS values
[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]
Hide Shortcode based on the device
To hide styles/icons based on the device used.
To hide on mobile:
[ht-ctc-chat hide_mobile=yes]
To hide on desktop:
[ht-ctc-chat hide_desktop=yes]
Call 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 )
Click-to-Chat Styles
[ht-ctc-chat style=5][ht-ctc-chat style=8]Shortcode Resources
[ht-ctc-group][ht-ctc-share]Custom Element
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
Custom element