Yes this is possible however requires a few adjustments to the regular installation process as you don't have direct access to your website's code if you're using site builders such as Squarespace. Please see below for the details of what you need to set up differently.

 

PLEASE NOTE: For the purposes of this tutorial, we're assuming that you already registered for a Clipchamp video API trial, set up an upload target in the API settings on clipchamp.com, added your domain to the whitelisted domains, have your API key available and have also access to the code snippets you'll need to embed in your Squarespace site. These basic setup steps incl. screenshots are shown in this article

 

1) Instead of putting the Clipchamp API script tag into the page header in your code, add it into the Squarespace Code Injection tool instead. 

There are  2 options to do this:

Option a)

When embedding our video API inside an <iframe> inside a website built through Squarespace, the API's script tag

<script src="https://api.clipchamp.com/.../button.js"></script>

can be embedded in Squarespace's Code Injection option into the head section of your site.

This is similar to embedding the script on non-Squarespace websites, however with the ease of using the familiar Squarespace admin interface.

Please note that adding the script tag this way adds it to the head section of all pages of your website. This can be handy if you're e.g. running a blog and would like to show a video recorder underneath each of your posts but might not be desired in other circumstances.

 

Option b)

If you'd only like to embed our video recorder on 1 particular page, you can alternatively copy the script tag into the Page Header Code Injection on the page itself instead of adding it through the site-wide Code Injection.

 

Make sure to save the changes after adding the script tag.

 

2) Next, put the code that normally goes into the body of the website into a Code Block in your page's "Page Content":

 

 

 

Note the settings we selected in the Code Box of "HTML" in the dropdown on the right and the unchecked "Display Source". Hit "Apply" when you're done adding the code.

 

3) Now, save the page and navigate to it in a 2nd browser tab:

If you added both code snippets (the script tag and the button code) correctly and saved the changes, going to your page will show a freshly minted Clipchamp video recording button :-)

 

 

4) If the button doesn't show make sure that you:

  • copied the code snippets correctly from your Clipchamp API settings
  • set up the upload target you'd like to use in the API settings
  • added your website's domain to the list of domains that your unique Clipchamp API key is authorized on

Please contact us through the contact widget in the bottom right of this page if you run into any issues with any of the steps above.

 

5) Sample code we used for the button on our test page

Here is the code we added into the Code Block of our Squarespace test page. Feel free to copy it to display the same type of video button on your own page.

 

<div id="clipchamp-button" style="text-align: center;"></div>
<script type="text/javascript">
 var el = document.querySelector("#clipchamp-button");
 // For more customization options refer to our Documentation.
 var options = {
 output: "youtube", // Select one of the upload targets you configured in the previous step
 logo: "https://api.clipchamp.com/static/button/images/logo-dark.svg",
 title: "Record or select a video right here",
 label: "I am a video recorder",
 style: {
 url: "https://api.clipchamp.com/static/button/themes/modern-light.css"
 }
 };
 clipchamp(el, options);
</script>

 

In order to make changes to the button as well as input, output, branding and other elements, please see our full video API documentation.

 

6) Browser cookie settings

One additional note - if the recording button does not appear on your page after following the steps described above, one possible reason (that we encountered when testing in Firefox) is that you need to make some changes to the cookie settings in your browser.

This will make sure the webcam recorder is getting displayed correctly.

In Firefox, if you go to Menu --> Options --> Privacy, under History the "Accept third-party cookies" dropdown needs to be set to "Always".

 

 

In Chrome, go to Menu --> Settings --> Advanced --> Content Settings --> Cookies and make sure Cookies are enabled and third-party cookies are not getting blocked.

 

 

If you'd rather keep your Cookie settings more restrictive, you should also be able to have the video button getting shown correctly by adding an "exception" (in Firefox) or by "allowing" (in Chrome) cookies coming from https://api.clipchamp.com.

This should be all that is required to get the video recorder to be embedded correctly. If you run into any issues, please get in touch through the support widget on this page.

In your support request, please include screenshots and details such as a link to your Squarespace test page where you embedded the Clipchamp button so we can analyse it and suggest a solution.

Did this answer your question?