Below, you’ll find a detailed guide on how to add the Click to Chat – HoliThemes 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 – HoliThemes Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Click to Chat – HoliThemes Plugin and the shortcodes it provides:
"Click to Chat – HoliThemes is a WordPress plugin that effortlessly connects your website visitors to your WhatsApp account. It facilitates instant communication and enhances user engagement."
- [ht-ctc-chat]
Click to Chat – HoliThemes [ht-ctc-chat] Shortcode
The Click-to-Chat-for-WhatsApp plugin shortcode, ‘ht-ctc-chat’, initiates a WhatsApp chat when clicked. It retrieves settings such as user number, pre-filled messages, and style options from the plugin’s options. It also adjusts the style based on the device used and can hide the chat on specific pages. If used on a WooCommerce product page, it can include product details in the pre-filled message. It returns a styled chat button ready for interaction.
Shortcode: [ht-ctc-chat]
Parameters
Here is a list of all possible ht-ctc-chat shortcode parameters and attributes:
number– The telephone number for WhatsApp chat.call_to_action– The text prompt to initiate chat.pre_filled– The pre-populated message in chat.style– The design style of the chat button.position– The position of the chat button on the screen.top– The top position of the chat button.right– The right position of the chat button.bottom– The bottom position of the chat button.left– The left position of the chat button.home– Control visibility of chat button on home page.hide_mobile– Hide chat button on mobile devices.hide_desktop– Hide chat button on desktop devices.s5_img_position– Position of the image for style 5.s5_img_url– URL of the image for style 5.s5_line_2– Second line of text for style 5.s8_width– Width of the button for style 8.s8_icon_position– Position of the icon for style 8.
Examples and Usage
Basic example – A simple way to use the shortcode to start a WhatsApp chat with a predefined number and a default message.
[ht-ctc-chat number="1234567890" pre_filled="Hello! I need help with my order." /]Advanced examples
Using the shortcode to start a WhatsApp chat with a predefined number, default message, and a specific style. The style parameter changes the appearance of the chat button.
[ht-ctc-chat number="1234567890" pre_filled="Hello! I need help with my order." style="2" /]Using the shortcode to start a WhatsApp chat with a predefined number, default message, specific style, and position. The position parameters allow you to place the chat button at a specific location on your website.
[ht-ctc-chat number="1234567890" pre_filled="Hello! I need help with my order." style="2" position="fixed" top="100px" right="20px" /]Using the shortcode to start a WhatsApp chat with a predefined number, default message, specific style, position, and device-specific visibility. The hide_mobile and hide_desktop parameters allow you to control the visibility of the chat button on different devices.
[ht-ctc-chat number="1234567890" pre_filled="Hello! I need help with my order." style="2" position="fixed" top="100px" right="20px" hide_mobile="yes" hide_desktop="no" /]PHP Function Code
In case you have difficulties debugging what causing issues with [ht-ctc-chat] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'ht-ctc-chat', array( $this, 'shortcode' ) );Shortcode PHP function:
function shortcode( $atts = [], $content = null, $shortcode = '' ) {
$options = get_option( 'ht_ctc_chat_options' );
$ht_ctc_os = array();
$number_db = (isset($options['number'])) ? esc_attr($options['number']) : '';
$call_to_action_db = esc_attr( $options['call_to_action'] );
$pre_filled_db = esc_attr( $options['pre_filled'] );
$number = __( $number_db , 'click-to-chat-for-whatsapp' );
$call_to_action = __( $call_to_action_db , 'click-to-chat-for-whatsapp' );
$pre_filled = __( $pre_filled_db , 'click-to-chat-for-whatsapp' );
$style_desktop = (isset($options['style_desktop'])) ? esc_attr($options['style_desktop']) : '2';
if (isset($options['same_settings'])) {
$style_mobile = $style_desktop;
} else {
$style_mobile = (isset($options['style_mobile'])) ? esc_attr($options['style_mobile']) : '2';
}
$is_mobile = ht_ctc()->device_type->is_mobile();
$style = $style_desktop;
if ( 'yes' == $is_mobile ) {
$style = $style_mobile;
}
// if woocommerce single product page
if ( function_exists( 'is_product' ) && function_exists( 'wc_get_product' )) {
if ( is_product() ) {
$product = wc_get_product();
$name = $product->get_name();
// $title = $product->get_title();
$price = $product->get_price();
$regular_price = $product->get_regular_price();
$sku = $product->get_sku();
// pre-filled
if ( isset( $options['woo_pre_filled'] ) && '' !== $options['woo_pre_filled'] ) {
$pre_filled = esc_attr( $options['woo_pre_filled'] );
$pre_filled = apply_filters( 'wpml_translate_single_string', $pre_filled, 'Click to Chat for WhatsApp', 'woo_pre_filled' );
}
// variables now works in default pre_filled also
$pre_filled = str_replace( array('{product}', '{price}', '{regular_price}', '{sku}' ), array( $name, $price, $regular_price, $sku ), $pre_filled );
// call to action
if ( isset( $options['woo_call_to_action'] ) && '' !== $options['woo_call_to_action'] ) {
$call_to_action = esc_attr( $options['woo_call_to_action'] );
$call_to_action = apply_filters( 'wpml_translate_single_string', $call_to_action, 'Click to Chat for WhatsApp', 'woo_call_to_action' );
$call_to_action = str_replace( array('{product}', '{price}', '{regular_price}', '{sku}' ), array( $name, $price, $regular_price, $sku ), $call_to_action );
}
}
}
// $content = do_shortcode($content);
// $ccw_options_cs = get_option('ccw_options_cs');
// use like $ccw_options_cs['']
$a = shortcode_atts(
array(
'number' => $number,
'call_to_action' => $call_to_action,
'pre_filled' => $pre_filled,
'style' => $style,
'position' => '',
'top' => '',
'right' => '',
'bottom' => '',
'left' => '',
'home' => '', // home - to hide on experts ..
'hide_mobile' => '',
'hide_desktop' => '',
's5_img_position' => '', //left, right
's5_img_url' => '',
's5_line_2' => '',
's8_width' => '',
's8_icon_position' => '', // left, right, hide
), $atts, $shortcode );
// use like - '.esc_attr($a["title"]).'
// number
$number = esc_attr($a["number"]);
// if random number feature, this have to modify (ltrim, preg_replace)
// $number = preg_replace('/[^0-9,\s]/', '', $number );
$number = preg_replace('/\D/', '', $number );
$number = ltrim( $number, '0' );
// pre-filled text
$page_url = get_permalink();
$post_title = esc_html( get_the_title() );
$pre_filled = esc_attr($a["pre_filled"]);
$pre_filled = str_replace( array('{{url}}', '{url}', '{{title}}', '{title}', '{{site}}', '{site}' ), array( $page_url, $page_url, $post_title, $post_title, HT_CTC_BLOG_NAME, HT_CTC_BLOG_NAME ), $pre_filled );
// hide on devices
// if 'yes' then hide
$hide_mobile = esc_attr($a["hide_mobile"]);
$hide_desktop = esc_attr($a["hide_desktop"]);
if( 'yes' == $is_mobile ) {
if ( 'yes' == $hide_mobile ) {
return;
}
} else {
if ( 'yes' == $hide_desktop ) {
return;
}
}
$position = esc_attr($a["position"]);
$top = esc_attr($a["top"]);
$right = esc_attr($a["right"]);
$bottom = esc_attr($a["bottom"]);
$left = esc_attr($a["left"]);
$css = '';
if ( '' !== $position ) {
$css .= 'position:'.$position.';';
}
if ( '' !== $top ) {
$css .= 'top:'.$top.';';
}
if ( '' !== $right ) {
$css .= 'right:'.$right.';';
}
if ( '' !== $bottom ) {
$css .= 'bottom:'.$bottom.';';
}
if ( '' !== $left ) {
$css .= 'left:'.$left.';';
}
// to hide styles in home, archive, category pages
$home = esc_attr($a["home"]);
// $position !== 'fixed' why !== to avoid double time adding display: none ..
if ( 'fixed' !== $position && 'hide' == $home && ( is_home() || is_category() || is_archive() ) ) {
$css .= 'display:none;';
}
// By default position: fixed style hide on home screen,
// if plan to show, then add hide='show' ( actually something not equal to 'hide' )
if ( 'fixed' == $position && 'show' !== $home && ( is_home() || is_category() || is_archive() ) ) {
$css .= 'display:none;';
}
$return_type = "chat";
$style = esc_attr($a["style"]);
// call to action
$call_to_action = esc_attr($a["call_to_action"]);
if ( '' == $call_to_action ) {
if ( '1' == $style || '4' == $style || '6' == $style || '8' == $style ) {
$call_to_action = "WhatsApp us";
}
}
$type = "chat-sc";
$class_names = "ht-ctc-sc ht-ctc-sc-chat sc-style-$style";
// analytics
$ht_ctc_os['data-attributes'] = '';
$ht_ctc_os['class_names'] = '';
// Hooks
$ht_ctc_os = apply_filters( 'ht_ctc_fh_os', $ht_ctc_os );
$o = '';
// shortcode template file path
$sc_path = plugin_dir_path( HT_CTC_PLUGIN_FILE ) . 'new/inc/styles-shortcode/sc-style-' . $style. '.php';
if ( is_file( $sc_path ) ) {
$o .= '<div data-number="'.$number.'" data-pre_filled="'.$pre_filled.'" data-style="'.$style.'" style="display: inline; cursor: pointer; z-index: 99999999; '.$css.'" class="'.$class_names.' ht-ctc-inline">';
include $sc_path;
$o .= '</div>';
} else {
// if style is not in the list..
$img_link = plugins_url("./new/inc/assets/img/whatsapp-logo.svg", HT_CTC_PLUGIN_FILE );
$o .= '<div data-number="'.$number.'" data-pre_filled="'.$pre_filled.'" style="display: inline; cursor: pointer; z-index: 99999999; '.$css.'" class="'.$class_names.' ht-ctc-inline">';
$o .= '<img class="img-icon-sc sc_item pointer style-3-sc" src="'.$img_link.'" alt="'.$call_to_action.'" style="height: 50px; '.$css.' " >';
$o .= '</div>';
}
return $o;
}
Code file location:
click-to-chat-for-whatsapp/click-to-chat-for-whatsapp/new/inc/chat/class-ht-ctc-chat-shortcode.phpConclusion
Now that you’ve learned how to embed the Click to Chat – HoliThemes 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.
Leave a Reply