I am raw html block.
Click edit button to change this html
(function () {
// Toggle form visibility
var formVisible = false;
// Create the form container
var formContainer = document.createElement('div');
formContainer.style.position = 'fixed';
formContainer.style.top = '50%'; // Default top position
formContainer.style.right = '-400px'; // Initially off-screen
formContainer.style.maxHeight = '600px'; // Maximum height
formContainer.style.height = '100%'; // Default height
formContainer.style.backgroundColor = '#fff';
formContainer.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
formContainer.style.transition = 'right 0.3s ease-in-out';
formContainer.style.zIndex = '9998';
document.body.appendChild(formContainer);
// Create a fixed button element
var button = document.createElement('button');
button.innerText = 'X';
button.style.position = 'fixed';
button.style.bottom = '20px';
button.style.right = '20px';
button.style.zIndex = '9999';
button.style.opacity = 0;
formContainer.appendChild(button);
// Toggle form sliding effect
button.addEventListener('click', function () {
if (!formVisible) {
openForm();
} else {
closeForm();
}
});
// Create close button inside the form container with specified styling
var closeButton = document.createElement('button');
closeButton.style.position = 'absolute';
closeButton.style.top = '50%';
closeButton.style.left = '-50px';
closeButton.style.zIndex = '9999';
closeButton.style.border = 'none';
closeButton.style.background = '#000';
closeButton.style.cursor = 'pointer';
closeButton.style.height = '78px';
closeButton.style.width = '50px';
closeButton.style.padding = '6px 6px 6px 6px';
closeButton.style.borderRadius = '16px 0 0 16px';
formContainer.appendChild(closeButton);
// Create the image element
var img = document.createElement('img');
img.src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9IjM4LjUiCiAgIGhlaWdodD0iNzcuMTE1NDc5IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcyNiIKICAgc29kaXBvZGk6ZG9jbmFtZT0icG9rX2xvZ28uc3ZnIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjAuMSAoM2JjMmU4MTNmNSwgMjAyMC0wOS0wNykiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTMyIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzAiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxNTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc4NSIKICAgICBpZD0ibmFtZWR2aWV3MjgiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjQuNTU0NDY1NSIKICAgICBpbmtzY2FwZTpjeD0iNzUuMDAwNzA1IgogICAgIGlua3NjYXBlOmN5PSI1NC45MDgyMjQiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjE5MjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmcyNiIKICAgICBmaXQtbWFyZ2luLXRvcD0iMCIKICAgICBmaXQtbWFyZ2luLWxlZnQ9IjAiCiAgICAgZml0LW1hcmdpbi1yaWdodD0iMCIKICAgICBmaXQtbWFyZ2luLWJvdHRvbT0iMCIgLz4KICA8cGF0aAogICAgIGZpbGw9IiNmZmYiCiAgICAgZD0iTSA3LjUsNTMuMTgzOTE5IEggMzggcSAwLjUsMCAwLjUsMC41IHYgNi42NSBxIDAsMC42NSAtMC42NSwwLjY1IGwgLTEwLjU1LC0wLjE2IGEgMC40MywwLjQzIDAgMCAwIC0wLjIzLDAuOCBsIDEwLjg4LDYuNzggcSAwLjU1LDAuMzUgMC41NSwwLjk5IHYgNy4yMSBxIDAsMC43OSAtMC42NywwLjM2IGwgLTE0LjAzLC05LjAzIHEgLTAuNTIsLTAuMzMgLTEuMDUsLTAuMDMgbCAtMTUuNTUsOC45MyBxIC0wLjY3LDAuMzkgLTAuNjgsLTAuMzggbCAtMC4wNywtNy40NyBxIC0wLjAxLC0wLjU1IDAuNDYsLTAuODQgbCAxMC4wNiwtNi4zNCBxIDEuNDYsLTAuOTIgLTAuMjYsLTAuOTEgbCAtMTYuMDY5OTk5OTYsMC4wNiBRIDEuNjg3NjcyNmUtOCw2MC45NTM5MTkgMS42ODc2NzI2ZS04LDYwLjMyMzkxOSBWIDE0LjgxMzkyIEEgMC40MiwwLjQyIDAgMCAxIDAuNDMwMDAwMDIsMTQuMzkzOTIgTCA5LjA0LDE0LjU2MzkyIGEgMC45NywwLjk3IDAgMCAwIDAuOTgsLTEuMDUgcSAtMC44MSwtOS4xOSA2LjcsLTEyLjMzMDAwMDYgQyAyMC4wMSwtMC4xOTYwODA2MyAyNy45MiwtMC40NzYwODA2MyAzMS40NiwwLjkxMzkxOTM3IDM5LjY5LDQuMTUzOTIgMzguNSwxNC4xNzM5MiAzOC4xNCwyMi42NjM5MiBxIC0wLjAyLDAuNTMgLTAuNTUsMC41MyBsIC0zMC4xMSwtMC4wNCBxIC0wLjQ4LDAgLTAuNDgsMC40OSB2IDI5LjAzOTk5OSBxIDAsMC41IDAuNSwwLjUgeiBtIDEwLjcyLC0zOC4zOTk5OTkgMTIuNzQsLTAuMiBhIDAuNjIsMC42MiAwIDAgMCAwLjYxLC0wLjYzIGwgLTAuMDQsLTIuMjkgYSA1LjUzLDYuNzUgODkuMSAwIDAgLTYuODQsLTUuNDIgaCAtMC40OCBhIDUuNTMsNi43NSA4OS4xIDAgMCAtNi42Niw1LjY0IGwgMC4wNCwyLjI5IGEgMC42MiwwLjYyIDAgMCAwIDAuNjMsMC42MSB6IgogICAgIGlkPSJwYXRoMjIiIC8+CiAgPHBhdGgKICAgICBmaWxsPSIjZmZmIgogICAgIGQ9Im0gMzYuODk4NDE2LDM4LjkyMDUzNSBhIDEwLjkzLDEwLjkzIDAgMCAxIC0xMC44OTIsMTAuOTY4IGwgLTUuOTYsMC4wMiBhIDEwLjkzLDEwLjkzIDAgMCAxIC0xMC45NjgsLTEwLjg5IGwgLTAuMDA3LC0xLjk0IGEgMTAuOTMsMTAuOTMgMCAwIDEgMTAuODkzLC0xMC45NyBsIDUuOTYsLTAuMDIgYSAxMC45MywxMC45MyAwIDAgMSAxMC45NjcsMTAuODkxIHogbSAtNS45OTMsLTAuODkxIGEgNy45Miw0Ljk4IDAgMCAwIC03LjkyLC00Ljk4IDcuOTIsNC45OCAwIDAgMCAtNy45Miw0Ljk4IDcuOTIsNC45OCAwIDAgMCA3LjkyLDQuOTggNy45Miw0Ljk4IDAgMCAwIDcuOTIsLTQuOTggeiIKICAgICBpZD0icGF0aDI0IiAvPgo8L3N2Zz4K"; // Add the base64 encoded SVG data
img.style.height = '100%';
closeButton.appendChild(img);
// Retrieve the UUID from the script URL
var scriptURL = document.currentScript.src;
var urlParams = new URLSearchParams(scriptURL.split('?')[1]);
var uuid = urlParams.get('uuid');
// Create the form element inside the container
var formElement = document.createElement('iframe');
formElement.src = 'https://zen-lovelace.217-182-77-2.plesk.page/form/' + uuid;
formElement.style.width = '100%';
formElement.style.height = '100%';
formElement.style.border = 'none';
formContainer.appendChild(formElement);
// Function to open the form
function openForm() {
formContainer.style.right = '0';
formVisible = true;
// Check screen width and adjust form width if necessary
if (window.innerWidth < 600) {
formContainer.style.width = '100%';
}
}
// Function to close the form
function closeForm() {
formContainer.style.right = '-400px';
formContainer.style.width = '400px'; // Reset width
formVisible = false;
}
// Close the form when the close button is clicked
// Toggle form sliding effect
closeButton.addEventListener('click', function () {
if (!formVisible) {
openForm();
} else {
closeForm();
}
});
widthAdjust();
heightAdjust();
// Adjust form width when the window is resized
window.addEventListener('resize', function () {
widthAdjust();
heightAdjust();
});
function heightAdjust() {
if (formVisible) {
if (window.innerHeight < 800) {
formContainer.style.top = '0';
formContainer.style.height = '100%';
formContainer.style.transform = 'translateY(0%)';
} else {
formContainer.style.top = '50%';
formContainer.style.height = '500px';
formContainer.style.transform = 'translateY(-50%)';
}
}
}
function widthAdjust() {
if (formVisible && window.innerWidth < 600) {
formContainer.style.width = '100%';
formContainer.style.height = '100%';
formContainer.style.transform = 'translateY(0%)';
button.style.opacity = 1;
} else {
formContainer.style.width = '400px';
formContainer.style.height = '600px';
formContainer.style.transform = 'translateY(-50%)';
button.style.opacity = 0;
}
}
})();
