Widget:Ppplanner05

 <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 801px; height: 406px;">

<script> document.addEventListener('DOMContentLoaded', function () {

 let iframeAdded = false;
 const container = document.getElementById('container');
 const runImage = document.getElementById('runImage');

 function showIframe() {
   // Hide the initial image and interact button
   runImage.style.display = 'none';
   if (interactButton) {
     interactButton.style.display = 'none';
   }

   if (!iframeAdded) {
     // Create and configure the iframe
     const iframe = document.createElement('iframe');
     iframe.src = 'https://acp.analytica.com/view0?invite=4711&code=3885603542485212689';
     iframe.style.width = '801px';
     iframe.style.height = '406px';
     iframe.style.border = 'none';

     // Append the iframe to the container
     container.appendChild(iframe);
     iframeAdded = true;

     // Create maximize button with icon
     const maximizeButton = document.createElement('button');
     maximizeButton.style.position = 'absolute';
     maximizeButton.style.bottom = '10px';
     maximizeButton.style.right = '100px';
     maximizeButton.style.width = '30px';
     maximizeButton.style.height = '30px';
     maximizeButton.style.backgroundImage = 'url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png")';
     maximizeButton.style.backgroundSize = 'contain';
     maximizeButton.style.backgroundRepeat = 'no-repeat';
     maximizeButton.style.backgroundColor = 'transparent';
     maximizeButton.style.border = 'none';
     maximizeButton.style.cursor = 'pointer';
     maximizeButton.title = 'Click to use full screen';

     // Add hover effect for maximize button
     maximizeButton.addEventListener('mouseover', function () {
       maximizeButton.style.fontWeight = 'bold';
       maximizeButton.style.fontSize = '16px';
     });
     maximizeButton.addEventListener('mouseout', function () {
       maximizeButton.style.fontWeight = ;
       maximizeButton.style.fontSize = ;
     });

     // Create minimize button with icon, initially hidden
     const minimizeButton = document.createElement('button');
     minimizeButton.style.position = 'absolute';
     minimizeButton.style.bottom = '8px';
     minimizeButton.style.right = '120px';
     minimizeButton.style.width = '30px';
     minimizeButton.style.height = '30px';
     minimizeButton.style.backgroundImage = 'url("https://docs.analytica.com/images/8/82/Arrows-minimize.png")';
     minimizeButton.style.backgroundSize = 'contain';
     minimizeButton.style.backgroundRepeat = 'no-repeat';
     minimizeButton.style.backgroundColor = 'transparent';
     minimizeButton.style.border = 'none';
     minimizeButton.style.cursor = 'pointer';
     minimizeButton.title = 'Exit full screen';
     minimizeButton.style.display = 'none';

     // Add hover effect for minimize button
     minimizeButton.addEventListener('mouseover', function () {
       minimizeButton.style.fontWeight = 'bold';
       minimizeButton.style.fontSize = '20px';
     });
     minimizeButton.addEventListener('mouseout', function () {
       minimizeButton.style.fontWeight = ;
       minimizeButton.style.fontSize = ;
     });

     // Add click event for maximize button to enter fullscreen mode
     maximizeButton.addEventListener('click', function () {
       if (container.requestFullscreen) {
         container.requestFullscreen();
       } else if (container.webkitRequestFullscreen) { /* Safari */
         container.webkitRequestFullscreen();
       } else if (container.msRequestFullscreen) { /* IE11 */
         container.msRequestFullscreen();
       }

       // Adjust iframe to fill the container
       iframe.style.width = '100%';
       iframe.style.height = '100%';

       maximizeButton.style.display = 'none';
       minimizeButton.style.display = 'inline-block';
     });

     // Add click event for minimize button to exit fullscreen mode
     minimizeButton.addEventListener('click', function () {
       if (document.exitFullscreen) {
         document.exitFullscreen();
       } else if (document.webkitExitFullscreen) { /* Safari */
         document.webkitExitFullscreen();
       } else if (document.msExitFullscreen) { /* IE11 */
         document.msExitFullscreen();
       }

       // Restore iframe dimensions when exiting fullscreen
       iframe.style.width = '801px';
       iframe.style.height = '406px';

       minimizeButton.style.display = 'none';
       maximizeButton.style.display = 'inline-block';
     });

     // Append buttons to the container
     container.appendChild(maximizeButton);
     container.appendChild(minimizeButton);
   }
 }

 // Create the "Click to interact" button with updated styling
 const interactButton = document.createElement('button');
 interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";
 interactButton.style.position = 'absolute';
 interactButton.style.bottom = '7px';
 interactButton.style.right = '90px';
 interactButton.style.padding = '5px 10px';
 interactButton.style.fontSize = '16px'; // Font size 16px
 interactButton.style.fontWeight = 'bold'; // Bold text
 interactButton.style.backgroundColor = '#d3d3d3'; 
 interactButton.style.color = 'black'; 
 interactButton.style.border = 'none';
 interactButton.style.borderRadius = '5px';
 interactButton.style.cursor = 'pointer';
 interactButton.style.opacity = '0.9';

 // Add click event to interact button to display the iframe and hide button
 interactButton.addEventListener('click', function (event) {
   event.stopPropagation(); // Prevent the event from bubbling to the container
   showIframe();
 });

 // Append the interact button to the container
 container.appendChild(interactButton);

 // Add click event listener to the image container
 container.addEventListener('click', showIframe);

}); </script>