Skip to content
ESEN

Events (Relay)

React in the browser when your clients interact with the quote.

The Message Bridge

The Cord Elements iframe is designed to never isolate your website from what happens inside it. Using a bidirectional bridge via window.postMessage, Cord “relays” card events directly to your parent window environment.

This is incredibly powerful for triggering analytics pixels (like Meta Pixel or Google Analytics), launching confetti animations when a proposal is approved, or redirecting the user to a “Thank You” page after a successful payment.

Listening to Events

You can listen to events natively by attaching an addEventListener to the DOM node of the embedded element:

const container = document.querySelector('[data-cord-token]');

container.addEventListener('cord:approved', (event) => {
  console.log('The quote was approved!');
  console.log('Approved by:', event.detail.signed_by);
});

Events Dictionary

All events have the cord: prefix to avoid naming collisions with other libraries. Every event’s detail always includes token (the quote’s public token) and folio (e.g. "COT-0148"), in addition to the event-specific fields listed below.

Component lifecycle

  • cord:ready: Fired at the exact moment the SDK finishes rendering content, calculating final height, and loading fonts.
  • cord:resize: Emitted continuously every time the iframe height changes (useful only if you write your own container and don’t use embed.js).
  • cord:viewed: Fired together with cord:ready, as soon as the quote finishes rendering inside the iframe — it’s the signal that the content is now visible to your host page. The official database record of the client viewing the quote runs through a separate internal mechanism that requires the tab to actually be visible (so the seller previewing their own link never counts as a “view”); don’t assume the two happen at the same instant.

Commercial interaction

  • cord:approved: Emitted the instant the user approves the terms of the commercial proposal. Returns useful data in the detail such as the validation hash and who signed (signed_by).
  • cord:signed: Fired at the SAME instant as cord:approved, with the same detail (signed_by, hash) — in Cord, approving and signing are a single client action, not two separate steps in time. Listen to whichever is more semantically clear for your code; don’t expect one to arrive “after” the other.
  • cord:pay: Emitted when the user clicks the button to start their online payment flow (card, bank transfer, or the other methods the business has enabled). The detail carries the absolute url of the payment page. Cord already opens it in its own window (payment never runs inside the iframe): don’t navigate your page to that URL, use it only for your analytics.
  • cord:rejected: Fired if the client explicitly marks the proposal as declined. The detail includes the comentario they left, if any.
  • cord:message: Triggered whenever the client leaves a general comment or counter-offer in the quote chat.
  • cord:item_comment: Fired when the user leaves a specific comment on an item (product line) of the quote, with the corresponding item_id in the detail.

State

  • cord:updated: The quote changed while it was open (the seller edited lines, amounts or terms). The quote has already redrawn itself; use it to refresh whatever your page shows around it.
  • cord:status_changed: The status changed (sent, viewed, approved, rejected, paid, expired…). The detail carries the new status (and saldo on the invoice).
  • cord:paid: Only on <cord-invoice>: the invoice was settled. The detail carries folio, moneda and saldo.

cord:ready also carries status, moneda and total, so your page can draw its own summary without another call.

Read-only mode

If your organization has no allowed domains in Settings › Embeddable quote builder, or the host page is not on that list, the quote renders read-only: it doesn’t offer approve, sign, pay or chat, and its button opens the quote’s public link in a new tab. In that mode events arrive without detail: a page that isn’t on your list doesn’t receive who signed, amounts or the payment URL.

Debug bar

With debug on, Elements draws a panel on your site with the iframe’s events, every API request with its request_id and configuration warnings (for example, appearance values Cord dropped).

<cord-quote token="a1b2c3d4e5f60718" debug></cord-quote>
<!-- or with embed.js -->
<div data-cord-token="a1b2c3d4e5f60718" data-cord-debug></div>

In React, <CordProvider debug>. The panel only shows with a pk_test_ key; with pk_live_ it is limited to a console warning. Without a key (Web Component or embed.js), it only shows on localhost or when the URL has ?cord_debug=1, so a forgotten attribute never shows it to your customers.