Invite via email doesn't work on Google Sites

[Max]

Hi again!

The thing is that Google Sites platform is built on iframes that’s why the Invite Via Email doesn’t work correctly.

To make it work, please use the code below in the Custom JS section on the Settings tab:

const SHARE_LINK = "https://4261f0250a2f46f3b5236328e2abc809.elf.site";

document.addEventListener("click", (event) => {
  const mail = event.target.closest(".eapp-events-calendar-share-email-button");
  
  if (mail) {
    event.preventDefault();
    event.stopPropagation();
    
    const decodedMail = decodeURIComponent(mail.href);
    const link = decodedMail.replace(/(Event Link:)[^#]*/g, `$1${SHARE_LINK}`);
    window.open(link, "_blank");
  }
});

Do not forget to replace the share link in the 1st line of the code with the share link of your widget.

Here is how you can get it:

Check it out and let me know if it worked

[MICHEL_A3A (MICHEL)]

Thank you Max
Could you please have a look to my js section, I received error message when I validate

[Max]

I guess you’ve copied the 1st line by mistake:

I’ve removed it and the code has been successfully validated

[MICHEL_A3A (MICHEL)]

Your are formidable
Thank you very much Max, it’s working perfectly now!
Maybe this information should be shared with all users og Google sites.
Michel

[Max]

Thank you so much for the feedback

Great idea, I’ve made this topic public so that other users could find this solution too!

[MICHEL_A3A (MICHEL)]

Max, is there a solution to get the event description fully opened in order to read all the text?
As you can see on the picture, when the event raises there is a “see more”. I would appreciate not having it and better to see the entire text.
Maybe another CSS code?

[Max]

Sure! This code should do the trick:

.global-styles, .eapp-events-calendar-read-more-button {
display: none;
}
.global-styles, .eapp-events-calendar-read-more-content {
max-height: none !important;
}
.global-styles, .eapp-events-calendar-read-more-content:after {
display: none !important;
}

Try it out and let me know how it worked

[MICHEL_A3A (MICHEL)]

Sorry to disturb you again.

Max, I think there is a little adjustment to do, the solution for inviting via email is working fine but the “copy link” not working. I think the link should be the same as the one inside “Invite by email”.
Can we have the same link in both buttons?
Thanks.
Michel

[MICHEL_A3A (MICHEL)]

Working fine “see more”
“Copy the link” close to “send via email” not working

[Max]

Your request is in the hands of our devs. I’ll update you tomorrow

[Max]

Thank you for waiting!

We’ve adjusted the code, so you should get the same link from Copy and Invite via Email buttons:

const SHARE_LINK = "https://4261f0250a2f46f3b5236328e2abc809.elf.site";

const mailBtnSelector = ".eapp-events-calendar-share-email-button";

document.addEventListener("click", (event) => {
  const mailLink = event.target?.closest(mailBtnSelector);
  const copyLink = event.target?.closest(".eapp-events-calendar-share-link-button");
  
  if (!mailLink && !copyLink) {
  	return;
  }
  
  event.preventDefault();
  event.stopPropagation();
  
  const mail = mailLink ?? copyLink.closest('.eapp-events-calendar-share-content')?.querySelector(mailBtnSelector);
  const decodedMail = decodeURIComponent(mail?.href || '');

  if (mailLink) {
    const link = decodedMail.replace(/(Event Link:)[^#]*/g, `$1${SHARE_LINK}`);
    window.open(link, "_blank");
    return;
  }

  if (copyLink) {
    const linkMatch = decodedMail.match(/Event Link:\s*(\S+)/);
    const eventLink = linkMatch ? linkMatch[1].replace(/[^#]*/, SHARE_LINK) : '';
    const copyLinkText = copyLink.querySelector('.eapp-events-calendar-share-link-copied');
    const COPIED_SHOW_SELECTOR = 'eapp-events-calendar-share-link-show';

    const tmp = document.createElement('textarea');
    tmp.value = eventLink;
    tmp.style.position = 'absolute';
    tmp.style.left = '-9999px';
    document.body.append(tmp);
    tmp.select();
    document.execCommand('copy');
    copyLinkText?.classList?.add(COPIED_SHOW_SELECTOR);
    setTimeout(() => copyLinkText?.classList?.remove(COPIED_SHOW_SELECTOR), 2000);
    tmp.remove();
  }
}, true);

Check your website and let me know if everything is fine now

[MICHEL_A3A (MICHEL)]

Hi Max,
Should I replace the other code by this one or to add this new code below?

[MICHEL_A3A (MICHEL)]

I have replaced it and it’s working perfectly now. Please congratulate the dev team for me.
Thank you again.
Michel

[Max]

Happy to hear that you are good now!

If anything else comes up, don’t hesitate to drop us a line. We’ll be happy to help