NEW PLUGIN... Send Beautiful Calnedar Invites

[SJL]

Beautiful Calendar Invites Plugin for Bubble, by SJL

Finally a plugin that properly renders meeting invites when sent from Bubble with SendGrid.

Instead of having an ICS file as an attachment, your email will now render with accept and decline buttons as if sent from any regular email client.

As an added bonus, your SendGrid template is used in both the in both the body of the email and the invite, so you stay on brand with your customers. And you can create, update and cancel events using the same plugin without having to understand any of the iCalendar specification.

I’ve tried to make the plugin as straightforward as possible, so you only need a basic understanding of how to use SendGrid templates and what a calendar invite is.

Your Step by Step Guide

Hit up SendGrid for an API Key and enter into the plugin page:

Drop Send Beautiful Calendar Invite action into your workflow

Under --SENDGRID TEMPLATE-- select whether you are using a Legacy or Dynamic template, and enter the Template ID for your desired template

Under --EVENT DETAILS-- select whether you want to Create/Update an event or Cancel an event. Fill out the Event Title (which will appear as the ‘subject’ for the event in the calendar), the Event Location, the Event Start (date and time) the Duration in minutes, and finally a Unique Event ID - this ID is required if you want to be able to update or cancel your event, where you will have to use the same ID for all Methods.

Head on down to --EMAILS AND ATTENDEES-- and drop the From Name and From Email Address that you registered with SendGrid into the appropriate fields. Now add Required Attendee(s) and Optional Atendee(s) using the following format: “name”:“email”,“name”:“email”, etc.

e.g. "Name One":"name.one@email.com","Name Two":"name.two@email.com"

Now under --MESSAGE AND CONTENT--, if you’re using a Legacy Template fill out the Email Subject (which appears in the email, different from the Event Title) and the Legacy Template Message Body, which is conveniently HTML, so you can add a whole bunch of convenient things in here.

If you’re using a Dynamic Template, fill out your sustitution tags under Dynamic Tags, with key / value pairs on the tag and the content you want to replace it with.

Finally, --SENDGRID OPTIONS-- allows you to set all those fun things like Tracking Opens, Tracking Clicks and setting your Unsubscribe ID. If, for whatever reason you need to use a different API in this workflow, you can override it here (this is also here so you can test the plugin with your own API)

Editor → Beautiful Calendar Invite | Bubble Editor

Demo → Bubble | No-code apps

Icon made by Freepik from www.flaticon.com

[johnny]

Hey @SJL,

Neat plugin, any chance it’ll support Postmark or any other email API?

[SJL]

Thanks @johnny,

If there’s interest for postmark (and others), I’ll definitely look into it.

I’m not too familiar with their API, so it won’t be in the immediate future, but once I have some spare time, I might play around.

Cheers
Simon

[SJL]

UPDATE

If you’re trying to use a list of attendees, rather than listing each one individually, a helpful plugin subscriber outlined the method they’re using, which is super helpful.

First step is the get your list (through whatever method that is) then :format as text

Then, within the format as text window, each list item should be "name field":"email field" (using whatever configuration matches your data), followed by a comma in the delimeter field:

In cases where you only have email addresses, always replace the name field with the user’s email - e.g. "user email":"user email", or "email 1":"email 1","email 2":"email 2","email 3":"email 3"

Thanks again to my subscriber for this method, who I’ll keep anonymous for now (you know who you are), unless they would like a shout-out!

[getamelia]

Hi @SJL
Thank you for building this great plugin!
My team is very interested in using this plugin. But when I tested out the demo, I was not able to receive any emails. I was wondering if the demo’s still maintained?
Cheers,
Amelia

[SJL]

Hi Amelia,

I set up the demo so you can trial it directly through there, rather than have to change anything in the editor, so if you’re trying to do anything in the editor, that might be the first issue.

If you are using the demo and you’ve correctly entered your own working SendGrid API key and template ID, my guess is that you might not have entered all the fields in the left column, and it’s probaby the Required Attendee Name that you left off.

The plugin requires attendee name and email pairs, otherwise it will fail. In cases where you don’t have an attendee name (only an email) use their email address in lieu of their name (i.e. you’ll have their email in both fields) - the post directly above yours provides some more details on this when you set up the plugin in your own app.

