One-tap receipt printing for your web app

What your users need

1. An Android phone or tablet with Chrome.
2. The Awaken Print app from Google Play (coming soon).
3. A Bluetooth thermal receipt printer (58 mm or 80 mm, ESC/POS), chosen once in the app.

Add it in 3 steps

1. Load the script on the page that shows the receipt

<script src="https://print.awakendev.com/1/pos-printer.js"></script>

2. Prepare the receipt when the page has loaded

On a slow phone, drawing the receipt takes a second or two. Doing it early makes the tap instant.

var receipt = document.getElementById('receipt');
if (window.PosPrinter) PosPrinter.prepare(receipt);

3. Print on tap

document.getElementById('printBtn').onclick = function () {
  if (window.PosPrinter) PosPrinter.print(receipt);
  else window.print();
};

That's all. PosPrinter.print sends the receipt to Awaken Print when it can, and calls window.print() when it can't.

Full example

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://print.awakendev.com/1/pos-printer.js"></script>
  <style>
    #receipt { width: 48mm; font-family: sans-serif; font-size: 12px; color: #000; }
    #receipt .row { display: flex; justify-content: space-between; }
    #receipt h1 { font-size: 16px; text-align: center; margin: 0 0 4px; }
  </style>
</head>
<body>
  <div id="receipt">
    <h1>My Shop</h1>
    <div class="row"><span>Tea x2</span><span>200.00</span></div>
    <div class="row"><span>Bun x1</span><span>80.00</span></div>
    <div class="row"><b>Total</b><b>280.00</b></div>
    <p style="text-align:center">Thank you!</p>
    <button class="no-print" onclick="location.href='/'">Back</button>
  </div>

  <button id="printBtn">Print</button>

  <script>
    var receipt = document.getElementById('receipt');
    if (window.PosPrinter) PosPrinter.prepare(receipt);
    document.getElementById('printBtn').onclick = function () {
      if (window.PosPrinter) PosPrinter.print(receipt);
      else window.print();
    };
  </script>
</body>
</html>

Try it on a phone first: open print.awakendev.com/demo in Chrome on an Android phone with Awaken Print installed.

Pin the script (recommended)

To be sure the file you load is the one we published, add its hash:

<script src="https://print.awakendev.com/1/pos-printer.js"
        integrity="sha256-UAuhMqSs6gBSzvrj27SiJGOVCQvjpFhVlnarDoRIJ0s="
        crossorigin="anonymous"></script>

When we publish a fix, the hash changes and we list the new one under Changes. If the hash doesn't match, the browser won't run the script, and your page falls back to window.print(). That's why the examples check window.PosPrinter. You can also keep a copy of the file on your own server and load it from there.

What happens on each device

Your page never needs to know which one happened. If you want to know, print() returns a promise that gives 'app' or 'fallback'.

Designing the receipt

The script takes a picture of your receipt element and prints it dot for dot, so what you see is what prints.

• Width: the receipt is drawn 181 CSS px wide (48 mm, the printable width of 58 mm paper). Design for that width. On 80 mm printers the same receipt prints centred, not stretched.
• Colours: everything prints black or white. The script makes text black and removes backgrounds by default, so dark mode on the phone is fine. Grey text may vanish; use black.
• Fonts: any web font your page has loaded works, including Sinhala and Tamil. Very small text is hard to read on a thermal printer, so try your sizes on paper.
• Images (logo, QR code): they must come from your own domain, or from a server that sends CORS headers. Otherwise the browser won't let the script draw them and they print blank.
• Hide things: give anything you don't want printed (buttons, links) the class no-print.
• Length: up to about 75 cm of paper (6000 dot rows). A longer receipt is refused, so a bug can't print a whole roll.
• The receipt is copied off-screen to draw it, so it doesn't need to be visible. It does need to be in the page.

Options

Pass them as the second argument to prepare and print, and use the same ones for both:

PosPrinter.print(receipt, { hide: '.no-print, .ad', threshold: 160 });

What it costs your users

• The script is free for you to use. No sign-up, no key.
• Each phone gets 20 free prints. After that, every receipt ends with a small bold line, “Powered by Awaken POS”, until the shop subscribes to Awaken Print in the app (Rs 1,000 a month, first month Rs 500, paid through Google Play).
• Shops using Awaken POS print free.

Privacy

The receipt goes from the page to the app on the phone, and from the app to the printer over Bluetooth. Nothing is sent to us or to any server. The script only reads your page's own fonts and images to draw the receipt, and doesn't track anyone.

Not a website?

If you make a native Android app, you can open the same link Awaken Print understands. You draw the receipt as 1-bit rows yourself. Email us and we'll send the link format.

Versions

• /1/ stays compatible for as long as Awaken Print supports it. Fixes ship to the same address.
• If the link format ever has to change, the new script goes to /2/, and /1/ keeps working with the app.

Changes

Help

Questions, or something prints wrong? Email [email protected] with your page's address and a photo of the receipt.