Social proof widget in WooCommerce
CHALLENGE: add user activity notifications to a WP site
SOLUTION: create integration with Fomo – which is a social proof marketing platform
What is social proof?
For an ecommerce shop, it is important to build a trustworthy image. We can display customer reviews, the number of followers or client’s testimonies. Social influence will have an impact on new customers, who will be more willing to make an order. A more advanced solution will be to show a widget with live data. Here are some examples of notification texts:
- 10 customers are currently viewing this product
- this product was purchased 23 times in the last 24h
- This product was shared 105 times on Twitter and Facebook
- John from New York has just purchased this product
- Anna has just subscribed to our newsletter
- Adam has just used a promotional coupon and saved $15 on his order
- Monika has just reviewed this product
- Mark started the free trial
- Elizabeth upgraded her subscription to Gold
Social proof implementation
To show a widget with live data, we’re going to use the Fomo API https://fomo.com/. Fomo is a marketing tool for social proof that offers customized notifications. A social widget optimized with custom design and machine learning will increase conversion in the online shop.
Our plan to get it to work will be:
- to track ecommerce events in our WooCommerce shop (purchase, adding to cart, viewing product page, viewing category page, email newsletter mailchimp subscription) and push this data into the Fomo service
- to configure proper widget templates in the Fomo Admin Area
- to implement WooCommerce → Fomo integration
- to include the javascript Fomo widget so it displays a live feed of events in the store
Using PHP SDK
We will prepare a PHP class that will register any event in the Fomo API. By default, a Fomo event has multiple predefined fields like: url, first_name, city, country, image_url. We can also add custom fields to the event.
<?php
// https://github.com/usefomo/fomo-php-sdk
require get_template_directory() . '/inc/lib/Fomo/vendor/autoload.php';
use Fomo\FomoClient;
use Fomo\FomoEventBasic;
class ctUserfomoEvents {
private static $auth_token = 'abc';
public static $app_id = 'efg';
private static $client;
public static function init() {
self::$client = new FomoClient(self::$auth_token);
}
public static function createEvent($first_name, $country_iso, $title, $url, $image_url, $last_name_letter, $template_id, $social_service = null, $total_price = null) {
$event = new FomoEventBasic();
$event->event_type_id = $template_id;
$event->first_name = $first_name;
$event->country = $country_iso;
$event->title = $title;
$event->url = $url;
$event->image_url = $image_url;
$event->addCustomEventField('last_name', $last_name_letter);
if(!empty($social_service)){
$event->addCustomEventField('social_service', $social_service);
}
if(!empty($total_price)){
$event->addCustomEventField('total_price', $total_price);
}
$fomoEvent = self::$client->createEvent($event);
return $fomoEvent;
}
}
ctUserfomoEvents::init();
Register WooCommerce events
Now, we can use our PHP class to notify the Fomo API about any custom ecommerce / application event. We just need to hook in proper action / hook and call our method createEvent . Here are a couple of examples of how to do it in the WooCommerce shop:
/**
* WooCommerce - customer completed checkout
*/
add_action( 'woocommerce_new_order', 'send_order_to_fomo' );
function send_order_to_fomo( $order_id ){
$order = wc_get_order( $order_id );
$user = $order->get_user();
if( $user ){
// @TODO - implement
// prepare order / user data
$data = array();
ctUserfomoEvents::createEvent( $data );
}
}
/**
* MC4WP: Mailchimp for WordPress
* triggered when: every time a MailChimp for WordPress integration is successfully used to subscribe.
*/
add_action( 'mc4wp_integration_subscribed', function( $integration, $email_address, $merge_vars ) {
// @TODO - gather all data from form
$data = array();
ctUserfomoEvents::createEvent( $data );
}, 10, 3 );
/**
* WP Backend for Ajax function - catch user interactions (sharing via Social Media)
*/
add_action( 'wp_ajax_nopriv_user_catch_events', 'user_catch_events');
add_action( 'wp_ajax_user_catch_events', 'user_catch_events' );
function user_catch_events() {
// fomo integration
if ( $_POST[ 'type' ] == 'share' ) {
$post_id = $_POST[ 'post_id' ];
$social_service = $_POST[ 'service' ];
// @TODO implement
// get user data from WP_User session or cookie
$first_name = '';
$country_iso = '';
$title = '';
$url = '';
if ( $post_id == 0 ) {
$url = wp_get_referer();
$post_id = url_to_postid( $url );
}
if ( !is_null( $post_id ) ) {
$title = get_the_title( $post_id );
$url = get_permalink( $post_id );
}
$country_key = strtolower( $country_iso );
// @TODO - normalize $data
$data = array();
ctUserfomoEvents::createEvent( $data );
$response = [
'html' => 'Done',
];
wp_send_json_success( $response );
wp_die();
}
wp_send_json_error();
wp_die();
}
/**
* Ajax request – JS frontend part: USER CATCH EVENTS share via social media
*/
$( '#social-share-links' ).find( 'a' ).click( function () {
$.ajax( {
type: "POST", dataType: "json", url: ctvars.ajaxurl, data: {
'action': 'user_catch_events', 'type': 'share',
}, success: function ( data ) {
console.log( data );
}, error: function ( jqXHR, errorText, errorThrown ) {
console.log( 'fail' );
}
} );
} );
Display the Fomo Notification Widget
/** * Enqueue FOMO widget * The identifier following /api/v1 is your application's client_id, which is safe to share publicly. */ <script src="https://load.fomo.com/api/v1/abc123456789/load.js" async></script>
That’s it. Make sure you follow our blog for other useful guides.
