Danamon Enhancement WEB Development Guide - Hold and Resume

Hold and Resume for Web Frontend

When the agent puts the call on hold from the agent desktop, the ECV room can notify the parent frontend application with browser postMessage events.

This flow does not require a mobile SDK. It is enabled by opening the ECV room with version=2.

1. Previous Flow

Without version=2, the ECV room keeps the old behavior.

Agent action	Room behavior
Hold	ECV shows its internal waiting video
Resume	ECV hides the waiting video and returns to the call
Parent message	Not sent

This is the default behavior when version is not sent.

version missing => version 1 behavior

2. New Behavior with version=2

When the room is opened with version=2, ECV does not show the internal waiting video during hold. Instead, it sends hold/resume events to the parent window.

Agent action	Parent message
Agent puts call on hold	HoldStart
Agent resumes call	HoldEnd

3. Open the Room with version=2

The room URL must include version=2.

https://your-ecv-service/r/{roomId}?user={user}&site=2&im=true&device=Int&version=2

Example:

var roomUrl = "https://your-ecv-service/r/"
  + encodeURIComponent(roomId)
  + "?user=" + encodeURIComponent(customerName)
  + "&site=2&im=true&device=Int&version=2";

4. Use iframe to Receive Parent Messages

The hold/resume message is sent to window.parent. Therefore, the frontend application should open the ECV room inside an iframe if it needs to receive hold events.

<iframe
  id="ecvRoom"
  src="https://your-ecv-service/r/{roomId}?user={user}&site=2&im=true&device=Int&version=2">
</iframe>

If the room is opened with direct redirect, the external frontend application is replaced by the ECV room page, so there is no parent application left to receive the message.

5. Listen for Hold and Resume

window.addEventListener("message", function (event) {
  if (event.data === "HoldStart") {
    showHoldOverlay();
  }

  if (event.data === "HoldEnd") {
    hideHoldOverlay();
  }
});

6. Example Hold Overlay

<div id="holdOverlay" hidden>Please wait</div>

#holdOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

function showHoldOverlay() {
  document.getElementById("holdOverlay").hidden = false;
}

function hideHoldOverlay() {
  document.getElementById("holdOverlay").hidden = true;
}

7. Things to Get Right

Use version=2.

Without it, the old internal waiting video behavior remains active and no parent postMessage event is sent.

Use iframe when the parent app needs the event.

The hold/resume message is sent to window.parent. If the room is opened with direct redirect, the parent frontend application will not receive the event.

Do not show the old waiting video for version 2 hold.

With version=2, hold/resume is controlled by the frontend application. The ECV room only sends HoldStart and HoldEnd messages.

8. Troubleshooting

Symptom	Cause	Fix
Hold messages are not received	Room URL does not include version=2	Add &version=2 to the /r URL
Hold messages are still not received	Room is opened by direct redirect	Open the room inside an iframe and listen for message events
Old waiting video appears on hold	Room is running as version 1	Use version=2
Overlay does not disappear	HoldEnd is not handled by the frontend	Handle HoldEnd and hide the overlay