Calendar Integration

[kyanaloe]

I’m working on ways to automatically send someone a calendar invite when they push a button in my app. Before I go too far down the rabbit hole, just wondering if anyone’s already accomplished this, or if it’s on the @weweb-team roadmap?

[Edward]

Can you elaborate on this a bit further? What is the expected behaviour when someone clicks on a button in your site? Are you looking to generate a .ics file that users will download automatically when click the button on your page? They can then add the .ics file to their calendar? Or something else?

[kyanaloe]

Thanks for asking, @Edward. I would like for the user to receive an invite via email. So that could happen in a number of ways.

[Edward]

Google calendar seems ok. In any case, I would do an api call for a calendar service on button click.

Create Events  |  Calendar API  |  Google Developers

Or Calendly (paid) or similar services.

[dorilama]

There are also many libraries that generate iCalendar files and calendar links for popular providers (google, yahoo, outlook) you can integrate them into formulas to generate link/file to send with email. The user then will add the event to the calendar clicking on the link or opening the .ics file.

You can test this approach adding a very basic formula to create a .ics file.

• Create a formula with this options:
  
• add this code:

 * Hash function from https://github.com/darkskyapp/string-hash
 */
function hash(str) {
  let hash = 5381,
    i = str.length;

  while (i) hash = (hash * 33) ^ str.charCodeAt(--i);

  return "_" + (hash >>> 0).toString(36);
}

function handleDate(date) {
  return date.toISOString().replace(/[-:]|(\.\d\d\d)/g, "");
}

const startString = handleDate(start);
const endString = handleDate(end);
const createdString = handleDate(new Date());
const id = `${hash(startString)}-${hash(endString)}-${hash(
  createdString
)}-${hash(summary)}`;

return `BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//serafini.studio//ICAL example//EN
CALSCALE:GREGORIAN
METHOD:PUBLISH
BEGIN:VEVENT
SUMMARY:${summary}
UID:${id}
SEQUENCE:0
STATUS:CONFIRMED
TRANSP:OPAQUE
DTSTART:${startString}
DTEND:${endString}
DTSTAMP:${createdString}
DESCRIPTION:${description}
END:VEVENT
END:VCALENDAR`;

• use the formula like this:
  

Hope this is helpful

[Joyce]

@kyanaloe

if it’s on the @weweb-team roadmap?

It isn’t at this stage but I’ve added your request to our user research file so the product team can take it into consideration

[kyanaloe]

@dorilama, I am hoping you can maybe help me complete this task!

I am using Cronofy to create Smart Invites, and need to send the invites via email. I am using Paubox for email since it is HITRUST/HIPAA compliant.

So far, I have been able to send an email with an ics attachment, but that attachment seems to only work with Outlook. The Cronofy docs recommend this for the attachments field:

I have figured out how to include the first object, but am stuck on the second. I’m wondering if this is the limiting factor in calendar compatibility.

Specifically, WeWeb does not recognize the Buffer.from function. I tried using btoa() instead, placing that in its own custom javascript step and passing the result into the attachment object, but that didn’t work either.

Any ideas?

[dorilama]

The Buffer class is part of nodejs API and so requires a nodejs backend. You are right to use btoa in the browser but you need to consider that each character in the string is treated as a byte of binary data and this can cause errors. Check mdn for a clear and good explaination. Maybe your problem is something related.

Are you getting an error from the encoding step or from the Paubox request (I guess you are using a rest api request in the workflow)? With an error from the console or the response from the api call it may be easier to understand what is happening.

Skimming through the Cronify docs I suppose you are already calling their API from a backend (otherwise you are exposing your api key to the public), so you could just send the email from the server. The example you quote (I think is this page) is in fact using nodemailer from a nodejs server.

[kyanaloe]

Thanks so much for your help, @dorilama!

Can you say more about what you mean by this:

“Skimming through the Cronify docs I suppose you are already calling their API from a backend (otherwise you are exposing your api key to the public)”

Are you saying that an Auth token sent in the Header of an API request as part of a WeWeb workflow will be exposed?

[dorilama]

My understanding is that weweb handles the frontend of your app and you can connect the backend you like, so an api request made in weweb is a request made from the frontend.
Depending on the service you are using and the workflow you are implementing you need to evaluate if a request can be made from the frontend or the backend.
For example the private key of stripe is meant to stay private and you should use it only in your backend, whereas the publishable key of stripe is safe to use in the frontend and can be bundled in your app.

[kyanaloe]

Thanks, @dorilama.

I could really use some clarity around this, @weweb-team. If I put an API key in the header of an API request, am I exposing it publicly? For example:

[Joyce]

@kyanaloe

If I put an API key in the header of an API request, am I exposing it publicly?

Yes, you are. It would be the same in any other frontend tool.

It is not a problem if:

• the key is meant to be public,
• you have taken steps to ensure unauthorized users can’t get data from the backend.

See this thread for more guidance on the topic.