How to create dynamic ical subscription

Hey everyone,

Shared this with a fellow bubbler and so thought I’d post here in case any advanced bubblers find it useful.

If anyone wants to create a dynamic ical subscription (from calendar events in your bubble app), here are the steps.

In short, it uses the ICS maker plugin + Rebrandly. Before I go into step by step, the big picture approach to have dynamic ical is this:

CREATING THE SUBSCRIPTION LINK:

Create .ics file using ICS maker plugin >>> use the .ics file url from ICS maker plugin and create a rebrandly link that references that .ics file url >>> have your users subscribe to the rebrandly url link in their apple/google/outlook calendars.

UPDATING THE SUBSCRIPTION ICS FILE:

Create an updated .ics file using ICS maker plugin >>> use that new .ics file url and UPDATE your rebrandly link created above to reference this UPDATED .ics file URL. When your user’s apple cal/google cal refreshes, that rebrandly link will now point to this updated .ics file URL.

BUBBL DATABASE STRUCTURE: In “User” data type, create three fields: “rebrandly_url”, “rebrandly_id”, and “ics_file_url”

STEP-BY-STEP:

  1. Install ICS maker plugin and set up so you are ready to create an ical file. Here are instructions for ref: https://equina-playground.bubbleapps.io/ics_maker

  2. Create a rebrandly account. You get first 500 links free https://www.rebrandly.com/. Rebrandly essentially is there to allow people to create alternative/shortened URL links to reference another URL. In this case, we are using this approach to create an rebrandly (static) URL for our .ics file url that the ICS maker plugin spits out. And we can then edit the .ics url this static rebrandly URL references (as we update our ical file), thus keep the same rebrandly link that your users have subscribed to in their calendars.

  3. Using bubble API connector, set up rebrandly header like so

  4. Create a ‘Create Link’ API:

NOTE: as you know, you need to initialize a test call in Bubble API connector to set it up. For the “fileURL” parameter, just use any link for now e.g. your website link. Once you are set up, this fileURL will be your ical file url that is in bubble.

  1. Create an ‘Edit Link’ API:

  2. Now that this is set up, when you use ICS maker plugin to create an ical file, you get access to the URL link to that file (here’s the image from ICS maker plugin demo page) and update your user’s “ics_file_url” field created above with this url.

In this work flow, also call the API with the ‘Create link’ as such

NOTE: the rebrandly link title and slashtag can be anything you want. In my case, I use the user’s name and unique id, respectively.

Then, use the created rebrandly URL and id that the API connector brings back and update your bubble DB fields created above:

  1. Now your users can use the rebrandly URL and subscribe to it in their google cal or apple cal and it will populate with the ics file.

  2. Next, you will have to create some mechanism of updating this link as your bubble calendar events change. You can schedule daily workflows or create a button for your users to refresh their calendar subscription in bubble (this workflow will include using ICS maker plugin to generate an updated ics file and then using the API connector ‘Edit Link’ api you set up above to update your rebrandly URL to reference this new updated ics file).

That’s it :slight_smile:

Hopefully in the future bubble will let us update files in the root and keep the same file URL, that way you will only need the ICS maker plugin.

Let me know if you have any questions,

Muneer

9 Likes

Hi Muneer,

Thank you for this amazing tool, I just need your help to be able to refresh it automatically for my subscribers. Is this possible?

Hi,

For now, you have to execute the updating workflow for every instance that changes events. Currently, this method is creating/updating the ics file client side. I am looking into doing this whole process server side so you can then set say, a database trigger to automatically update the subscription anytime events change.

Will keep you posted.

1 Like

ICS Parser plugin now available

Hi Muneer,

Thanks a lot for the detailed explanation here - really helpful!
Did Bubble add the functionality to update files in the root in the meantime?
Or is it still just possible to achieve this via rebrandly?

All the best,
Carl

Hi,

Bubble still does not allow updating a file in s3 and keeping the same URL. @Bubble any update on this?

Your option is via rebrandly or if you can set up your own s3 and then update files that way (as far as I know, in s3 if you have versioning turned off, any PUT object action would update the file while keeping the same URL).

Muneer

1 Like

I just wanted to add how incredibly helpful @muneer.hameer has been as he helped walk me through this setup. This has been a big help to me. Thanks

5 Likes

Does this mean that:

1 - Someone uses an ICS file to save the event to their calendar.
2 - The event creator changes the date of the event
3 - The User’s Calendar is automatically updated with the new event time

Right?

Is that what the parser is for?

Thanks, @muneer.hameer !

Hi @ChefThomas,

The parser is to either view or save events from an outside calendar into your bubble app.

If you run a calendar type app and want people to get an iCal subscription link that they can put into say their google calendar, then you use the ics maker and rebrandly as above, as events are changing in your bubble app events. .

Now you could use the parser to first “import” events into your bubble app then go through the iCal subscription workflow above using the ics maker.

It’s all about where the event is being changed and where you want the changes reflected.

Feel free to DM me your use case and I’d be happy to advise.

Muneer

1 Like

Hey Muneer!

I’m following along and seem to be getting most of it working. However in step 6 when attempting to use the created rebrandly URL and id that the API connector brings back I’m not getting the option for: 's shortUrl

fyi: Instead of ‘Employee’ like your example I am referencing ‘Room’ in my database.

I also created the iCal file on another “when ICS maker A is uploaded” workflow (the two blue ones) as I figured you must have done something similar as it is referencing Result of step 1 (make changes to …) on your examples rather than result of step 1 Create a new link.

As a reference here is the edit link API call.

I had to get the [id] from a GET request to rebrandly. The only one that seemed to work was the ‘Domain id’

Is there something I need to edit in order to get the option of 'shortUrl appearing in my make changes to step?

Hey Joe,

I haven’t touched those API connections in a while on my end (or re-initiated those calls recently). I wonder if the API version is now different or there is some settings in your rebrandly account. I think the short url is a combination of your domain (set up in rebrandly) and slashtag. Did you set up your branded domain in rebrandly?

These are the options I still see on my end.

Screen Shot 2021-05-20 at 7.22.48 PM

Any info in their documentation? Perhaps you could reach out to their support. I don’t have this set up outside of my production app and so it’s harder to play around for fear of breaking things.

1 Like

It was my Create Link call. Which was returning a 404 not found value and propagating those as the options.

I looked into the documentation as you wisely suggested and found a slightly different way they suggested setting up the call with reference to the domain from ‘fullName’ to “id” so I needed to reference the branded domain I had registered via rebrandly as an id. Here’s an example call they use.

I tried that again and got heaps more options returned, including the shortURL :slight_smile:

I’ll give the rest of the process another bash now. Thanks again for the pointer!

2 Likes

I’ve set this up and the rebrandly URLs work, referencing the stored file on the AWS server.

Unfortunately when I input that rebrandly url into my calendar application (macOS iCalendar in my case) it acts “too smart” and skips the rebrabndly url, detecting and referencing the file directly instead. So suddenly it is referencing a static file rather than a dynamic updating feed. To see any updates in iCalendar i need to re-subscribe to the same link to get it to download the updated file. Have you come across this problem and do you have any fix?

Hi. Yes that does happen with macOS iCalendar unfortunately. Until bubble allows us to update files, the best way to handle dynamic iCal is to save the file somewhere else like wasabi. Then, when you are generating the updated file in your bubble app, you simply send this file to replace the “old one” in wasabi while maintaining the same url.

Is it necessary to buy a domain in rebrandly to specify its id in json?

If i recall, you get 1 free branded domain on their free tier