X
    Categories: WooCommerce Tutorials, Tips and GuidesWordPress Tutorials, Tips and Guides

WooCommerce Chatbot: Easily Integrate Chatbot to Your Stores

A chatbot is a software component that simulates conversation with human users. These bots are increasingly being used at ecommerce stores to greatly improve user experience by offering product suggestion and answering common customer queries.

The advantage of WordPress chatbots is that they are available 24/7 and filter out the routine questions that would otherwise take up the human support agents’ time. Thus chatbots are a particularly effective option for reducing the operational expenses of customer support.

How Chatbots add Value to Your WooCommerce Store

Chatbots have become a common component of many WooCommerce stores because:

  • They can serve a number of customers simultaneously without slowing down.
  • Customers get personalized shopping recommendations and price checks.
  • Chatbots are a great way of delivering location based services and offers
  • Chatbots help in conversions by providing product discovery and product suggestions.

Add a Custom Chatbot to Your WooCommerce Store

The good news is that you could easily add a custom chatbot to your WooCommerce store without any major hassle. Of course, you could always opt for a pre-built chatbot, but you loose the advantage of a custom built chatbot that integrates well into your WooCommerce store.

I will now present a structure that you could use to create and integrate a chatbot into your WooCommerce store. This structure comprises of the main structure file, Cw-woo-chat-bot.php and functions.php

Note : This chatbot is based on WooWBot WooCommerce Chat Bot

 

Here is the code of the main class: class_CW_Chatbot_Woo

class CW_Chatbot_Woo
{
private $id = 'cwbotwoo';
private static $instance;

public static function cw_chatbot_wo_get_instance()
{
if (!self::$instance) {
self::$instance = new self();
self::$instance->cw_chatbot_wo_init();
}
return self::$instance;
}

private function __construct()
{
}

public function cw_chatbot_wo_init()
{

if (!class_exists('WooCommerce') || version_compare(get_option('woocommerce_db_version'), CW_CHATBOT_WOO_REQUIRED_WOOCOMMERCE_VERSION, '<')) {
add_action('admin_notices', array($this, 'woocommerce_inactive_notice_for_woo_chatbot'));
return;
}
add_action('admin_menu', array($this, 'cw_chatbot_wo_admin_menu'));
if ((!empty($_GET["page"])) && ($_GET["page"] == "cwbotwoo")) {
add_action('admin_init', array($this, 'cw_chatbot_wo_save_options'));
}
if (is_admin()) {
add_action('admin_enqueue_scripts', array($this, 'cw_chatbot_wo_admin_scripts'));
}
if (!is_admin()) {
add_action('wp_enqueue_scripts', array($this, 'cw_chatbot_wo_frontend_scripts'));
}
}

public function cw_chatbot_wo_admin_menu()
{
add_submenu_page('woocommerce',
__('WoowBot', 'woochatbot'),
__('WoowBot', 'woochatbot'),
'manage_woocommerce',
$this->id,
array($this, 'cw_chatbot_wo_admin_page'));
}

public function cw_chatbot_wo_admin_scripts($hook)
{
global $woocommerce, $wp_scripts;
$suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '' : '.min';
if (((!empty($_GET["page"])) && ($_GET["page"] == "cwbotwoo")) || ($hook == "widgets.php")) {
wp_enqueue_script('jquery');
wp_enqueue_style('woocommerce_admin_styles', $woocommerce->plugin_url() . '/assets/css/admin.css');
wp_register_style('cwcb-woo-chatbot-admin-style', plugins_url(basename(plugin_dir_path(__FILE__)) . '/css/admin-style.css', basename(__FILE__)), '', CW_CHATBOT_WOO_VERSION, 'screen');
wp_enqueue_style('cwcb-woo-chatbot-admin-style');
wp_register_style('cwcb-woo-chatbot-font-awesome', plugins_url(basename(plugin_dir_path(__FILE__)) . '/css/font-awesome.min.css', basename(__FILE__)), '', CW_CHATBOT_WOO_VERSION, 'screen');
wp_enqueue_style('cwcb-woo-chatbot-font-awesome');
wp_register_style('cwcb-woo-chatbot-tabs-style', plugins_url(basename(plugin_dir_path(__FILE__)) . '/css/woo-chatbot-tabs.css', basename(__FILE__)), '', CW_CHATBOT_WOO_VERSION, 'screen');
wp_enqueue_style('cwcb-woo-chatbot-tabs-style');
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery-ui-core');
array('ajax_url' => admin_url('admin-ajax.php')));
}
}
public function cw_chatbot_wo_frontend_scripts(){
global $woocommerce, $wp_scripts;
$woo_chatbot_obj = array(
'woo_chatbot_position_x' => get_option('woo_chatbot_position_x'),
'woo_chatbot_position_y' => get_option('woo_chatbot_position_y'),
'ajax_url' => admin_url('admin-ajax.php'),
'image_path'=>CW_CHATBOT_WOO_IMG_URL,
'host'=> get_option('cw_woo_chatbot_host'),
'agent'=> get_option('cw_woo_chatbot_agent'),
'agent_join'=> get_option('cw_woo_chatbot_agent_join'),
'welcome'=> get_option('cw_woo_chatbot_welcome'),
'asking_name'=> get_option('cw_woo_chatbot_asking_name'),
'i_am'=> get_option('cw_woo_chatbot_i_am'),
'name_greeting'=> get_option('cw_woo_chatbot_name_greeting'),
'product_asking'=> get_option('cw_woo_chatbot_product_asking'),
'product_suggest'=> get_option('cw_woo_chatbot_product_suggest'),
'product_infinite'=> get_option('cw_woo_chatbot_product_infinite'),
'product_success'=> get_option('cw_woo_chatbot_product_success'),
'product_fail'=> get_option('cw_woo_chatbot_product_fail'),
'currency_symbol' => get_woocommerce_currency_symbol(),
);
wp_register_script('qcld-woo-chatbot-slimscroll-js', plugins_url(basename(plugin_dir_path(__FILE__)) . '/js/jquery.slimscroll.min.js', basename(__FILE__)), array('jquery'), CW_CHATBOT_WOO_VERSION, true);
wp_enqueue_script('qcld-woo-chatbot-slimscroll-js');
wp_register_script('qcld-woo-chatbot-frontend', plugins_url(basename(plugin_dir_path(__FILE__)) . '/js/qcld-woo-chatbot-frontend.js', basename(__FILE__)), array('jquery'), CW_CHATBOT_WOO_VERSION, true);
wp_enqueue_script('qcld-woo-chatbot-frontend');
wp_localize_script('qcld-woo-chatbot-frontend', 'woo_chatbot_obj', $woo_chatbot_obj);
wp_register_style('qcld-woo-chatbot-frontend-style', plugins_url(basename(plugin_dir_path(__FILE__)) . '/css/frontend-style.css', basename(__FILE__)), '', CW_CHATBOT_WOO_VERSION, 'screen');
wp_enqueue_style('qcld-woo-chatbot-frontend-style');
}

