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 proceeding with the integration, let’s make sure everything is in place:
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.
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>
<legend>Submit Your Question</legend>
<input type="email" id="email" name="email"/>
<label for="question">Your question</label>
<textarea id="question" name="question"></textarea>
<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" />
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.
Yay, you have just implemented media uploads in your Squarespace project.