Click To Chat App Shortcode

Below, you’ll find a detailed guide on how to add the Click To Chat App Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Click To Chat App Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Click To Chat App Plugin and the shortcodes it provides:

Click To Chat App

"Click To Chat App is a WordPress plugin that allows users to instantly initiate a WhatsApp chat directly from your website. It's perfect for quick, seamless customer communication."

★★★★☆ (539) Active Installs: 200000+ Tested with: 6.3.2 PHP Version: 5.6

Included Shortcodes:

• [whatsapp]

Click To Chat App [whatsapp] Shortcode

The wp-whatsapp-chat plugin shortcode enables the display of a customizable WhatsApp chat button on your WordPress site. Shortcode Name: whatsapp This shortcode allows you to adjust the layout, roundness, phone number, message, and icon. The chat button can be toggled on or off, with an option to display additional text.

Shortcode: [whatsapp]

Parameters

Here is a list of all possible whatsapp shortcode parameters and attributes:

• layout – defines the layout style of the WhatsApp button
• rounded – determines whether the button is rounded or square
• phone – specifies the phone number linked to the button
• message – sets the initial message for the WhatsApp chat
• icon – assigns the icon for the WhatsApp button
• text – sets the text displayed on the button

Examples and Usage

Basic example – A shortcode that simply opens a WhatsApp chat with a predefined phone number and message.

[whatsapp phone="1234567890" message="Hello, I need help with my order." /]

Advanced examples

Customizing the layout and roundedness of the button, as well as specifying an icon and text for the button. This shortcode creates a WhatsApp chat button with a specified layout, roundedness, icon, and text.

[whatsapp layout="bottom" rounded="yes" icon="whatsapp-icon" text="Chat with us on WhatsApp" phone="1234567890" message="Hello, I need help with my order." /]

Specifying a different action for the button. This shortcode creates a WhatsApp chat button that closes when clicked, rather than opening a chat.

[whatsapp data-action="close" phone="1234567890" message="Hello, I need help with my order." /]

Using the shortcode within a text block. The shortcode is placed within a paragraph of text, allowing it to be inserted seamlessly into your content.

<p>Need help with your order? <a href="#">[whatsapp phone="1234567890" message="Hello, I need help with my order."]</a> to chat with us on WhatsApp.</p>

PHP Function Code

In case you have difficulties debugging what causing issues with [whatsapp] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'whatsapp', array( $this, 'do_shortcode' ) );

Shortcode PHP function:

function do_shortcode( $atts, $content = null ) {
		$button_model = new Models\Button();
		$button       = $button_model->get();

		$atts = wp_parse_args( $atts, $button );

		ob_start();
		?>
			<div style="width: auto;" id="qlwapp" class="qlwapp qlwapp-js-ready <?php printf( 'qlwapp-%s qlwapp-%s', esc_attr( $atts['layout'] ), esc_attr( $atts['rounded'] === 'yes' ? 'rounded' : 'square' ) ); ?>">
				<a class="qlwapp-toggle" data-action="open" data-phone="<?php echo esc_attr( $atts['phone'] ); ?>" data-message="<?php echo esc_html( $atts['message'] ); ?>" href="#" target="_blank">
				<?php if ( $atts['icon'] ) : ?>
						<i class="qlwapp-icon <?php echo esc_attr( $atts['icon'] ); ?>"></i>
					<?php endif; ?>
					<i class="qlwapp-close" data-action="close">&times;</i>
				<?php if ( $atts['text'] ) : ?>
						<span class="qlwapp-text"><?php echo esc_html( $content ); ?></span>
					<?php endif; ?>
				</a>
			</div>
			<?php
			return ob_get_clean();
	}

Code file location:

wp-whatsapp-chat/wp-whatsapp-chat/lib/class-frontend.php

Conclusion

Now that you’ve learned how to embed the Click To Chat App Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.