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 studio only sends messages to the page that frames it. On a direct visit there is no page to talk to, so nothing is sent.

This is the message you came for. When the customer taps Continue on a price, Diamra saves the acceptance, emails you, and sends diamra:estimate.accepted to your page. It carries the price the customer said yes to, with your markup, in your store currency, as a plain number. It also carries the project's id, a link to the project on your bench, the design's picture, the customer and the piece. Set STUDIO_ORIGIN to your store's address with no path and no slash at the end, such as https://yourstore.diamra.com. A store in a group uses its full address with the two dashes, such as https://yourstore--group.diamra.com. The listener drops any message unless it comes from that address and from the studio's own iframe. Keep project_id with the sale, but don't build a bench link from it. Open bench_url as sent. It works only for someone signed in to your bench. The from field holds one word per piece detail, saying where that detail came from. If from.ring_size is default or guessed, confirm the size with the customer before the piece is made.

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.project_id  -> Diamra's id for the project, keep it with the sale
  // msg.estimate_id -> 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.bench_url   -> opens the project on your bench (bench sign-in needed)
  // msg.customer    -> { id, email, phone, first_name, name }
  // msg.metal, msg.center_stone, msg.ring_size and the rest describe the piece.
  // Every field is in the developer docs, under Messages from the studio.

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

The same messages can feed Klaviyo or any other email tool. Once the customer is signed in, the customer field carries their email and phone, which is how those tools find a person. Guests have no email, so keep your records under customer.id and add the email when one arrives. Three messages show how far someone got. project.started means a project started: they kept a design, or acted on one kept earlier. estimate.displayed means a price was on their screen. estimate.accepted means they tapped Continue. A customer with estimate.displayed but no estimate.accepted for the same project_id had a price on screen and stopped there, and that person needs a different email from one who never had a price on screen. Send the messages to your own server and let it call your email tool, so the tool's private key stays off the page.

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

// The messages that show how far a customer got.
const PROGRESS = [
  "diamra:project.started",
  "diamra:estimate.displayed",
  "diamra:estimate.accepted",
];

window.addEventListener("message", (event) => {
  if (event.origin !== STUDIO_ORIGIN) return;
  if (event.source !== studio()?.contentWindow) return;
  const msg = event.data;
  if (!PROGRESS.includes(msg?.type) || !msg.customer) return;

  // Your server finds the person by msg.customer.id or email
  // and records msg.type as an event, with msg.image_url for the email.
  fetch("/diamra/progress", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(msg),
  });
});

Open the page that frames the studio and walk through it as a customer would: sign in, generate a design, keep one, look at its price, tap Continue. Your page should hear each step. The developer docs have a console snippet that prints each message as it arrives, and what to check when nothing shows up.