Yes this is possible however requires a few adjustments to the regular installation process, 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 Wix site. These basic setup steps incl. screenshots are shown in this article.
As recommended by Wix, the best way to embed a recording and video uploading widget like the Clipchamp API is via backend code, see https://support.wix.com/en/article/accessing-3rd-party-services#backend-service-call.
A developer or software engineer in your team or at your web agency will be able to follow these instructions in combination with the steps described at https://help.clipchamp.com/collect/getting-started/initial-setup-of-the-clipchamp-api.
A 2nd method using Custom Code blocks in the frontend of your website is described below. Note that it might not work in some circumstances, if that is the case then the method recommended by Wix through the backend code of your site is the best alternative.
When embedding the Clipchamp API inside an <iframe> inside a website built through a service such as Wix, the API's script tag
<script src="https://api.clipchamp. com/.../button.js"></script>
has to be embedded inside that <iframe>, i.e. not inside the header of the surrounding page as it would normally be the case.
In the case of website builder platforms other than Wix, the procedure is very similar but can vary slightly depending on the requirements of the platform. If the steps suggested below do not work in your case, please get in touch with us through the contact widget in the bottom right of this page.
If your website runs on Squarespace, please see our separate help article that walks you through installing our video recorder in Squarespace.
Embedding the Clipchamp video camera and video uploader in Wix
1) You will need to put the Clipchamp API script tag that normally goes into the page header into the Wix iframe itself.
Make sure to include your unique Clipchamp API key (the pixelated part of the script tag in the screenshot).
2) You can then also put the code that normally goes into the body of the website directly below the first script tag:
3) Now save and preview the page:
4) You will then need to add the domain name of the iframe (NOT the website as such) into the Clipchamp API settings.
To find out the domain name, move the mouse pointer a few pixels below the button, right click and select "view frame source". In Chrome, this opens a new browser tab. Go to the tab's address bar and copy the domain name from there:
In our example above, this is 6699...601.htmlcomponentservice.com.
Add the domain name in your case into the domain list in your Clipchamp API settings (https://util.clipchamp.com/en/api- settings/basic).
Note that adding the domain of the iframe is a requirement for Wix websites. On other platforms such as Squarespace, adding your website's domain into the list of allowed domains is sufficient to get our recorder to work. See the Squarespace-specific article for the details.
5) You will also need to add another domain into the domain list at https://util.clipchamp.com/en/api-setup/domains to get the recorder to display correctly on your published Wix page.
This domain name follows the naming convention yourwebsitename-wixsite-com.fileusr.com, so e.g. moestavern-wixsite-com.fileusr.com. Adjust it to your website's name and add it to your Clipchamp domains list, then check the embedded recording button on your published Wix page.
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 Wix test page where you embedded the Clipchamp button so we can analyse it and suggest a solution.