Replies: 1 comment
-
Edit your code, it's unreadable. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi, just to check is there any reason why this code would not send the emails? Thanks for your time.
`<script src="https://cdn.jsdelivr.net/npm/emailjs-com@2.6.4/dist/email.min.js"></script>
<script> (function(){ emailjs.init("z2_fZZX2b11g_fSMTo7UG"); // Replace with your EmailJS user ID })(); function createFloatingContactElement() { // Create main container const contactElement = document.createElement('div'); contactElement.id = 'floating-contact'; // Initial content const contactContent = document.createElement('div'); contactContent.className = 'contact-content'; // Image container const imageContainer = document.createElement('div'); imageContainer.className = 'contact-image'; const image = document.createElement('img'); // Image sources to randomize between (9 images) const images = [ 'https://images.squarespace-cdn.com/content/65e1a74015e40b4188d98ed6/d2dc2a61-8203-40f5-a2f4-ba5cb24dbb56/advisor_new.png?content-type=image%2Fpng', // Original image 'https://images.squarespace-cdn.com/content/65e1a74015e40b4188d98ed6/5bd0336a-6bc7-409d-8d4f-78c979017150/advisor_2.png?content-type=image%2Fpng', // Second image 'https://images.squarespace-cdn.com/content/65e1a74015e40b4188d98ed6/de67cb39-c6d4-4ef3-be54-65b5e3eab60c/advisor_3.png?content-type=image%2Fpng', // Third image 'https://images.squarespace-cdn.com/content/65e1a74015e40b4188d98ed6/59a9aa70-563c-4bd9-8404-8b3755389592/advisor_4.png?content-type=image%2Fpng', // Fourth image 'https://images.squarespace-cdn.com/content/65e1a74015e40b4188d98ed6/05dd8115-8b4d-4929-b19c-c442d36355ea/advisor_5.png?content-type=image%2Fpng', // Fifth image 'https://images.squarespace-cdn.com/content/65e1a74015e40b4188d98ed6/3c1e3de0-6b2b-42f3-ae6e-0b5f805a1461/advisor_6.png?content-type=image%2Fpng', // Sixth image 'https://images.squarespace-cdn.com/content/65e1a74015e40b4188d98ed6/4935ba44-824c-4311-8d6d-6423a3a0e8cd/advisor_7.png?content-type=image%2Fpng', // Seventh image 'https://images.squarespace-cdn.com/content/65e1a74015e40b4188d98ed6/3212646f-b6f9-4652-9b48-f29721254d72/advisor_8.png?content-type=image%2Fpng', // eight image 'https://images.squarespace-cdn.com/content/65e1a74015e40b4188d98ed6/a6b199f6-a65b-4fc2-98af-1457ac458fcf/advisor_9.png?content-type=image%2Fpng' , // nine image ]; // Randomly select an image image.src = images[Math.floor(Math.random() * images.length)]; image.alt = 'Contact Image'; imageContainer.appendChild(image); // Text content const textContainer = document.createElement('div'); textContainer.className = 'contact-text'; const paragraph = document.createElement('p'); paragraph.className = 'contact-question'; paragraph.textContent = 'Need Help Planning your Tour?'; const phoneNumber = document.createElement('p'); phoneNumber.className = 'contact-number'; phoneNumber.textContent = '0330 010 3757'; textContainer.appendChild(paragraph); textContainer.appendChild(phoneNumber); // Expandable content with scroll const expandContent = document.createElement('div'); expandContent.className = 'expand-content hidden'; expandContent.style.maxHeight = '150px'; // Set a max height for scrolling expandContent.style.overflowY = 'auto'; // Enable vertical scrolling const bulletPoints = document.createElement('ul'); // Example bullet points const points = ['Expert Advice', 'Planning Group Packages', '24 Hour Customer Support']; points.forEach(point => { const listItem = document.createElement('li'); listItem.innerHTML = `check_circle ${point}`; bulletPoints.appendChild(listItem); }); expandContent.appendChild(bulletPoints); // Add space between bullet points and the button bulletPoints.style.marginBottom = '20px'; // Increased margin for more space // Add Request Callback button const callbackButton = document.createElement('button'); callbackButton.textContent = 'Request Callback'; callbackButton.style.backgroundColor = '#5c7c93'; callbackButton.style.color = '#fff'; callbackButton.style.border = 'none'; callbackButton.style.padding = '8px 16px'; callbackButton.style.cursor = 'pointer'; callbackButton.style.borderRadius = '5px'; callbackButton.style.display = 'block'; callbackButton.style.margin = '10px 0'; callbackButton.className = 'callback-button hidden'; // Initially hidden expandContent.appendChild(callbackButton); // Append to expanded content // Form container (hidden initially) const formContainer = document.createElement('div'); formContainer.className = 'form-container hidden'; formContainer.innerHTML = ` Name:Preferred Date:
Preferred Callback Time: ${generateTimeOptions()}
Submit `; expandContent.appendChild(formContainer); // Append form below the button // Form submission functionality with EmailJS formContainer.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); const name = event.target.name.value; const date = event.target.date.value; const time = event.target.time.value; // Send the email using EmailJS emailjs.send("service_x2stp0k", "template_cmytp87", { name: name, date: date, time: time, }).then(() => { alert(`Request sent for ${name} on ${date} at ${time}`); formContainer.classList.add('hidden'); // Hide the form after submission }).catch((error) => { console.error('Error sending email:', error); alert('Failed to send request. Please try again later.'); }); }); // Show form when callback button is clicked callbackButton.addEventListener('click', (event) => { event.stopPropagation(); formContainer.classList.toggle('hidden'); // Show/hide the form on click }); // Close icon const closeButton = document.createElement('div'); closeButton.className = 'close-button'; closeButton.textContent = '+'; // Initially set as '+' // Append everything contactContent.appendChild(imageContainer); contactContent.appendChild(textContainer); contactElement.appendChild(contactContent); contactElement.appendChild(expandContent); contactElement.appendChild(closeButton); document.body.appendChild(contactElement); let isExpanded = false; // Track expansion state // Click to expand/collapse contactContent.addEventListener('click', () => { if (!isExpanded) { // Expand expandContent.classList.remove('hidden'); contactElement.style.maxHeight = '300px'; // Expand size expandContent.style.display = 'block'; closeButton.textContent = 'x'; // Change to "x" when expanded callbackButton.classList.remove('hidden'); // Show the Request Callback button when expanded isExpanded = true; } else { // Collapse expandContent.classList.add('hidden'); callbackButton.classList.add('hidden'); // Hide the Request Callback button when collapsed closeButton.textContent = '+'; // Change back to '+' isExpanded = false; } }); // Click outside to close document.addEventListener('click', (event) => { if (!contactElement.contains(event.target)) { if (isExpanded) { // Hide the contact element if clicked outside and it is expanded contactElement.style.display = 'none'; // Completely hide isExpanded = false; } } }); // Show contact element when scrolled to specific block on mobile const targetBlock = document.querySelector('section[data-section-id="66d26e7b424a0469652e0481"]'); window.addEventListener('scroll', () => { const blockPosition = targetBlock.getBoundingClientRect().top; const windowHeight = window.innerHeight; // Check if on mobile const isMobile = window.innerWidth <= 600; if (isMobile) { // Show the contact element at the start of the specific section if (blockPosition < windowHeight && blockPosition > 0) { contactElement.style.opacity = '1'; // Show on scroll to the specific block } else { contactElement.style.opacity = '0'; // Hide until scroll reaches the block } } }); // Initialize mobile visibility window.addEventListener('resize', () => { const isMobile = window.innerWidth <= 600; if (isMobile) { const blockPosition = targetBlock.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (blockPosition < windowHeight && blockPosition > 0) { contactElement.style.opacity = '1'; } else { contactElement.style.opacity = '0'; } } }); } // Function to generate 15-minute time slot options function generateTimeOptions() { let options = ''; for (let hour = 0; hour < 24; hour++) { for (let minutes = 0; minutes < 60; minutes += 15) { const timeValue = `${String(hour).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`; options += `${timeValue}`; } } return options; } // Load Material Icons const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://fonts.googleapis.com/icon?family=Material+Icons'; document.head.appendChild(link); window.addEventListener('DOMContentLoaded', createFloatingContactElement); </script>`
Beta Was this translation helpful? Give feedback.
All reactions