For the full range of parameters you can make use of, please refer to our full video API documentation. We'll also be linking to it in the course of this tutorial.

*********************

WordPress users, please note

  • We have a WordPress plugin available that doesn't require any coding to set up the Clipchamp API on your website. The steps are slightly different from the ones described in the article below, please see here for the WordPress-specific tutorial.
  • Our WordPress plugin covers the most common use cases for video recording and uploading on your WP site, however for more extensive customization options we recommend to implement the API manually outside of the WP plugin.

**********************

Squarespace and Wix users please note

  • These 2 platforms require a few specific steps to embed our video recorder and uploader that are a bit different from the steps described in the article below.

************************

For all other websites, here we go

Prerequisites

What you’ll need:

  • Access to the HTML of the web page where you want to embed a video button
  • Your Clipchamp API key
  • Webcam for testing

You can sign up to a trial account here: https://clipchamp.com/en/pricing/api-access
After signup, your API key is available in your account dashboard and in the basic API settings here: https://util.clipchamp.com/en/api-settings/basic

As the initial step, sign up to one of our API plans - no credit card is required and there is a 14-day commitment-free trial period included in each plan.

When you sign up, you will be able to select an upload destination to which the Clipchamp API will automatically upload your users' videos. We offer a growing range of upload destinations, currently they are:

Note that you can also make changes to your upload settings any time by accessing the API settings page in your Clipchamp account.


The following setup steps assume that you are using the "Manual Configuration" option. We also have a tutorial available that shows the steps of the "Setup Wizard".

-------------------

Step 1: Add domains to your API settings

After opening the manual configuration screen, whitelist the domains that you want to use the Clipchamp API on by adding them to the domains list. The direct link is https://util.clipchamp.com/en/api-settings/basic.

In the screenshot, you can see that we added clipchamp.com as the domain. This is just an example, make sure to enter your own domains into list.

-------------------

Step 2: Set an upload destination

This can be anything from Google Drive to Dropbox or even a custom integration into your own storage solution using the API’s “blob” output.

Available direct upload targets can be found here: https://util.clipchamp.com/en/api-settings/integrations. If you'd rather use your own upload destination, please note that the "blob" output needs to be set up manually following the tutorial linked to above.

For Google Drive, YouTube and Dropbox, you’ll need to log in, authorise Clipchamp to access your storage and select a target folder (target folder is optional) or any other available service specific options.

Given that YouTube is also a Google-provided service, the procedure is very similar.

For both Amazon S3 and Microsoft Azure, you'll need to provide the storage account name/id and its secret access key. For tutorials of how to set up and configure S3 or Azure to work with Clipchamp, see the respective links above.

Sample screenshot with Google Drive set as the upload target

-------------------

Step 3: Copy your API key

To retrieve it, go to the API settings page. The API key is shown in your account's dashboard as well as in the basic settings section after clicking on "Manual Configuration":

Copy that string.

-------------------

Step 4: Add the button’s script into your web page

Next, to embed a Clipchamp button on your website you'll have to insert the following script into the header of the page (between the opening <head> and closing </head>), substituting in your unique API key. Even if you are planning on using a custom button object/element, this script is required in the page's header.

<script type= "text/javascript" src= "https://api.clipchamp.com/YOUR_API_KEY/button.js"> </script>

The script and instructions are also available on the first page of our full API documentation.

-------------------

Step 5: Insert the code snippet into your web page

After this, add the Clipchamp code snippet into your web page. The snippet is available at https://clipchamp.com/en/documentation/getting-started at Step 2. Adjust it by adding input, output and other parameters and insert it into a desired element of the page where you want the button to appear.

Sample code snippet:

<div id="clipchamp-button"></div>

<script type="text/javascript">

 var el = document.querySelector("#clipchamp-button");

 var options = {

 output: "gdrive"

 }

 clipchamp(el, options);

</script>


After saving the changes to the HTML of your page, at this point you should be seeing a button that looks similar to the one below - you can change its label, colour and size or create your own as well.


If you click the button and it says "unavailable", check that your internet connection is working, that your API key and the header script are both correctly entered and placed in the header of the page, and check that your domain is whitelisted in your Clipchamp API settings.

If all settings are correct, clicking the button will open a new window/frame that looks like this:

-------------------

Step 6: Add the “inputs” parameter to the options variable

To make changes to the types of input you'd like to offer to your users, in the code snippet mentioned previously, add the inputs” parameter to the options variable, followed by an array of desired input options, i.e. inputs: [“camera”, “file” or “direct”]. Using just the camera option opens the Clipchamp UI directly into webcam mode. Not specifying inputs defaults to file and camera.

Sample code snippet:

<div id="clipchamp-button"></div>

<script type="text/javascript">

 var el = document.querySelector("#clipchamp-button");

 var options = {

 inputs: "camera",

 output: "gdrive"

 }

 clipchamp(el, options);

</script>

-------------------

Step 7: Change the “output” parameter to suit your needs

Ensure your output target is set up in your API settings. If you need to test integration but don’t have the backend ready yet, use the “dummy” setting, which doesn’t output anything and instead simulates an upload using a timer.

Output service specific parameters are accessible through their respective functions. For example, when outputting to YouTube, the "youtube.title" and "youtube.description" parameters are available and can be given strings.

Sample code snippet:

<div id="clipchamp-button"></div>

<script type="text/javascript">

 var el = document.querySelector("#clipchamp-button");

 var options = {

 inputs: "camera",

 output: "youtube",

 youtube: {

 title: "some title", description: "some description"

 }

 }

 clipchamp(el, options);

</script>

-------------------

Step 8: Customise your video button

Lastly, feel free to customise your API instance further by finding the API option you want to control and add it into the code snippet within the "options" variable.

-------------------

Step 9 (optional): Select a UI theme

Please see here for available UI themes to use. Selecting any of these will adjust the user-facing visual elements of the embedded Clipchamp button on your website.

-------------------

Closing Remarks

This article gives you all that is needed in order to collect videos from your website visitors or let them make webcam recordings quickly. In addition to the above, there are a lot more options to explore with the Clipchamp API.

Most of the API's powerful capabilities will not usually require your attention, assuming meaningful defaults affecting its inner mechanics, such as the finer points of its video transcoding and compression capabilities.

There are other ways of invoking the API as well, namely using it in combination with jQuery, using data attributes, or using a custom button, which is an option in some of our plans.

-------------------

More Tutorials

For a list of additional tutorials that cover the most common as well as some advanced usage and setup scenarios, please see https://clipchamp.com/blog/api-documentation/tutorials

Did this answer your question?