<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PW2JFSWM"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>



 <script>
    // Dynamically add the Material Icons stylesheet
    const materialIconsLink = document.createElement('link');
    materialIconsLink.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
    materialIconsLink.rel = 'stylesheet';
    document.head.appendChild(materialIconsLink);

    // Dynamically add the Font Awesome stylesheet
    const fontAwesomeLink = document.createElement('link');
    fontAwesomeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css';
    fontAwesomeLink.rel = 'stylesheet';
    document.head.appendChild(fontAwesomeLink);

    // Dynamically add the JSFrame script
    const script = document.createElement('script');
    script.src = "https://riversun.github.io/jsframe/jsframe.js";
    script.onload = () => {
      // Execute the rest of the script once the JSFrame library is loaded
      let jsFrame;
      let chatFrame;
      let initialPosition = { left: 0, top: 0 }; // To store the initial position
      let initialSize = { width: 500, height: 600 }; // To store the initial size

      // Dynamically create the FAB button
      const fabButton = document.createElement('button');
      fabButton.id = 'fab';
      fabButton.innerHTML = '<span class="material-icons">auto_awesome</span>';

      // Apply the FAB styles directly using JavaScript
      fabButton.style.position = 'fixed';
      fabButton.style.bottom = '20px';
      fabButton.style.right = '20px';
      fabButton.style.width = '60px';
      fabButton.style.height = '60px';
      fabButton.style.backgroundColor = '#7C9640';
      fabButton.style.color = 'white';
      fabButton.style.border = 'none';
      fabButton.style.borderRadius = '50%';
      fabButton.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.3)';
      fabButton.style.fontSize = '24px';
      fabButton.style.display = 'flex';
      fabButton.style.alignItems = 'center';
      fabButton.style.justifyContent = 'center';
      fabButton.style.cursor = 'pointer';
      fabButton.style.zIndex = '1000';

      // Add the FAB button to the body
      document.body.appendChild(fabButton);

      // Preload the iframe in a hidden state
      jsFrame = new JSFrame();

      // Create the chat window but keep it hidden initially
      chatFrame = jsFrame.create({
        title: 'Chirrup website',
        left: window.innerWidth - 520, // Position it in the bottom right corner
        top: window.innerHeight - 620,
        width: 500,
        height: 600,
        movable: true,
        resizable: true,
        visible: false, // Keep the window hidden initially
        style: {
          backgroundColor: '#FFF',
          border: '1px solid #ddd',
          overflow: 'hidden',
          borderRadius: '10px',
          boxShadow: '0 2px 10px rgba(0, 0, 0, 0.3)',
        },
        appearanceName: 'material', // Use material theme
        appearanceParam: {
          titleBar: {
            background: '#7C9640',
            color: 'white',
            height: 30,
            fontSize: 16,
            buttonWidth: 24,
            buttonHeight: 24,
          },
          frame: {
            borderRadius: '10px',
          },
        }
      });

      // Store the initial position
      initialPosition = { left: chatFrame.getLeft(), top: chatFrame.getTop() };

      // Inject the iframe into the content area
      chatFrame.setHTML(`
        <iframe src="https://chirrup-chat.staging.d5669cca-6488-4e4d-b939-cea2cda99776.com" title="Chat Bot" allow="camera; microphone; fullscreen; payment" style="width: 100%; height: 100%; border: none;"></iframe>
      `);

      fabButton.addEventListener('click', function () {
        // Reset the position and size to the initial values
        chatFrame.setPosition(initialPosition.left, initialPosition.top);
        chatFrame.setSize(initialSize.width, initialSize.height);

        // Show the preloaded frame when FAB is clicked
        chatFrame.show();

        // Hide the FAB when the chat window is open
        fabButton.style.display = 'none';

        chatFrame.setControl({
          maximizeButton: 'maximizeButton',
          demaximizeButton: 'restoreButton',
          minimizeButton: 'minimizeButton',
          deminimizeButton: 'deminimizeButton',
          hideButton: 'closeButton',
          animation: true,
          animationDuration: 150,
        });

        // Handle the close button event using JSFrame's built-in event system
        chatFrame.on('closeButton', 'click', (_frame, evt) => {
          chatFrame.hide(); // Close the frame
          fabButton.style.display = 'flex'; // Show the FAB again
        });

        chatFrame.on('frame', 'move', (_frame, evt) => {
          // Calculate the window's boundaries
          const windowWidth = window.innerWidth;
          const windowHeight = window.innerHeight;
          const frameLeft = chatFrame.getLeft();
          const frameTop = chatFrame.getTop();
          const frameWidth = chatFrame.getWidth();
          const frameHeight = chatFrame.getHeight();

          // Prevent the frame from being dragged outside the browser window
          if (frameLeft < 0) chatFrame.setPosition(0, frameTop);
          if (frameTop < 0) chatFrame.setPosition(frameLeft, 0);
          if (frameLeft + frameWidth > windowWidth) chatFrame.setPosition(windowWidth - frameWidth, frameTop);
          if (frameTop + frameHeight > windowHeight) chatFrame.setPosition(frameLeft, windowHeight - frameHeight);
        });
      });

      // Optional: Update window position when resizing the browser
      window.addEventListener('resize', () => {
        if (chatFrame) {
          chatFrame.setPosition(
            window.innerWidth - chatFrame.getWidth() - 20,
            window.innerHeight - chatFrame.getHeight() - 20
          );
        }
      });
    };

    // Append the script to the document
    document.head.appendChild(script);
  </script>

Booking integration waitlist