Squarespace integration

We get many requests regarding adding media uploads to Squarespace projects. This tutorial covers adding the feature by integrating Uploadcare.

By the end of this tutorial, your existing Squarespace site will be capable of receiving user uploads. We will use Uploadcare Widget.

If you plan using the widget with third-party forms, check out their help pages for a similar integration tutorial.

Before we begin

Before proceeding with the integration, let’s make sure everything is in place:

  1. Squarespace account.
  2. Uploadcare account.
  3. Uploadcare free API keys.

Once you create an Uploadcare account, navigate to your dashboard to create a new project or discover API keys for an existing one. You will need a public key: it defines a target project user uploads will go to.

If you plan uploading non-image content, add billing info to your account.

Create form with Uploadcare Widget

Head over to your Squarespace editor. Your page consists of blocks, and the widget will be added as a code block. Hit the plus sign to activate the menu:

Scroll down to the “MORE” section of the menu and choose the “Code block” element.

Copy the following code snippet and paste it in the block you just added. Set your public key..

<script>UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';</script>
<script src="https://ucarecdn.com/libs/widget/2.x/uploadcare.full.min.js" data-integration="Squarespace"></script>

<fieldset>
  <legend>Submit Your Question</legend>
  <form>
    <p>
      <label for="email">E-mail</label>
      <input type="email" id="email" name="email"/>
    </p>
    <p>
      <label for="question">Your question</label>
      <textarea id="question" name="question"></textarea>
    </p>
    <p>
      <label for="images">Your images</label>
      <input type="hidden" id="images" name="images"
             role="uploadcare-uploader" data-clearable data-images-only data-crop="free,2:3,4:3,16:9" />

    </p>
    <p>
      <button type="submit">Submit</button>
    </p>
  </form>
</fieldset>

The data-images-only option sits in the widget config to provide a fail-safe experience when working with accounts on the Free plan with no billing info added: those only allow image uploads.

Hit “APPLY.”

Yay, that’s it. You have just integrated Uploadcare into your Squarespace project. You further adjust widget configuration or customize its styling.

Conclusion

Yay, you have just implemented media uploads in your Squarespace project.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.