Custom Button API


Please note – the Collect API is not available for new signups anymore.


If your plan includes the custom button API you may omit the element parameter in the clipchamp(...) call, which will then return a Javascript API object for interacting with the Clipchamp process. Once created, the configured options can be updated using the update function, and the Clipchamp UI can be opened using the open function.

  1. <script type="text/javascript">
  2. var process = clipchamp(options);
  3. process.update(options);
  4. process.update(key, value);
  6. </script>

If there’s no running Clipchamp process associated with this API object when open is called, a new one will be started with the currently configured options. These options will remain in effect until the process completes or is cancelled.

A sample custom button implementation looks as follows:

  1. <script src="">
  2. </head>
  3. <body>
  4. <button>My button</button>
  5. <script>
  6. (function() {
  7. var clipchampProcess = clipchamp({
  8. output: '...' // your nominated upload target goes here
  9. });
  10. document.getElementsByTagName("button')[0].onclick = function() {
  12. });
  13. })();
  14. </script>

There is no CSS styling for the button set in the example, this can be achieved through a new CSS class. Note that you can also use the enable parameter's no-branding flag (if available in your plan) in order to remove Clipchamp branding from one of our default buttons if that's what you'd like to achieve rather than creating your own button incl. styling from scratch.