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
-
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/[email protected]/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