Firebase integration

I was hoping to integrate Firebase into my webflow site, which requires some onClick() events to trigger when a form is submitted. Since those aren’t supported at the moment I’m looking for workarounds.

The best I have so far is taken from @callmevlad 's answer in this thread: here. In a sense, we’d wrap our Firebase function calls by assigning an ID to each button, and adding a code snippet to the HTML body of the page, like this:

<script>
$(document).ready(function() {
  $('#my-unique-button-id').on('click', function(e) {
    //Firebase functions here, ie,
    ref.set($('#my-submit-form-id').serializeObject());
  });
});
</script>

I’m wondering if there’s a better way to do this (or if this simply won’t work for some reason). For my purposes, better would be defined as ease of implementation, but anything is welcome.

My plan is to try to get this approach working (for submission and receipt/dispaly of Firebase data), I’d happy to let you know if it works, but it might take me a while to get everything set up.

If you are hosting at Webflow, then I would suggest putting your javascript in the custom header code under your site settings (assuming that you aren’t already.)

Be cautious though. If you aren’t using Firebase’s User Auth/Login APIs prior to writing to your Firebase, then you are leaving your Firebase wide open to the world. I’d highly recommend setting up proper Firebase security rules based on how you are using the User Auth/Login APIs before releasing your site into the wild.

Absolutely right, I’m handling authentication as well so not just anything can be written to the Firebase by anyone. I actually have all the relevant snippets coded and the Firebase set up with appropriate rules, I just need to migrate it into Webflow and add in a programmatic table creation to display return data.

2 Likes