Get a free advice now!

    Pick the topic

    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.

    Tags

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

    Comments
    0 response

    Add comment

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

    Popular news

    A game changer for WooCommerce users
    • Our Highlights

    A game changer for WooCommerce users

    March 24, 2023 by createIT
    The differences between a web app and a mobile app
    • Services
    • Technology
    • Trends

    The differences between a web app and a mobile app

    March 7, 2023 by createIT
    Webrooming and showrooming
    • Trends

    Webrooming and showrooming

    February 14, 2023 by createIT
    PHPStorm – fix long load time of a directory window
    • Dev Tips and Tricks

    PHPStorm – fix long load time of a directory window

    January 20, 2023 by createIT
    reCAPTCHA v3 – WordPress implementation
    • Dev Tips and Tricks

    reCAPTCHA v3 – WordPress implementation

    January 20, 2023 by createIT
    How to compare GIT and server files
    • Dev Tips and Tricks

    How to compare GIT and server files

    January 19, 2023 by createIT
    How to trigger a click event inside iframe?
    • Dev Tips and Tricks

    How to trigger a click event inside iframe?

    January 19, 2023 by createIT
    FOOEvents – generate a custom CSV report
    • Dev Tips and Tricks

    FOOEvents – generate a custom CSV report

    January 19, 2023 by createIT
    Headless chrome – testing webgl using playwright
    • Dev Tips and Tricks

    Headless chrome – testing webgl using playwright

    January 18, 2023 by createIT
    Preview big SQL files with PilotEdit
    • Dev Tips and Tricks

    Preview big SQL files with PilotEdit

    January 18, 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