Social proof widget in WooCommerce - createIT

Get a free advice now!

    Pick the topic

    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.


    Social proof widget in WooCommerce

    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 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.

    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);
             $event->addCustomEventField('social_service', $social_service);
             $event->addCustomEventField('total_price', $total_price);
          $fomoEvent = self::$client->createEvent($event);
          return $fomoEvent;

    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 );
     * 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="" async></script>

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

    0 response

    Add comment

    Your email address will not be published. Required fields are marked *

    Popular news

    How to Get and Use the ChatGPT API
    • Dev Tips and Tricks

    How to Get and Use the ChatGPT API

    April 25, 2024 by createIT
    eCommerce growth – is your business ready?
    • Services
    • Trends

    eCommerce growth – is your business ready?

    April 8, 2024 by createIT
    Digital marketing without third-party cookies – new rules
    • Technology
    • Trends

    Digital marketing without third-party cookies – new rules

    February 21, 2024 by createIT
    eCommerce healthcheck
    • Services
    • Trends

    eCommerce healthcheck

    January 24, 2024 by createIT
    Live Visitor Count in WooCommerce with SSE
    • Dev Tips and Tricks

    Live Visitor Count in WooCommerce with SSE

    December 12, 2023 by createIT
    Calculate shipping costs programmatically in WooCommerce
    • Dev Tips and Tricks

    Calculate shipping costs programmatically in WooCommerce

    December 11, 2023 by createIT

    Support – Tips and Tricks
    All tips in one place, and the database keeps growing. Stay up to date and optimize your work!

    Contact us