How to embed a video recorder on your Squarespace website

29 Sep

In a post earlier this year, we showed you how to make use of videos on your Squarespace website more easily – either as a background video or as an embedded clip.

In today’s post, we’re walking you through the best way to collect videos from your users and website visitors by embedding a video recorder and uploader widget directly on your site.

We do this with the help of the Clipchamp HTML5 camera API – a video capturing tool  that can be used on any kind of website, for instance to collect video testimonials from your customers if you run an online store, to accept video submissions for competitions or to receive video comments from readers in your blog.

Following our tutorial, it’s straight-forward to install on your Squarespace site without any expert knowledge required.

Creating and adding a Squarespace video recorder

You can decide if your visitors should either record with their webcam directly on your site, select & upload videos that they already have on their device, or you can also give them both options so they can choose the one they prefer.

Due to the unique technology we built, all video files get submitted directly from your users’ devices to a cloud storage target you select without going through our infrastructure. This helps to protect your and your visitors’ privacy.

 

squarespace-video-recorder

 

With regards to an upload destination, videos can get sent to your YouTube, Dropbox, Google Drive, Amazon S3 or Microsoft Azure account.

In order to be able to display the clips on your website after people upload them to you, having them sent to YouTube makes the most sense as you can embed them from there through the Squarespace admin screens.

And now, here are the steps to get your Squarespace video recorder in place:

1) Log into your website’s admin interface

This is required as you need to create a sample new page in a later step and copy some code into the HTML of this page.

 

Squarespace login

 

2) In a 2nd browser tab, register for a free trial of the Clipchamp video API

Registering for a trial account of our API is required to get your unique API key, which you’ll need in a subsequent step and to enable an upload target for videos you’ll receive. You don’t need a credit card to sign up and you can cancel the trial at any time.

 

register-clipchamp-trial

 

3) Set YouTube as the upload target to send user videos to

After opening a trial account, in the API settings at https://clipchamp.com/en/api-setup/integrations, click on YouTube and connect the Clipchamp API to your YouTube account so that videos your users submit can get uploaded to your channel or a specific playlist.

 

set-youtube-uploads

 

4) Next, go to https://clipchamp.com/en/api-setup/install

On this page there are 2 code snippets – you need to copy both snippets into Squarespace (steps 5 and 6 below) to embed the webcam recorder and uploader on your site. You can ignore the instructions that are mentioned on the page itself as they apply to non-Squarespace websites.

 

clipchamp-api-code

 

5) Create a new page in Squarespace and open the “Page Header Code Injection”

In the Page Header Code Injection, paste the code snippet from the first section of the Clipchamp page (the one that includes your API key) as follows:

 

webcam-video-squarespace

 

6) Then, put the 2nd code snippet into a Code Block in your page’s “Page Content”:

 

Edit the page content,

squarespace-video-camera

 

and add a new code block on the page where you’d like to have a video button appear.

 

add-code-block

 

squarespace-html5-video

 

In the code block, insert the 2nd (larger) code snippet that you copied from https://clipchamp.com/en/api-setup/install.

 

squarespace-html5-camera

 

Make sure to select the following settings in the code block: “HTML” in the dropdown on the right and un-check “Display Source” on the left. Just hit “Apply” when you’ve added the code snippet.

 

7) Next, save and preview the page where you embedded the Clipchamp code

If the snippets were added and saved correctly, the preview page should show your new Squarespace video recorder button. On our sample page, the button looks like this:

 

squarespace video recorder - page preview

 

Squarespace video recording button

 

8) As the last step, authorize your website’s domain in the Clipchamp settings

In order for the button to work, you need to whitelist the domain of the button in your Clipchamp API settings as follows:

Copy the URL of your website and add it to the list of authorized domains in your Clipchamp API settings at https://clipchamp.com/en/api-setup/domains.

In our example, the domains we whitelisted were clipchamp-test.squarespace.com and www.clipchamp-test.squarespace.com. Make sure to insert your own domain and optionally its www. subdomain.

 

authorize domain in the Clipchamp API settings

 

After adding the URL(s) into the list, reload the preview of your Squarespace page. The video recorder and uploader button on the page is now ready to be used so your visitors can start sending recordings and other videos.

 

squarespace-video-recorder

 

Showing submitted videos on your site

If you’d like to use videos that people send to you and that are now located in your YouTube channel to display them on your website, please see the following instructions in the Squarespace help for how to embed YouTube videos.

 

Squarespace KB about embedding videos

 

Conclusion

These are all the required steps to collect videos if you’re using Squarespace. Note that we’ve also summarised them in a brief help article about the subject for anyone who already registered for a Clipchamp video API account.

Our Knowledge Base article includes a number of troubleshooting suggestions in case there are any issues with getting our video button to display correctly on your site. It also describes an option to embed a video recorder on every of your site’s pages automatically and contains sample code to customize the recorder to your liking.

The camera widget comes with a broad range of customization options, for instance you can change its branding to your own, adjust colours and other style elements as well as a number of settings related to input and output videos.

We have not covered these expert options in this article, however you’re welcome to take a closer look at the API documentation to see which of its parameters you’d like to add to your Squarespace video recorder. Simply add any options into the code snippet that you inserted into the Code Block in step 6.

While this post is about receiving videos in Squarespace, the method we described also works to get the recorder in place on other website builder platforms and CMSs – for instance we also wrote a tutorial for Wix. The main requirement for all of them is that you need to be allowed to add custom code to pages in your site’s admin settings.

Was this useful?