Demo

Login

Try for free

Chirrup

video-demo

<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);
  
    // Function to detect if it's a mobile device
    function isMobileDevice() {
      return /Mobi|Android/i.test(navigator.userAgent);
    }
  
    // 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();

      // Find the main container JSFrame uses and apply high z-index
      const jsFrameContainer = document.querySelector('[id^="jsFrame"]');
      if (jsFrameContainer) {
        jsFrameContainer.style.zIndex = '9999';
      }
  
      // Adjust for mobile devices
      if (isMobileDevice()) {
        initialPosition = { left: 0, top: 0 };
        initialSize = { width: window.innerWidth, height: window.innerHeight };
      } else {
        initialPosition = { left: window.innerWidth - 520, top: window.innerHeight - 620 };
        initialSize = { width: 500, height: 600 };
      }
  
      // Create the chat window but keep it hidden initially
      chatFrame = jsFrame.create({
        title: 'Chirrup Help',
        left: initialPosition.left,
        top: initialPosition.top,
        width: initialSize.width,
        height: initialSize.height,
        movable: !isMobileDevice(), // Disable moving on mobile
        resizable: !isMobileDevice(), // Disable resizing on mobile
        visible: false, // Keep the window hidden initially
        style: {
          backgroundColor: '#FFF',
          border: '1px solid #ddd',
          overflow: 'hidden',
          borderRadius: isMobileDevice() ? '0' : '10px', // Remove border-radius on mobile
          boxShadow: isMobileDevice() ? 'none' : '0 2px 10px rgba(0, 0, 0, 0.3)', // No shadow on mobile
        },
        appearanceName: 'material', // Use material theme
        appearanceParam: {
          titleBar: {
            background: '#7C9640',
            color: 'white',
            height: 30,
            fontSize: 16,
            buttonWidth: 24,
            buttonHeight: 24,
            hideButton: 'closeButton'
          },
          frame: {
            borderRadius: isMobileDevice() ? '0px' : '10px', // No border-radius on mobile
          },
        }
      });
  
      // 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 () {
        // Adjust for mobile devices
        if (isMobileDevice()) {
          chatFrame.setSize(window.innerWidth, window.innerHeight);
          chatFrame.setPosition(0, 0);
        } else {
          // Reset the position and size to the initial values for non-mobile devices
          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';
        
      // Configure control buttons based on device type
      if (isMobileDevice()) {
        // Mobile: Only show close button
        chatFrame.setControl({
          hideButton: 'closeButton',
          animation: true,
          animationDuration: 150,
        });
        var maximizeButton = chatFrame.getFrameComponentElement('maximizeButton');
        maximizeButton.style.visibility = 'hidden';
        var maximizeButton = chatFrame.getFrameComponentElement('minimizeButton');
        maximizeButton.style.visibility = 'hidden';
      } else {
        // Desktop: Include minimize, maximize, and close buttons
        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
        });
  
        if (!isMobileDevice()) {
          chatFrame.on('frame', 'move', (_frame, evt) => {
            // Calculate the window's boundaries for non-mobile devices
            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 && isMobileDevice()) {
          chatFrame.setSize(window.innerWidth, window.innerHeight);
          chatFrame.setPosition(0, 0);
        }
      });
    };
  
    // Append the script to the document
    document.head.appendChild(script);
  </script>

Quick demo

See a few features our users love (4 min)

Schedule a 1-on-1 session today!