<iframe
  src="https://orthogramic.com/embed/mindmap?id=YOUR_MAP_ID&token=YOUR_AUTH_TOKEN"
  width="100%"
  height="600px"
  style="border:none;"
  allowfullscreen>
</iframe>

<div id="mindmap-container"></div>

<script>
  const socket = new WebSocket("wss://orthogramic.com/ws/mindmap");

  socket.onopen = function() {
    socket.send(JSON.stringify({
      action: "subscribe",
      mindmapId: "12345",
      token: "abc123"
    }));
  };

  socket.onmessage = function(event) {
    const data = JSON.parse(event.data);
    if (data.update) {
      OrthogramicMindmap.render({
        container: "mindmap-container",
        mindmapId: data.mindmapId,
        token: "abc123",
        theme: "dark"
      });
    }
  };

  socket.onerror = function(error) {
    console.error("WebSocket Error: ", error);
  };

  socket.onclose = function() {
    console.log("WebSocket connection closed. Reconnecting...");
    setTimeout(() => {
      location.reload(); // Simple reconnection strategy
    }, 5000);
  };
</script>