Update 2: Static sites are becoming more and more popular. The trend is called microservices / JAMstack. There are even more choices on how you implement backend work on static sites these days than when the article was written. Cloud functions in particular are very useful. My agency, AM Code, can help you if you need it.
Update: Recently I’ve been using Webflow. It’s a little bit more technical than squarespace but not by much if you know a little html / css. With it you get a CMS feature that would make it a lot easier to implement a native solution like I write below. Be sure to see if that would solve your needs!
So you’re faced with a client who has chosen to use SquareSpace, maybe even before they were your client.
They probably had good enough reasons for it, they didn’t have any complex needs when they set their site up.
But now they have a project for you. They need to add some feature to their site that involves databases and programming.
You can’t write PHP or MySQL directly into SquareSpace, in case you didn’t know. So how do you proceed?
Well if the new feature / interactivity that is needed is small enough that it doesn’t warrant ripping their site out of SquareSpace and remaking it on a self-hosted platform, you use JavaScript.
Thanks to tools like Firebase, you can create an interactive database-driven app purely on the client side using JavaScript. Firebase is a database that can be accessed by Javascript running in the visitor’s browser. It uses AJAX to both retrieve data and save data (like when a form is filled out).
Because this is possible with Firebase, it’s removes the need to have PHP and MySQL — provided the feature you need to create is small enough, say adding a form to a single page in squarespace.
Just write the feature they need as a Single Page Application using the JS framework of your choice, and hook it up to Firebase. There are many Javascript frameworks available that can connect with Firebase through provided addons. JS frameworks help create features like forms quickly because they setup the hard, “fundemental” foundation for you. In my scenario, I used Angular. That’s a solid choice, but you can find more frameworks here.
Once you’ve created the application the client wants in a .html file, you can copy / paste it into the SquareSpace page by adding a “Code Block” like so:
You’ll first want to add the javascript as a code block. Afterwards put the HTML for your app in another code block after it.
Now you have a nifty, database connected single page app hosted on SquareSpace. Neet huh? 🙂
Hi Ayub,
Very interesting post! I have a project using a squarespace website but that will require some further customisations. Would love to have a chat with you about it.
Erik
Sure 🙂 Readers can always reach out to me: http://marketercoder.com/fullstack-web-developer/
Hi Ayub,
Could Firebase be used with Squarespace when server-side code is normally required, such as for processing payments? I have been trying to design a custom payment form in Squarespace that allows clients to manually type in the payment amount, as I invoice for services rendered. Squarespace Commerce does not provide this option; users must select from a specific set of products and variants (all require pre-determined amounts). I have a working JotForm that will do it but I don’t see the point in paying another monthly fee when Squarespace and Stripe already collect fees for the website and payment processing.
Do you know of a way to run the necessary server-side code to process a Stripe payment using the Stripe API? Thanks!
Stripe doesn’t support creating transactions without a server. So if you want to replace Jotform, you will have to find a server to host some php. Firebase isn’t relevant because it’s a database solution. Cheap shared hosting would work to process your payments, you can find them for e.g. $10 a year. Heck you could probably get away with 000webhost (free hosting). Free tiers of AWS or Heroku are also options.
Since Stripe handles the card details, security isn’t a big concern for the hosting. On the server side you’d have to make a script that takes in the stripe token, processes the charge, then redirects them back to your SquareSpace site (e.g. to a thank you page).