All plans of our JavaScript video recorder API include a number of UI themes.

1) Enabling a theme in the Clipchamp plugin for WordPress

If you're using our WordPress plugin, you can enable a theme by selecting it in the Clipchamp plugin's settings in your WordPress admin backend under Settings --> Clipchamp --> Appearance --> Styling --> UI Theme. Make sure to click "Save changes" at the bottom of the screen as well.

 

2) Enabling a theme in the Clipchamp API outside of WordPress

If you're using the API without its WordPress plugin, you can select a theme by going into the 3rd step of the "Setup Wizard" in your API dashboard. When you log into your Clipchamp API account, you'll see the wizard as an option on the main page.

 

In the wizard, if you navigate to step III you'll see the new UI themes. In order to use one of them, select it and then copy the styling code from the code field underneath the theme selection box in the wizard (not part of the screenshot below).

 

Alternatively, you can copy the relevant code string per theme from the previews we included in this article (see below).

 

The user interface themes change the visual appearance of the recording and video uploading window that your users see when you embed the Clipchamp API on your website.

If you don't select a theme, the API's default UI style will be used.

Following is a preview of the 4 themes that are currently available including the code to add into the Clipchamp API script on your site if you'd like to use the respective theme.

Note that you can also insert your own logo and tagline in one of the themed UIs by modifying the logo and title parameters in your embedded Clipchamp code - please see our developer documentation for the details around these options.

 

Optional Theme 1 - Light

1) Code to copy into the Clipchamp script on your page

style: {url: "https://api.clipchamp.com/static/button/themes/modern-light.css"}


2) Theme preview

 

Optional Theme 2 - Dark

1) Code to copy into the Clipchamp script on your page

style: {url: "https://api.clipchamp.com/static/button/themes/modern-dark.css"}


2) Theme preview

 

 

Optional Theme 3 - Camera

1) Code to copy into the Clipchamp script on your page

style: {url: "https://api.clipchamp.com/static/button/themes/modern-camera.css"}


2) Theme preview

 

 

Optional Theme 4 - Education

1) Code to copy into the Clipchamp script on your page

style: {url: "https://api.clipchamp.com/static/button/themes/modern-education.css"}


2) Theme preview

 

 

Additional CSS, branding and styling options available in Business and Enterprise

If you're on the API's Business or Enterprise plan there are additional custom styling, branding and CSS options available that you can use to fully customize the appearance of the user-facing elements of your API instance. Please see the plan comparison on the API's pricing page or get in touch with us if you'd like to discuss your requirements, we're happy to assist.

Did this answer your question?