Chatbox iframe lab

Một chỗ vào nhanh để test iframe chatbox và `postMessage`.

Trang này là cổng vào cho playground trong cùng app. Mở `playground` để thử 2 chế độ: nhúng trực tiếp bằng query string, hoặc điều khiển iframe bằng `postMessage` từ host page.

Mở playgroundXem iframe mẫu
1. Direct iframe
Nhúng đúng URL bạn gửi
2. Bridge mode
Gửi config qua `postMessage`
3. Event log
Theo dõi `CHATBOX_READY` và `CHATBOX_CLOSE`
Embed snippet

Chính là iframe bạn đã đưa, để copy nhanh và đối chiếu hành vi.

Vào playground
<iframe
  id="chatbox-widget-direct-iframe"
  src="/embed?view=panel&instanceId=9b6c52e4-9c09-4c12-876b-4cf1961df575&apiUrl=https%3A%2F%2Fapi.ai.seatek.vn&socketUrl=https%3A%2F%2Fapi.ai.seatek.vn&hostOrigin=https%3A%2F%2Fchatbox.noto.vn&locale=vi&position=bottom-right&color=%232563eb&chatboxName=Facebook+Smart+Assistant&avatar=%F0%9F%93%98&quickActions=%5B%22%F0%9F%93%9D+T%E1%BA%A1o+b%C3%A0i+vi%E1%BA%BFt+m%E1%BB%9Bi%22%2C%22%F0%9F%92%A1+G%E1%BB%A3i+%C3%BD+%C3%BD+t%C6%B0%E1%BB%9Fng+n%E1%BB%99i+dung%22%2C%22%F0%9F%8E%AF+Vi%E1%BA%BFt+n%E1%BB%99i+dung+qu%E1%BA%A3ng+c%C3%A1o%22%2C%22%F0%9F%93%88+T%C4%83ng+t%C6%B0%C6%A1ng+t%C3%A1c+b%C3%A0i+vi%E1%BA%BFt%22%5D&welcomeMessage=Xin+ch%C3%A0o%21+T%C3%B4i+l%C3%A0+Facebook+Smart+Assistant&widgetKey=wk_011d7890047a076215f69b3f7b96ee49&toolCatalogId=78c4773e-0504-4dae-b1e7-97c54c9b2950&toolCatalogVersion=1&toolCatalogHash=62b6039802305dbf321c63572117b3d3b9d56444581c804717c75e9da9dcb444"
  style="position:fixed;right:16px;bottom:16px;z-index:2147483647;width:56px;height:56px;border:none;border-radius:9999px;box-shadow:none;background:transparent;overflow:hidden;"
  frameborder="0"
  allow="microphone">
</iframe>
<script>
  window.addEventListener("message", function (event) {
    var iframe = document.getElementById("chatbox-widget-direct-iframe");
    if (!iframe) return;
    if (event.data && event.data.type === "CHATBOX_CLOSE") {
      iframe.style.width = "56px";
      iframe.style.height = "56px";
      iframe.style.maxHeight = "56px";
      iframe.style.boxShadow = "none";
      iframe.style.borderRadius = "9999px";
      iframe.style.overflow = "hidden";
      iframe.style.pointerEvents = "auto";
    }
    if (event.data && event.data.type === "CHATBOX_OPEN") {
      iframe.style.width = "min(432px,calc(100vw - 32px))";
      iframe.style.height = "min(720px,calc(100vh - 32px))";
      iframe.style.maxHeight = "calc(100vh - 32px)";
      iframe.style.boxShadow = "0 20px 50px rgba(0,0,0,0.15)";
      iframe.style.borderRadius = "16px";
      iframe.style.overflow = "hidden";
      iframe.style.pointerEvents = "auto";
    }
  });
</script>