# Quick start

> **Note**
>
> CKBox is a commercial product and you need to [obtain a license](https://ckeditor.com/pricing/#plan-ckbox) to use it.
>
> If you wish to test it, you can create an account by [signing up for CKEditor Premium Features 14-day free trial](https://portal.ckeditor.com/checkout?plan=free), commitment-free.

In this guide, you will find the quickest and easiest way to run ready-to-use CKBox application. Please refer to [Integrations section](integrations/frameworks/other.md) to check how CKBox can be integrated using `npm` with popular JavaScript frameworks.

<a id="cdn">

## CDN

Using a build served from the CDN is the simplest and fastest 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, shortening the response time.

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 implementation 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>
			// 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/latest/guides/configuration/authentication.html#token-endpoint
			CKBox.mount(document.getElementById('ckbox'), {
				tokenUrl: 'https://your.token.url'
			});
		</script>
	</body>
</html>
```

> **Note**
>
> Please refer to our repo with examples for full [code sample](https://github.com/ckbox-io/ckbox-examples/tree/main/umd).

<a id="integration-with-ckeditor">

## Integration with CKEditor

> **Note**
>
> The integration example presented below presents only a limited set of CKEditor features. To see an integration with a full-featured editor, please refer to the [CKEditor integration](../examples/ckeditor-integration.md) example.

The code snippet below presents the simplest scenario of integration of CKEditor and CKBox. To read more about the integration, please refer to the [CKEditor integration](configuration/ckeditor-integration.md) guide.

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<script src="https://cdn.ckeditor.com/ckeditor5/48.5.2/ckeditor5.umd.js"></script>
		<script src="https://cdn.ckbox.io/ckbox/2.13.1/ckbox.js"></script>
		<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/48.5.2/ckeditor5.css" />
		<link rel="stylesheet" href="https://cdn.ckbox.io/ckbox/2.13.1/styles/themes/lark.css">
	</head>
	<body>
		<div id="editor"></div>

		<script>
			const {
				ClassicEditor,
				Essentials,
				CKBox,
				CKBoxImageEdit,
				PictureEditing,
				ImageUpload,
				Heading,
				Bold,
				Italic,
				BlockQuote,
				Indent,
				Link,
				List
			} = CKEDITOR;

			ClassicEditor
				.create( {
					attachTo: document.querySelector( '#editor' ),
					licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
					plugins: [
						ClassicEditor,
						CKBox,
						Bold,
						CloudServices,
						Essentials,
						Font,
						Image,
						ImageUploadEditing,
						ImageUploadProgress,
						Italic,
						LinkEditing,
						Paragraph,
						PictureEditing
					],
					ckbox: {
						tokenUrl: 'https://your.token.url',
						theme: 'lark'
					},
					toolbar: [
						'ckbox', '|', 'undo', 'redo', '|', 'bold', 'italic', '|',
						'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
					],
				} )
				.catch( error => {
					console.error( error );
				} );
		</script>
	</body>
</html>
```

The sample below presents the result of the integration. Try pasting images from clipboard directly into the editing area as well as dropping images — the files will be saved on the fly by CKBox.

You can use the toolbar button to open the CKBox dialog window. There you can manage your files or choose an asset that should be added to the edited content. The image embedded in the editor this way will produce a highly optimized `<picture>` tag. If the image has a description set in its properties in CKBox, the description will be automatically used as an `alt` attribute of the image embedded in the editor.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

> **Note**
>
> All the samples in this documentation use a demo environment of CKBox that is periodically cleared. Do not try to use it in your application, otherwise the uploaded files will be permanently deleted.

> **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)
