*** This product is discontinued ***
In a previous post, we showed you how to convert videos and reduce their file size so that you can use them more easily on your Wix blog or website.
While this previous article was related to your own video files and designing your website, in the current post we’re showing you how to install a video recorder to receive videos from your site visitors.
The screenshots below are for Wix, however the method described in here also works to get a webcam recorder running on other website builder platforms as long as you are able to add custom code in your platform’s admin settings.
Creating and adding a Wix video recorder
Users will be able to either record a video with their webcam directly on your Wix site or you can let them upload video files to you that they already have on their computer.
In both cases, the videos can get submitted to your YouTube, Dropbox, Google Drive, Amazon S3 or Microsoft Azure account. Though to be able to easily 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 Wix editor.
In order to set up this Wix video recorder, we’re making use of our HTML5 video and JavaScript webcam API. It’s a widget that you can embed on a website to collect videos from users and site visitors. While it is available for websites of any kind, there are some specific steps required to have it up and running on a Wix site.
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 as follows:
1) Log into your Wix website’s administration backend
You’ll need to create a sample new page in a later step and copy some code into the HTML Settings of this page.
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 set an upload target for user videos. You don’t need a credit card to sign up and you can cancel the trial at any time.
3) Set YouTube as the upload target to send user videos to
After opening a trial account, in the API settings at https://util.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.
4) Go to https://util.clipchamp.com/en/api-setup/install
On that page is where you’ll see 2 code snippets that are required to embed a video recording button on your site. You can ignore the instructions that are mentioned on this page as they apply to non-Wix websites. In your case, what you have to do is to copy & paste both code snippets into the HTML editor of a new page you create in Wix.
5) Create a new page in Wix and open the “HTML Settings”
In the HTML editor, paste the code snippet from the first section of the Clipchamp page from step 4 as follows:
6) Then, copy the code from the second section directly underneath the first snippet in the HTML editor
7) Next, save and preview the page where you embedded the HTML code
If the code was added correctly, the preview page should show a new embedded video recording button. Yay!
8) As the last step, authorize the video button domains
In order for the recorder to work, you need to whitelist 2 domains in your Clipchamp API settings as follows:
The 1st domain: Copy the URL that Wix is using to show the embedded Clipchamp button on your Wix page and add it to the list of authorized domains in your Clipchamp API settings at https://util.clipchamp.com/en/api-setup/domains. Note that this is not the URL (or “domain”) that is shown in your browser address bar (we assume you’re using Chrome) but it is the URL of the iframe that the video button on your page is in.
You can get this domain name by moving the mouse pointer a few pixels below the Clipchamp button in the page preview, then right-clicking and selecting “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, the domain looks like this
The 2nd domain: 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 you can publish your Wix test page with the embedded recording button on it to check if it gets displayed correctly.
You can also find this 2nd domain name by looking at your Wix page’s source code
After saving these 2 domain names into the Clipchamp API settings, the video recorder and uploader button on your Wix page will be ready to be used so your visitors can start sending recordings and other videos to your YouTube channel.
9) Show 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 Wix help of how to embed YouTube videos.
Wrapping up
These are all the required steps to collect videos from your site visitors if you’re using Wix. Note that we’ve also written a brief help article about the subject for anyone who already registered for a Clipchamp video API account.
If you’re not using a website builder, please see this separate tutorial for the installation instructions to embed the HTML5 video API on any website.
We built it together with our clients to make it suitable for a broad range of scenarios and any kind of web project. This includes for instance the ability to collect video testimonials from your customers if you run an online store or to get video comments from readers in your blog.
A final note – our video recorder widget comes with a broad range of 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.
As these are expert options, we have note covered them in this post, however you’re welcome to delve into the API documentation and decide which of its parameters you’d like to add to your Wix video recorder. You can add any options into the code snippet that you inserted into the HTML editor in step 6.
