We have recently refreshed our branding across our offerings and changed the names of our pricing plans. If you have signed up before Aug 9, 2021, please click Previous plans to view your applicable plans.
We assure you that this change will not impact your product experience, and no action is required on your part.
With WooCommerce Smart Plug integration you can view your customer's order history right from within Freshchat .
For instructions on how to add a smart plug, refer Working with Smart Plugs.
Sample code snippet:
<script>
var store_details = {
// WooCommerce Domain
domain: 'WooCommerce Domain',
// WooCommerce Consumer Key
cs_key: 'consumer key',
// WooCommerce Consumer Secret
cs_secret: 'consumer secret key'
};
</script>
<style>
.Logo2 {
width: 40px;
display: inline;
}
.mainTitle {
display: inline-block;
}
#woo-commerce-banner {
cursor: pointer;
}
div#woo-commerce-main-content {
font-size: 15px;
}
.show-field {
margin-bottom: 8px;
border-bottom: 1px solid #dadada;
list-style: none;
}
.show-field .break-word {
word-wrap: break-word;
word-break: break-word;
}
.field-label {
font-weight: 800;
margin-bottom: 3px;
display: block;
}
.field-value {
display: block;
}
a#custom_show_more {
display: none;
padding: 0;
height: auto;
text-align: center;
cursor: pointer;
}
ul#extra {
display: none;
}
ul#initial {
padding: 0px;
}
ul#extra {
padding: 0px;
}
.preloader_main {
text-align: center;
padding: 30px;
}
#woo-commerce-banner {
cursor: pointer;
padding-bottom: 5px;
}
#woo-commerce-content-tab {
padding-top: 15px;
border-top: 0.2px solid #3864af;
}
</style>
<div id="woo-commerce-main">
<div id="woo-commerce-banner">
<img class="Logo2" src="http://www.iconninja.com/files/567/537/200/logo-development-js-coding-woocommerce-script-icon.svg">
<h4 class="mainTitle">WooCommerce</h4>
</div>
<div id="woo-commerce-content-tab" style="display:none;">
<div id="woo-commerce-main-content">
<ul id="initial" class="show-fields">
</ul>
<a id="custom_show_more">Show more</a>
<ul id="extra" class="show-fields">
</div>
<div id="woo-commerce-error">
<div class="error-message">
</div>
</div>
</div>
</div>
<script>
var wcWidget = (function($, window, email) {
if (window.WOO_COMMERCE_WIDGET) {
window.WOO_COMMERCE_WIDGET.setItUp(email); // pass conversation / user info here
return window.WOO_COMMERCE_WIDGET;
}
var wcWidgetMain = WOO_COMMERCE_WIDGET = {
fcEmail: '',
reqHeader: {
"Authorization": "Basic " + btoa(store_details.cs_key + ":" + store_details.cs_secret),
"Content-Type": "application/json"
},
pre_loader: "<div class='preloader_main'><img src='https://dl.dropbox.com/s/6oxuta50xyfkpfs/712.gif'/></div>",
customerRequest: '',
initialize: function() {
console.log('Init Woocommerce');
},
setItUp: function(email) {
console.log('setItUp');
this.fcEmail = email;
this.customerRequest = false;
console.log('User Email is : '+this.fcEmail);
// this.getUserId("arjun@freshdesk.com");
// this.getUserId(email);
},
bindFunction: function(scope, fn) {
return function () {
fn.apply(scope, arguments);
};
},
expandDetails: function() {
console.log('Click');
var _self = this;
$('#woo-commerce-content-tab').toggle('slow');
if (this.fcEmail && this.fcEmail.length > 0) {
console.log('Email present');
if (this.customerRequest === false) {
jQuery('#woo-commerce-main-content #initial').html(this.pre_loader);
this.getUserId(this.fcEmail);
}
else {
console.log('Ignore since already loaded');
}
}
else {
console.log('No Email present');
this.showErrorMessage();
}
},
getUserId: function(email) {
var _self = this;
$.ajax({
method: "POST",
url: "/app/extension_proxy",
processData: false,
// async: false,
data: JSON.stringify({
url: 'https://'+store_details.domain+'/wc-api/v2/customers/email/'+email,
method : "GET",
headers: _self.reqHeader,
}),
success: function(data,response, header,xhr, headers) {
console.log('User get Success');
_self.customerRequest = true;
_self.wcUserInfo(data);
},
error: function(data) {
console.log('Error on user search');
failure = data;
}
});
},
wcUserInfo: function(data) {
user = data;
var start = '<li class="show-field"><div class="field-label break-word">';
var middle = '</div><div class="field-value break-word">';
var end = '</div></li>';
content = "";
var billing_address = data.customer.billing_address.company+' '+
data.customer.billing_address.address_1+' '+
data.customer.billing_address.address_1+' '+
data.customer.billing_address.postcode+' '+
data.customer.billing_address.city+' '+
data.customer.billing_address.state+' '+
data.customer.billing_address.country;
var shipping_address = data.customer.shipping_address.company+' '+
data.customer.shipping_address.address_1+' '+
data.customer.shipping_address.address_1+' '+
data.customer.shipping_address.postcode+' '+
data.customer.shipping_address.city+' '+
data.customer.shipping_address.state+' '+
data.customer.shipping_address.country;
content += start + "Created On" + middle + moment(data.customer.created_at).format('Do[,] MMMM YYYY [at] hh:mm A') + end ;
content += start + "First Name" + middle + ((data.customer.first_name.length > 0) ? data.customer.first_name : 'N/A') + end;
content += start + "Last Name" + middle + ((data.customer.last_name.length > 0) ? data.customer.last_name : 'N/A') + end;
content += start + "Email" + middle + ((data.customer.email.length > 0) ? data.customer.email : 'N/A') + end;
content += start + "Last Order Date" + middle + ((data.customer.last_order_date != null) ? moment(data.customer.last_order_date).format('Do[,] MMM YYYY [at] hh:mm A') : 'No Order(s)') + end ;
content += start + "Last Order ID" + middle + ((data.customer.last_order_id != null) ? data.customer.last_order_id : 'No Order(s)') + end ;
jQuery('.preloader_main').remove();
$('ul#initial').html(content);
$('#custom_show_more').css('display','block');
content = "";
content += start + "Total Spent" + middle + ((data.customer.total_spent != 0) ? data.customer.total_spent : 'NIL') + end ;
content += start + "Total Number of Orders" + middle + ((data.customer.orders_count != 0) ? data.customer.orders_count : 'No Order(s)') + end ;
content += start + "Role" + middle + data.customer.role + end ;
content += start + "Username" + middle + ((data.customer.username.length> 0) ? data.customer.username : 'N/A') + end;
content += start + "Billing Address Country" + middle + ((billing_address.trim().length > 0) ? billing_address : 'N/A') + end;
content += start + "Shipping Address Country" + middle + ((shipping_address.trim().length > 0) ? shipping_address : 'N/A') + end;
$('ul#extra').html(content);
},
show_more: function(){
var text = $("#custom_show_more").text();
if(text == "Show more"){
$("#custom_show_more").text('Show less');
}
else{
$("#custom_show_more").text('Show more');
}
$('ul#extra').toggle();
},
showErrorMessage: function() {
var template = '<div id="message-content>No User Email Present"</div>';
$('.error-message').html(template);
}
};
wcWidgetMain.initialize();
setTimeout(function() {
wcWidgetMain.setItUp(email);
}, 100);
return wcWidgetMain;
})(jQuery, window, "{{user.email}}");
window.fcAgent.events.addEventListeners({
"events": [
{ "event":"click", selector:"#woo-commerce-banner", callback: wcWidget.bindFunction(wcWidget,wcWidget.expandDetails) },
{ "event":"click", selector:"#custom_show_more", callback: wcWidget.bindFunction(wcWidget,wcWidget.show_more) },
// { "event":"click", selector:"#closeBtn", callback: sbsWidget.bindFunction(sbsWidget,sbsWidget.closeModal) },
// { "event":"click", selector:"#bein_calls", callback: sbsWidget.bindFunction(sbsWidget,sbsWidget.openModal) },
// { "event":"click", selector:"#bein_contracts", callback: sbsWidget.bindFunction(sbsWidget,sbsWidget.openModal) }
]
});
</script>
