# Installation

> **Note**
>
> CKBox is a commercial product and to use it, you need to [obtain a license](https://ckeditor.com/pricing/#plan-ckbox).

CKBox is distributed as an npm package, Zip package, and CDN download. In this guide, you will find the quickest and easiest way to run ready-to-use CKBox application.\
Visit our [GitHub samples repo](https://github.com/ckbox-io/ckbox-examples) to explore more on how to integrate CKBox with your app.

<a id="cdn">

## CDN

Using a build served from the CDN is the simplest way of embedding CKBox in your application. Additionally, all the scripts served from the CDN are loaded faster, as they are hosted on multiple servers around the globe.

To start using CKBox on your website, embed the following `<script>` tag in the HTML of the page:

```html
<script src="https://cdn.ckbox.io/ckbox/2.13.1/ckbox.js"></script>
```

Quick example:

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<script src="https://cdn.ckbox.io/ckbox/2.13.1/ckbox.js"></script>
	</head>
	<body>
		<div id="ckbox"></div>
		<script>
			CKBox.mount(document.getElementById('ckbox'), {
				// You must provide a valid token URL in order to use the application
				// After registering to CKBox, the fastest way to try out CKBox is to use the development token endpoint:
				// https://ckeditor.com/docs/ckbox/2.13.1/guides/configuration/authentication.html#development-token-endpoint
				tokenUrl: 'https://your.token.url'
			});
		</script>
	</body>
</html>
```

<a id="npm">

## npm

To install CKBox as an NPM dependency, run:

```bash
npm install ckbox
```

Then you can instantiate CKBox in your code as shown below.

```js
import * as CKBox from 'ckbox';
import 'ckbox/dist/styles/ckbox.css';

CKBox.mount(document.querySelector('#ckbox'), {
	tokenUrl: 'https://your.token.url'
});
```

Check out our [code sample](https://github.com/ckbox-io/ckbox-examples/tree/main/esm) on how to use CKBox in your app.

<a id="zip-package">

## Zip package

[⬇ Download CKBox Zip package (`v2.13.1`)](https://download.ckbox.io/CKBox/ckbox_2.13.1.zip)

Unzip the package to the desired location and attach the `ckbox.js` script on your webpage.

Quick example:

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<script src="ckbox/ckbox.js"></script>
	</head>
	<body>
		<div id="ckbox"></div>
		<script>
			CKBox.mount(document.getElementById('ckbox'), {
				tokenUrl: 'https://your.token.url'
			});
		</script>
	</body>
</html>
```

The Zip package includes a preconfigured `index.html` that will work if you configure the `tokenUrl` option, which has been intentionally left empty.

<a id="uploader-widget">

## Uploader Widget

The CKBox Uploader Widget is a specialized component designed specifically for file uploads. It provides a streamlined interface focused on uploading files to your CKBox workspace.

<a id="cdn-installation-for-uploader-widget">

### CDN Installation for Uploader Widget

To use the uploader widget via CDN, include the same CKBox script and use the `mountUploaderWidget` method:

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<script src="https://cdn.ckbox.io/ckbox/2.13.1/ckbox.js"></script>
	</head>
	<body>
		<div id="uploader"></div>
		<script>
			CKBox.mountUploaderWidget(document.getElementById('uploader'), {
				tokenUrl: 'https://your.token.url',
				workspaceId: 'your-workspace-id',
				uploadCategoryId: 'your-category-id', // Optional
				uploadFolderId: 'your-folder-id', // Optional
				onUpload: (asset) => {
					console.log('File uploaded:', asset);
				}
			});
		</script>
	</body>
</html>
```

The uploader widget supports the same authentication methods as the main CKBox widget but focuses specifically on file upload functionality.

<a id="on-premises">

## On-premises

CKBox can also be installed on-premises. The backend part of the application is installed and run on the customer’s in-house servers and computing infrastructure, including a private cloud. It contains all the features of the CKBox file manager available in the SaaS version.

Please refer to the [CKBox On-premises Documentation](../../../cs/latest/onpremises/ckbox-onpremises/overview.md) to read about the system requirements, configuration and supported data storages.

> **Note**
>
> Need more functionality? [Take a survey](https://surveys.hotjar.com/1d72aefc-0073-416d-9e70-b773458881b4) and help us develop CKBox to suit your needs better!

---

Full index of the CKBox documentation: [llms.txt](../../llms.txt)
