Social proof widget in WooCommerce

Contents

What is social proof?
Social proof implementation
Using PHP SDK
Register WooCommerce events
Display the Fomo Notification Widget

CHALLENGE: add user activity notifications to a WP site
SOLUTION: create integration with Fomo – which is a social proof marketing platform

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

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.

&lt;?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-&gt;event_type_id = $template_id;
      $event-&gt;first_name = $first_name;
      $event-&gt;country = $country_iso;
      $event-&gt;title = $title;
      $event-&gt;url = $url;
      $event-&gt;image_url = $image_url;
      $event-&gt;addCustomEventField('last_name', $last_name_letter);
      if(!empty($social_service)){
         $event-&gt;addCustomEventField('social_service', $social_service);
      }
      if(!empty($total_price)){
         $event-&gt;addCustomEventField('total_price', $total_price);
      }
      $fomoEvent = self::$client-&gt;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-&gt;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' =&gt; '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.
 */

&lt;script src="https://load.fomo.com/api/v1/abc123456789/load.js" async&gt;&lt;/script&gt;

That’s it. Make sure you follow our blog for other useful guides.