Another possible issue could be using a Dynamic Template ID, as you won’t be able to update the key/value pairs, this will fail - make sure you use a legacy template in the demo (I’ll need to update this in the instructions)

I hope that was the problem and you’re able to successfully use the plugin!

Thanks
Simon

[getamelia]

Thank you so much Simon, I was able to successfully test the plugin.
I just subscribed and am trying to integrate the plugin with my app, but am seeing this error.
I was wondering if you could help debug?

[SJL]

Hi @getamelia ,

This might be related to the issue outlined in my update on Feb 6th - have a read of that and see how you go.

Attendees must be in name and email pairs (or substitute the name for the email, so you have the email twice if you don’t know or don’t want to use their name)

Let me know how you go with that

[SJL]

BUG FIX UPDATE - OPTIONAL ATTENDEES FIX

Hi All,

I discovered yesterday that optional attendees were not receiving emails nor added to invites. Please update to the latest version which has fixed this.

Apologies to all, as this went unnoticed for some time, and it’s not something you would have easily noticed either.

[pathpeer]

Looks great! Can we send recurring calendar invites? I really need this feature.

[SJL]

Hi @pathpeer ,

Currently this isn’t a feature, but I’ll look into implementing it soon.

Cheers
Simon

[SJL]

NEW FEATURE - RECURRING EVENTS

I’ve added a new field where you can include parameters for recurring events.

Rather than implementing through checkboxes and dropdowns, this method gives you more flexibility to add these parameters programatically, where you can dynamically adjust the string to your needs.

You can find help how to create the rule string here or here

The update will be available in the next day or so, once Bubble approves the code changes.

[pathpeer]

Love the quick implementation! You got yourself a long-term customer.

[SJL]

BUG FIX AND NEW FIELDS - VISBILITY and SEQUENCE

Thanks to some helpful feedback I’ve changed the way invite updates are created, via the new sequence filed.

• You can continue to use the automated (fixed) feature, leaving the field blank. This creates a sequence number based on a unix timestamp (e.g. 1687675438) this will increment every second automatically.
• Altenatively you can add your own sequence number (starting at 0) and increment this manually every time you update or cancel the invite

I have added an additional visibility field so you can set the privace of your events from Public, Private or Confidential. Sadly not all calendar applications respect this field in the same way, so private and confidential events might not always appear that way for invitees.

NEW FIELDS - REQUIRED STATUS and OPTIONAL STATUS

Now instead of always requesting an RSVP from your attendees, you can now preset the status to Accpeted, Declined, Tentative or Delegated. This is useful if you’re publishing events to calendars, rather than needing a response. If you are after an RSVP, use the default Needs-Action option.

The update should be avialble in the next few days, once Bubble approves the changes.

I hope this further improves your experience with BCI.

[pathpeer]

Plugin works great so far!

Is there a way to add text to the calendar invite description? Would love to have that feature.

Also, for anyone looking use dynamic tags with a Sendgrid template:

• Dynamic tag name in the plugin is plain text. Ex: NAME
• To add the tag in the Sendgrid template, you add {{NAME}}.
• To add the tag as HTML, you add {{{NAME}}}.

[SJL]

Hi @pathpeer,

I’m not sure I follow your request. The email and invite contain the same text, similar to regular invites sent though other email applications.

Whatever you include via Legacy or Dynamic templates should show both in the email and in the invite - if this isn’t happening, can you send some more details and I will look into it.

Cheers

[SJL]

UPDATE - EVENT DESCRIPTION

Not all email clients are the same. Some (namely Exchange) will use your email body as the event description and will render it exactly as it is in your SendGrid template, ignoring the separate event description field. Others (namely Gmail) require a separate event description, hence the new field.

Of course it’s not easy to tell what your customers are using, so it’s recommended you use this field (although not required). Replicating your email in HTML in this field wil provide consistency across clients.

I will investigate whether it’s possible to receive a response from SendGrid with the email body in HTML format before sending so this can be automatically fed into the description.

[saviorabrams]

Postmark compatibility would be great.

[SJL]

@saviorabrams - how familiar are you with the PostMark API? I’ve never used it, but if you can point me in the right direction to find how to send emails vai the API, I can look into it

[johnny]

Check out their API docs: https://postmarkapp.com/developer/user-guide/send-email-with-api