(function() {
        var container = document.createElement('div');
        container.style.display = 'none'; // Nasconde il container finché non è pronto
        var shadowRoot = container.attachShadow({ mode: 'open' });

        var widgetHtml = `
          <div class="fixed bottom-4 right-4 bg-white rounded-lg shadow-lg w-72 overflow-hidden">
            <div class="bg-white p-3 border-b flex justify-between items-center">
              <div class="font-medium text-black">System Status</div>
              <div class="text-xs text-gray-500">Live</div>
            </div>
            <div class="p-4">
              <div class="space-y-3">
                
                  <div class="flex justify-between items-center">
                    <span class="text-sm text-black">WTRocket - Frontend</span>
                    <span class="flex items-center gap-2">
                      <span class="w-2 h-2 text-black bg-green-500 rounded-full"></span>
                      <span class="text-sm text-black text-green-600">114ms</span>
                    </span>
                  </div>
                
              </div>
            </div>
            <div class="bg-gray-50 p-2 text-center text-xs text-gray-500">
              <a href='https://pingmaster.app' >Powered by PingMaster</a>
            </div>
          </div>
        `;

        shadowRoot.innerHTML = `
          <style>
            @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');
            @import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');
            * {
                font-family: 'Kanit', sans-serif;
                font-style: normal;
            }
          </style>
          ${widgetHtml}
        `;

        document.body.appendChild(container);
        container.style.display = 'block'; // Mostra il widget una volta pronto
      })();