Send accepted orders to your jewelry POS

Everything here builds on the embedded studio. If your studio still runs on its own Diamra address, follow the embed guide first and come back. The messages below only travel between the studio and the page that frames it. On a direct visit there is no page to talk to, so nothing is sent.

The studio runs inside an iframe on your page. Browsers let the two talk through a standard called postMessage. Every message the studio sends is a small object with a type that starts with diamra: and a few fields. Add one listener to your page and check two things before you trust a message: it came from your store address on Diamra, and it came from the studio iframe itself. Your store address is the one you sign in to your bench at, with no path after it. A store that belongs to a group uses its full address with the two dashes, for example https://yourstore--group.diamra.com.

const STUDIO_ORIGIN = "https://yourstore.diamra.com";
const studio = () => document.querySelector("[data-diamra-store] iframe");

window.addEventListener("message", (event) => {
  if (event.origin !== STUDIO_ORIGIN) return;
  if (event.source !== studio()?.contentWindow) return;
  const msg = event.data;
  if (!msg || typeof msg.type !== "string") return;
  if (!msg.type.startsWith("diamra:")) return;
  console.log(msg.type, msg);
});

Eight messages exist today. Most pages need one or two, but here is the full list so nothing surprises you. None of them carries the design or the customer's contact details. Those stay on your bench, where only you can see them.

This is the message you came for. When the customer taps Accept next to a price, Diamra saves the acceptance, emails you, and sends diamra:estimate_accepted to your page. It carries five fields. orderId is Diamra's id for the order behind this project. Store it with the sale. Do not build a bench link from it. Use benchUrl as sent. estimateId is the id of the quote the customer accepted. price is the amount the customer saw and said yes to, with your markup included, in your store currency, as a plain number rather than a formatted string. currency is that currency's three-letter code. benchUrl opens the project on your bench, where the estimate is headed Accepted by the customer with the price, the metal, and the time, next to the design and the customer's contact details. It works only for someone signed in to your bench.

const STUDIO_ORIGIN = "https://yourstore.diamra.com";
const studio = () => document.querySelector("[data-diamra-store] iframe");

window.addEventListener("message", (event) => {
  if (event.origin !== STUDIO_ORIGIN) return;
  if (event.source !== studio()?.contentWindow) return;
  const msg = event.data;
  if (msg?.type !== "diamra:estimate_accepted") return;

  // msg.orderId    -> Diamra's id for the order, keep it with the sale
  // msg.estimateId -> the quote the customer accepted
  // msg.price      -> the accepted amount, a plain number such as 2450
  // msg.currency   -> its three-letter code, such as "USD" or "AUD"
  // msg.benchUrl   -> opens the project on your bench (bench sign-in needed)

  // Replace this with your own call. Here the page tells your server,
  // which holds the POS key and creates the sale.
  fetch("/diamra/accepted", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(msg),
  });
});

Diamra does not connect to one specific POS, on purpose. Square, Lightspeed, Shopify POS, and the jewelry-specific systems all take orders differently, and your shop may already have a backend that talks to yours. The fetch call above is where you plug that in. Two patterns work well. Both are below. Whichever you pick, keep your POS keys off the page. A web page is public, and anyone can read its source.

Open the page that frames the studio, open the browser console, and paste the snippet below. It prints every studio message except the resize stream, which would bury the rest. Then walk through the studio as a customer would. Sign in, generate a design, open a project, accept a price. Each step should print a line.

window.addEventListener("message", (e) => {
  const t = e.data?.type;
  if (t?.startsWith("diamra:") && t !== "diamra:resize") console.log(t, e.data);
});

Messages also travel the other way. Your page can post three commands to the studio. diamra:sign_out signs the customer out, which is handy on a shared counter tablet once the sale is closed. diamra:navigate moves the studio to a path such as /salon/projects. diamra:hello tells the studio your page's address when a strict referrer policy hides it. Without that address the studio holds its messages back, including diamra:ready. So if diamra:ready never arrives, send diamra:hello once your page has loaded and repeat it every second until diamra:ready shows up, then stop. On a normal https page you will not need it. Post each command to the iframe's contentWindow with your store address as the target.

const STUDIO_ORIGIN = "https://yourstore.diamra.com";
const studio = () => document.querySelector("[data-diamra-store] iframe");

studio().contentWindow.postMessage({ type: "diamra:sign_out" }, STUDIO_ORIGIN);