public function cw_chatbot_wo_admin_page()
{
global $woocommerce;
$action = 'admin.php?page=cwbotwoo'; ?>
<div class="woo-chatbot-wrap wrap">
<div class="icon32"><br></div>
<form action="<?php echo esc_attr($action); ?>" method="POST" enctype="multipart/form-data">
<div class="container form-container">
<h2><?php echo __('Woowbot Control Panel', 'woochatbot'); ?></h2>
<section class="woo-chatbot-tab-container-inner">
<div class="woo-chatbot-tabs woo-chatbot-tabs-style-flip">
<nav>
<ul>
<li><a href="#section-flip-1"><i class="fa fa-toggle-on"></i><span> <strong>GENERAL SETTINGS</strong></span></a>
</li>
<li><a href="#section-flip-3"><i class="fa fa-gear faa-spin"></i><span> Woowbot ICONS</span></a></li>
<li><a href="#section-flip-7"><i class="fa fa-language"></i><span> LANGUAGE CENTER</span></a></li>
<li><a href="#section-flip-8"><i class="fa fa-code"></i><span> Custom CSS</span></a></li>
</ul>
</nav>
<div class="content-wrap">
<section id="section-flip-1">
<div class="top-section">
<div class="row">
<div class="col-xs-12">
<p class="qc-opt-title-font">
Disable Woowbot
</p>
<div class="cxsc-settings-blocks">
<input >

Download the code

Wrapping Up

In this article, I presented the code for implementing a custom chatbot at your WooCommerce store. If you need help with the code, post your questions in the comments and I will get back to you ASAP.

Owais Alam: is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com