Integrating with Squarespace
In this guide we'll show how to use upload links to receive files from website vistors. The information visitors provide in the contact form is automatically passed to Samply so they don't need to provide the same information twice.
Setup
We've setup a simple page with the embedded upload link placed directly above the form block. Samply only requires a name
and email
be provided, but your form can have as many fields as you'd like.
TIP
There's a hack that allows you to embed code inside the form block itself. Select the form, go to "Edit form fields" then add a "Text Area" field. Paste your embed code inside of the "description" field and it will appear on the page.
We'll give our iframe an id (samply-upload
) so that it will be easy to identify in the custom code that we will add.
<iframe id="samply-upload" src="https://samply.app/..."></iframe>
Injecting code
Squarespace let's you add custom code by using code injection. You can add javascript code to interact with elements on the page. We found that adding code to the "Footer" section worked best.
If you copy this code and paste it into your website, you should see a pop up that says "Samply!".
<script>
alert("Samply!")
</script>
Reading form values
In order to pass name
and email
to Samply we first need to read these values from the Squarespace form. In our testing, we found that an easy way to do this was by listening to all keyboard events on the page. Normally this would be excesive, but we had trouble getting event listeners on form inputs to work consistently. You may have better luck.
Each keyboard event has a target
. The target
has an id
and we can use this to know which input on the page the event is coming from. It can be useful to use the web inspector to find ids in your form.
// Values of the inputs
let firstName = '';
let lastName = '';
let email = '';
// IDs of the input elements
const firstNameId = 'name-yui_3_17_2_1_1726169935413_20113-fname-field';
const lastNameId = 'name-yui_3_17_2_1_1726169935413_20113-lname-field';
const emailId = 'email-yui_3_17_2_1_1726169935413_20114-field';
window.addEventListener('keyup', (event) => {
// Value of current input ("Eric", "eric@samply.app", etc.)
const inputValue = event.target.value;
// Match IDs with their inputs and store the value
switch(event.target.id) {
case firstNameId:
firstName = inputValue;
break;
case lastNameId:
lastName = inputValue;
break;
case emailId:
email = inputValue;
break;
}
});
Writing form values
Now that we have the form values we can send these values to Samply. We will use the id of the embedded iframe (samply-upload
) to get a reference to the iframe. We can then use the Window: postMessage() api to send the values.
<script>
// ...code above
const samplyUpload = document.getElementById("samply-upload");
samplyUpload.contentWindow.postMessage({ email, name: firstName + ' ' + lastName }, '*');
// code below...
</script>
Sample code
This full example passes name
and email
values from the Squarespace form into the Samply upload link. It also starts uploads when the Submit button is pressed on the Squarespace form.
<script>
// Values of the inputs
let firstName = '';
let lastName = '';
let email = '';
// IDs of the input elements
const firstNameId = 'name-yui_3_17_2_1_1726169935413_20113-fname-field';
const lastNameId = 'name-yui_3_17_2_1_1726169935413_20113-lname-field';
const emailId = 'email-yui_3_17_2_1_1726169935413_20114-field';
/**
* A helper function that returns the embeded Samply <iframe> element
*/
function getSamplyElement() {
return document.getElementById("samply-upload");
}
window.addEventListener('keyup', (event) => {
// Value of current input ("Eric", "eric@samply.app", etc.)
const inputValue = event.target.value;
// Match IDs with their inputs and store the value
switch(event.target.id) {
case firstNameId:
firstName = inputValue;
break;
case lastNameId:
lastName = inputValue;
break;
case emailId:
email = inputValue;
break;
}
// Build full name
const name = firstName + ' ' + lastName;
// Pass the values to the Samply iframe element
getSamplyElement().contentWindow.postMessage({ name, email }, '*');
});
window.addEventListener('submit', (event) => {
// Tell Samply to "submit"
getSamplyElement().contentWindow.postMessage({ submit: true }, '*');
});
</script>