Below, you’ll find a detailed guide on how to add the AI ChatBot Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the AI ChatBot Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the AI ChatBot Plugin and the shortcodes it provides:
"AI ChatBot is a cutting-edge WordPress plugin that integrates a smart and interactive chatbot into your website. It enhances user engagement, answers queries, and provides 24/7 customer support."
- [wpwbot]
- [wpbot-page]
- [wpwbot_app]
- [wpwbot_products]
- [wpwbot_cart]
AI ChatBot [wpwbot] Shortcode
The WP Chatbot shortcode is a functional snippet that enables the chatbot feature on a WordPress site. It is designed to initiate the chatbot interface when called. The PHP function ‘wp_chatbot_short_code’ takes attributes, starts output buffering, and calls ‘wp_chatbot_shortcode_dom’ with the attributes. The content is then returned after cleaning the output buffer.
Shortcode: [wpwbot]
Examples and Usage
Basic example – The following code displays the chatbot on your webpage without any specific attributes or parameters.
[wpwbot /]Advanced examples
Display the chatbot on your webpage with custom attributes. In this example, we are using two parameters: ‘theme’ and ‘language’. The ‘theme’ parameter changes the appearance of the chatbot, and the ‘language’ parameter changes the language of the chatbot interface.
[wpwbot theme="dark" language="en" /]Another advanced usage could be to use the ‘start_open’ parameter. If set to ‘true’, the chatbot will be open by default when the webpage loads. If set to ‘false’, the chatbot will be closed by default.
[wpwbot start_open="true" /]These are just a few examples of how you can use the ‘wpwbot’ shortcode with different parameters to customize the chatbot to suit your needs.
PHP Function Code
In case you have difficulties debugging what causing issues with [wpwbot] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('wpwbot', 'wp_chatbot_short_code');Shortcode PHP function:
function wp_chatbot_short_code($atts = []){
ob_start();
wp_chatbot_shortcode_dom($atts);
$content = ob_get_clean();
return $content;
}
Code file location:
chatbot/chatbot/functions.phpAI ChatBot [wpbot-page] Shortcode
The WPBot Page shortcode is a functional tool in WordPress. It initiates the chatbot plugin on a specific page. When implemented, it calls the function ‘wp_chatbot_page_short_code’ which generates the chatbot interface, capturing it into a variable. The content is then returned for display.
Shortcode: [wpbot-page]
Examples and Usage
Basic example – The shortcode ‘wpbot-page’ activates the chatbot on a specified page.
[wpbot-page]PHP Function Code
In case you have difficulties debugging what causing issues with [wpbot-page] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('wpbot-page', 'wp_chatbot_page_short_code');Shortcode PHP function:
function wp_chatbot_page_short_code(){
ob_start();
wp_chatbot_page_dom();
$content = ob_get_clean();
return $content;
}
Code file location:
chatbot/chatbot/functions.phpAI ChatBot [wpwbot_app] Shortcode
The WP Chatbot shortcode is used to integrate a mobile chatbot into a WordPress website. It applies custom CSS, changes the chatbot background, and enables RTL support. The shortcode also handles script enqueueing, cookie setting, and theme application. It ensures the chatbot theme is correctly found and displayed, providing a seamless user experience.
Shortcode: [wpwbot_app]
Examples and Usage
Basic example – A shortcode to add the WPBot chatbot application to your website.
[wpwbot_app /]Advanced examples
Using the shortcode to display the WPBot chatbot application with a custom background image. The image will be loaded from the specified URL.
[wpwbot_app qcld_wb_chatbot_board_bg_path="http://yourwebsite.com/path/to/image.jpg" /]Using the shortcode to display the WPBot chatbot application in RTL (Right-to-Left) mode. This is particularly useful for languages that are written from right to left, like Arabic or Hebrew.
[wpwbot_app enable_wp_chatbot_rtl="1" /]Using the shortcode to display the WPBot chatbot application with a custom theme. The theme will be loaded from the specified path in the WPBot plugin directory.
[wpwbot_app qcld_wb_chatbot_theme="your-custom-theme" /]Using the shortcode to display the WPBot chatbot application with a custom CSS. The CSS will be applied to the chatbot application.
[wpwbot_app wp_chatbot_custom_css=".wp-chatbot-container { color: red; }" /]PHP Function Code
In case you have difficulties debugging what causing issues with [wpwbot_app] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('wpwbot_app', 'wp_chatbot_mobile_app_short_code');Shortcode PHP function:
function wp_chatbot_mobile_app_short_code(){ ?>
<style>
<?php if(get_option('wp_chatbot_custom_css')!=""){echo sanitize_text_field(get_option('wp_chatbot_custom_css')); } ?>
</style>
<?php if (get_option('qcld_wb_chatbot_change_bg') == 1) {
if (get_option('qcld_wb_chatbot_board_bg_path') != "") {
$qcld_wb_chatbot_board_bg_path = get_option('qcld_wb_chatbot_board_bg_path');
} else {
$qcld_wb_chatbot_board_bg_path = QCLD_wpCHATBOT_IMG_URL . 'background/background.png';
}
?>
<style>
.wp-chatbot-container {
background: url(<?php echo esc_url($qcld_wb_chatbot_board_bg_path) ;?>) no-repeat top right !important;
}
</style>
<?php }
$wp_chatbot_enable_rtl = "";
if (get_option('enable_wp_chatbot_rtl') == '1') {
$wp_chatbot_enable_rtl .= "wp-chatbot-rtl";
}
?>
<div id="wp-chatbot-chat-app-shortcode-container" class="<?php echo esc_attr($wp_chatbot_enable_rtl); ?>">
<?php
// keep traking app template.
$template_app = 'yes';
//Get wpcommerce cart
//Handling shortcode enqeue and remove features part.
define('wpCOMMERCE', true);
wp_enqueue_script('jquery');
wp_enqueue_script('wc-address-i18n');
wp_enqueue_script('wc-country-select');
// add the action
if (isset($_GET['from']) && $_GET['from'] == 'app') {
if (!isset($_COOKIE['from_app'])) {
setcookie('from_app', 'yes', time() + 3600);
}
}
$qcld_wb_chatbot_theme = get_option('qcld_wb_chatbot_theme');
if (file_exists(QCLD_wpCHATBOT_PLUGIN_DIR_PATH . '/templates/' . $qcld_wb_chatbot_theme . '/template.php')) {
require_once(QCLD_wpCHATBOT_PLUGIN_DIR_PATH . '/templates/' . $qcld_wb_chatbot_theme . '/template.php');
} else {
echo "<h2>" . __('No WPBot Theme Found!', 'wpchatbot') . "</h2>";
}
?>
</div>
<?php
}
Code file location:
chatbot/chatbot/functions.phpAI ChatBot [wpwbot_products] Shortcode
The WPWBot Products shortcode fetches and displays recently viewed or featured products on your website. It uses WooCommerce and WP_Query to retrieve product data. This shortcode displays an agent profile with a custom icon, agent name, and a welcome message. If there are recently viewed products, it shows them. If not, it displays featured products. If neither is available, it shows the latest products. If no products are available, a message is displayed. Shortcode: [add_shortcode(‘wpwbot_products’, ‘qcld_wb_chatbot_recently_viewed_shortcode’)]
Shortcode: [wpwbot_products]
Examples and Usage
Basic example – Display recently viewed products using the ‘wpwbot_products’ shortcode.
[wpwbot_products]Advanced examples
Display a specified number of recently viewed products. Here, ’10’ is the number of products to be displayed.
[wpwbot_products products_per_page=10]Display recently viewed products with a customized welcome message. Here, ‘Hello, check out your recently viewed products!’ is the custom welcome message.
[wpwbot_products title='Hello, check out your recently viewed products!']You can also combine multiple attributes. This example displays 5 recently viewed products with a custom welcome message.
[wpwbot_products products_per_page=5 title='Here are your recently viewed products:']Please note that the actual usage and availability of these attributes may depend on the specific implementation of the ‘wpwbot_products’ shortcode in your WordPress theme or plugin.
PHP Function Code
In case you have difficulties debugging what causing issues with [wpwbot_products] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('wpwbot_products', 'qcld_wb_chatbot_recently_viewed_shortcode');Shortcode PHP function:
function qcld_wb_chatbot_recently_viewed_shortcode(){
// Get wpCommerce Global
$_pf = new WC_Product_Factory();
$product_per_page = sanitize_text_field(get_option('qlcd_wp_chatbot_ppp') != '' ? get_option('qlcd_wp_chatbot_ppp') : 10);
$wp_chatbot_product_title = wp_kses_post(wpb_randmom_message_handle(unserialize(get_option('qlcd_wp_chatbot_latest_product_welcome'))));
// Get recently viewed product cookies data
$viewed_products = !empty($_COOKIE['wp_chatbot_wpcommerce_recently_viewed']) ? (array)explode('|', $_COOKIE['wp_chatbot_wpcommerce_recently_viewed']) : array();
$viewed_products = array_filter(array_map('absint', $viewed_products));
//get featured products if has.
$featured_products = new WP_Query(array('post_status' => 'publish', 'posts_per_page' => $product_per_page, 'post_type' => 'product', 'tax_query' => array(array('taxonomy' => 'product_visibility', 'field' => 'name', 'terms' => 'featured'))));
//Getting recently vieew products.
if (!empty($viewed_products)) {
$wp_chatbot_product_title = wp_kses_post(wpb_randmom_message_handle(unserialize(get_option('qlcd_wp_chatbot_viewed_product_welcome'))));
$product_query = new WP_Query(array(
'posts_per_page' => $product_per_page,
'no_found_rows' => 1,
'post_status' => 'publish',
'post_type' => 'product',
'post__in' => $viewed_products,
));
//implementing featured products
} else if ($featured_products->post_count > 0) {
$wp_chatbot_product_title = wp_kses_post(wpb_randmom_message_handle(unserialize(get_option('qlcd_wp_chatbot_featured_product_welcome'))));
$product_query = $featured_products;
} else {
$wp_chatbot_product_title = wp_kses_post(wpb_randmom_message_handle(unserialize(get_option('qlcd_wp_chatbot_latest_product_welcome'))));
//Getting recent products
$product_query = new WP_Query(array('post_status' => 'publish', 'posts_per_page' => $product_per_page, 'post_type' => 'product', 'orderby' => 'date', 'order' => 'DESC'));
}
if (get_option('wp_chatbot_custom_agent_path') != "" && get_option('wp_chatbot_agent_image') == "custom-agent.png") {
$wp_chatbot_custom_icon_path = get_option('wp_chatbot_custom_agent_path');
} else if (get_option('wp_chatbot_custom_agent_path') != "" && get_option('wp_chatbot_agent_image') != "custom-agent.png") {
$wp_chatbot_custom_icon_path = QCLD_wpCHATBOT_IMG_URL . get_option('wp_chatbot_agent_image');
} else {
$wp_chatbot_custom_icon_path = QCLD_wpCHATBOT_IMG_URL . 'custom-agent.png';
}
$html = '<div class="wp-chatbot-agent-profile">
<div class="wp-chatbot-widget-avatar"><img src="' . esc_url($wp_chatbot_custom_icon_path) . '" alt=""></div>
<div class="wp-chatbot-widget-agent">' . esc_html(get_option('qlcd_wp_chatbot_agent')) . '</div>
<div class="wp-chatbot-bubble">' . esc_html($wp_chatbot_product_title) . '</div>
</div>';
if ($product_query->post_count > 0) {
$html .= '<div class="wp-chatbot-products-area">';
$html .= '<ul class="wp-chatbot-products">';
while ($product_query->have_posts()) : $product_query->the_post();
$product = $_pf->get_product(get_the_ID());
$html .= '<li class="wp-chatbot-product">';
$html .= '<a target="_blank" href="' . get_permalink(get_the_ID()) . '" wp-chatbot-pid= "' . get_the_ID() . '" title="' . esc_attr($product->post->post_title ? $product->post->post_title : get_the_ID()) . '">';
$html .= get_the_post_thumbnail(get_the_ID(), 'shop_catalog') . '
<div class="wp-chatbot-product-summary">
<div class="wp-chatbot-product-table">
<div class="wp-chatbot-product-table-cell">
<h3 class="wp-chatbot-product-title">' . $product->post->post_title . '</h3>
<div class="price">' . $product->get_price_html() . '</div>';
$html .= ' </div>
</div>
</div></a>
</li>';
endwhile;
wp_reset_query();
wp_reset_postdata();
$html .= '</ul></div>';
} else {
$html .= '<div class="wp-chatbot-products-area">';
$html .= '<p style="text-align: center">' . __('You have no products', 'wpchatbot') . ' !';
$html .= '</div>';
}
return $html;
}
Code file location:
chatbot/chatbot/functions.phpAI ChatBot [wpwbot_cart] Shortcode
The WPWBot Cart shortcode is a feature of the WPWBot plugin that displays a chatbot interface for the user’s shopping cart. It retrieves cart items, counts them, and generates an HTML layout for the cart. If the cart is empty, it shows a specific message. It also provides options to view the cart or proceed to checkout.
Shortcode: [wpwbot_cart]
Examples and Usage
Basic example – Displaying the chatbot cart using the shortcode without any attributes. This will display the chatbot cart with the default settings as defined in the function ‘qcld_wb_chatbot_cart_shortcode’.
[wpwbot_cart]PHP Function Code
In case you have difficulties debugging what causing issues with [wpwbot_cart] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('wpwbot_cart', 'qcld_wb_chatbot_cart_shortcode');Shortcode PHP function:
function qcld_wb_chatbot_cart_shortcode(){
global $wpcommerce;
$items = $wpcommerce->cart->get_cart();
$itemCount = $wpcommerce->cart->cart_contents_count;
$cart_title = wp_kses_post(wpb_randmom_message_handle(unserialize(get_option('qlcd_wp_chatbot_shopping_cart'))));
$no_cart_item_msg = wp_kses_post(wpb_randmom_message_handle(unserialize(get_option('qlcd_wp_chatbot_no_cart_items'))));
if (get_option('wp_chatbot_custom_agent_path') != "" && get_option('wp_chatbot_agent_image') == "custom-agent.png") {
$wp_chatbot_custom_icon_path = get_option('wp_chatbot_custom_agent_path');
} else if (get_option('wp_chatbot_custom_agent_path') != "" && get_option('wp_chatbot_agent_image') != "custom-agent.png") {
$wp_chatbot_custom_icon_path = QCLD_wpCHATBOT_IMG_URL . get_option('wp_chatbot_agent_image');
} else {
$wp_chatbot_custom_icon_path = QCLD_wpCHATBOT_IMG_URL . 'custom-agent.png';
}
$html = '<div class="wp-chatbot-agent-profile">
<div class="wp-chatbot-widget-avatar"><img src="' . esc_url($wp_chatbot_custom_icon_path) . '" alt=""></div>
<div class="wp-chatbot-widget-agent">' . esc_html(get_option('qlcd_wp_chatbot_agent')) . '</div>
<div class="wp-chatbot-bubble">' . wp_kses_post(wpb_randmom_message_handle(unserialize(get_option('qlcd_wp_chatbot_cart_welcome')))) . '</div>
</div>';
if ($itemCount >= 1) {
$html .= '<div class ="wp-chatbot-cart-container">';
$html .= '<div class="wp-chatbot-cart-header"><div class="qcld-wp-chatbot-cell">' . wp_kses_post(wpb_randmom_message_handle(unserialize(get_option('qlcd_wp_chatbot_cart_title')))) . '</div><div class="qcld-wp-chatbot-cell">' . wp_kses_post(wpb_randmom_message_handle(unserialize(get_option('qlcd_wp_chatbot_cart_quantity')))) . '</div><div class="qcld-wp-chatbot-cell">' . wp_kses_post(wpb_randmom_message_handle(unserialize(get_option('qlcd_wp_chatbot_cart_price')))) . '</div> <div class="qcld-wp-chatbot-cell"></div> </div>';
$html .= '<div class ="wp-chatbot-cart-body">';
foreach ($items as $item => $values) {
$cart_item = apply_filters('wpcommerce_cart_item_product', $values['data'], $values, $item);
//product image
$getProductDetail = wc_get_product($values['product_id']);
$price = get_post_meta($values['product_id'], '_price', true);
$html .= '<div class="wp-chatbot-cart-single">
<div class="qcld-wp-chatbot-cell"> <h3 class="wp-chatbot-title">' . $cart_item->get_title() . '</h3></div>';
$html .= '<div class="qcld-wp-chatbot-cell">';
$html .= '<input class="qcld-wp-chatbot-cart-item-qnty" data-cart-item="' . $item . '" type="number" min="1" value="' . $values['quantity'] . '"></div>';
$html .= '<div class="qcld-wp-chatbot-cell"><span class="wp-chatbot-cart-price">' . apply_filters('wpcommerce_cart_item_price', WC()->cart->get_product_price($cart_item), $values, $item) . '</span> </div>';
$html .= '<div class="qcld-wp-chatbot-cell"><span data-cart-item="' . $item . '" class="wp-chatbot-remove-cart-item">X</span></div> </div>';
}
$html .= ' </div>';//End of cart body
$html .= '<div class="wp-chatbot-cart-single">
<div class="qcld-wp-chatbot-cell"></div>
<div class="qcld-wp-chatbot-cell"><strong>Total</strong></div>
<div class="qcld-wp-chatbot-cell"><strong>' . $wpcommerce->cart->get_cart_total() . '</strong></div>
</div>';
$html .= '<div class="wp-chatbot-cart-footer"><div class="qcld-wp-chatbot-cart-page"><a href="' . site_url() . '/cart" target="_blank" >' . wp_kses_post(wpb_randmom_message_handle(unserialize(get_option('qlcd_wp_chatbot_cart_link')))) . '</a></div><div class="qcld-wp-chatbot-checkout"><a href="' . site_url() . '/checkout" target="_blank">' . wp_kses_post(wpb_randmom_message_handle(unserialize(get_option('qlcd_wp_chatbot_checkout_link')))) . '</a></div></div>';
$html .= ' </div>';
} else {
$html .= '<div class="wp-chatbot-cart-container">';
$html .= '<div><p style="text-align:center">' . $no_cart_item_msg . '</p></div>';
$html .= '</div>';
}
// $response=array('html'=>$html,'items'=>$itemCount);
return $html;
}
Code file location:
chatbot/chatbot/functions.phpConclusion
Now that you’ve learned how to embed the AI ChatBot Plugin shortcodes, 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