Custom Code with Squarespace

As an end user, you do not have access to the server to host your own web files. Everything that Squarespace hosts is managed by Squarespace. Because of that, it can be a bit challenging adding dynamic content to your site. However, there are a couple different ways you can display data from your FileMaker database on your Squarespace website.

Code Block Element

• Requires separate hosted web page on another server.

• Access to the data via the FileMaker Data API.

• Slower performance.

• Poor SEO.

Squarespace Developer Mode

• Turning on Developer Mode gives you access to your Squarespace template files directly.

• Allows you to put your own content on your site via SFTP.

• SEO friendly.

• Custom pages are not editable from Squarespace drag and drop templating tool.

• Template will no longer receive updates from Squarespace.

• Turning off developer mode removes custom content from site.

Enabling Developer Mode

The first thing you will need to do is enable developer mode. With an admin account in Squarespace, go to the configuration page of your website and go to Settings->Advanced->Developer Mode.

From there you will need to toggle on Developer Mode. Once Developer Mode is turned on, you will also want to take note of the username, hostname and port under the Connectivity Details section as we will need that information later. Please note that Developer Mode is only available with a Business or Commerce Squarespace plan.

Squarespace Template Static Page

In order to display content generated from FileMaker, we will be using the Static Page feature for a template. Each static page created also needs an accompanying configuration file that provides basic information for Squarespace for the page (more on this to follow). Once a Static and Conf Page are created, it will show up as a page on the Pages menu inside the Squarespace editor. Static pages will also pull in your header and footer, so all CSS will also come through. Keep in mind that a static page is exactly what it sounds like, a page that Squarespace can not change and can not be updated from the normal Squarespace updater.

Pushing Updates from FileMaker

To push updates to Squarespace, you will need to SFTP files to Squarespace. Before you begin, as of FileMaker 18, you can't natively make SFTP requests, so a plugin is needed. We suggest using the BaseElements Plugin as it is a free and powerful plugin. To upload the Page and Conf files, you will need to first create a .page and .conf file using FileMaker's Data script steps, then pull the file reference into FileMaker to be sent.

Request:

Create Data File [ "$filePath" ; Create folders: On ]
Open Data File [ "$filePath" ; Target: $dataFile ]
Write to Data File [ File ID: $dataFile ; Data source: $htmlOrConfigurationText ; Write as: UTF-8 ]
Close Data File [ File ID: $dataFile ]
Set Variable [ $file ; Value: BE_FileImport ( filePathFMToBE ( $pageFilePath ) ) ]
Set Variable [ $url ; Value: "sftp://dev.squarespace.com:2030/dbservices/pages/db-static.page" ]
Set Variable [ $result ; Value: BE_FTP_Upload ( $url ; $file ; $user ; $pass ]

We strongly suggest taking a look at our accompanying demo file as it contains a quick way to get started and a few useful custom functions.

Conclusion

Integrating your FileMaker app with your Squarespace website will ensure your website has up-to-date information and by using the Static Page method, your SEO will stay strong. Feel free to contact us if you need further assistance or to discuss getting your Squarespace website integrated with FileMaker.