External Customer Display Example

An external customer display allows a customer to connect to your checkout in real time and view the sale as it is being rung up. They use their mobile phone and access the checkout via the internet. They can interact with their sale to some extent, such as typing their own email address or shipping details. This differs from an instore customer display that runs on your device, inside your secure store network, and shows all sales on a lane.

Key Points

• The customer connects to their sale, and can only see their sale. Connecting again one hour after they've left the store, still only shows their sale
• While you can have links on the page to "get my receipt PDF", this might mean customers do not give you their emails.
• In order to connect to their sale, the customer typically scans a QR code. This QR code ideally changes for every sale and contains a unique id for the sale. Other ways are possible too.
• Using a websocket rather than polling ensures very fast updates, often the customers view of the sale updates before the checkout.
• A customer display websocket is limited in the APIs it can call, and is talking to a seperate webserver that doesn't have connection to your system anyway.

How it Works

Customer scans QR code shown instore

This connects to a web page on your website, with your branding. It has a unique sale key to identify a single sale

The webpage on the customers phone, connects directly to a fieldpine server and opens an FD1 websocket.

Fieldpine and the checkout also open a realtime network connection between themselves to communicate

If the customer reopens the link several days later, they still see only that sale, and the checkout is not contacted

Customer Facing Web Page Overview

The QR scanned in store takes the customer to a web page you create. This can use any framework or tech stack you wish, it is a plain web page. In order to connect to the lane, a number of query parameters are included.

• fn Contains the allocated domain name for your retail business. This is the Fieldpine unique domain, such as exciting-blue-penguin
• id A unique random sale identifier

Fieldpine supply a client side javacript script that you can include on your web page to handle the required network connections. Add these lines near the end of your web page

<script>
  function BootPage() {
    // Set default output areas.  These point to a DOM element with id "salearea".
    // If invalid, nothing is drawn
    CustomerDisplay.SaleArea = "salearea";
    CustomerDisplay.DebugArea = "debugarea";

    CustomerDisplay.Connect();
  }
</script>
<script src="custdisp.js" onload="BootPage()"></script>

This creates a global variable called CustomerDisplay. When a message is received, functions on that object are called. You replace the default functions with your code.

<div>Sale total is <span id='saletotal'>...</span></div>

<script>
  function BootPage() {
    CustomerDisplay.DrawSale = function() {
        // Grab the message, as documented at https://docs.fieldpine.com/developers/fd1/sc_custdisp.sale.star.htm
        let sale = CustomerDiplay.CurrentSale.v;

        // Draw sale.  For demo, we will display the saletotal
        document.getElementById("saletotal").innerHTML = Number(sale.saletotal).toFixed(2);
    };

    CustomerDisplay.Connect();
  }
</script>
<script src="custdisp.js" onload="BootPage()"></script>