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 or SPEI, depending on what the business has enabled). The detail carries the url the client will be redirected to.
  • 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.