# Changing the language

The language of the CKBox UI can be changed using the [`language`](../../guides/configuration/configuration-options.md#language) configuration option.

In the example below, CKBox is configured to use Spanish.

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

<a id="ckeditor-integration">

## CKEditor integration

If you are integrating CKBox with CKEditor, please have a look at the example below, which sets the language to Spanish for both, CKEditor and CKBox simultaneously.\
To read more about the integration between CKEditor and CKBox, please refer to the [CKEditor integration guide](../../guides/configuration/ckeditor-integration.md).

```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.ckeditor.com/ckeditor5/48.5.2/translations/es.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,
				BlockQuote,
				Bold,
				CKBox,
				CloudServices,
				Essentials,
				Heading,
				Image,
				ImageUpload,
				Indent,
				IndentBlock,
				Italic,
				Link,
				List,
				Paragraph,
				PictureEditing
			} = CKEDITOR;

			ClassicEditor
				.create( {
					attachTo: document.querySelector( '#editor' ),
					ckbox: {
						tokenUrl: 'https://your.token.url'
					},
					licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
					plugins: [
						CKBox, Essentials, Bold, Italic, Heading, Paragraph, ImageUpload,
						CloudServices, PictureEditing, Link, Image, List, BlockQuote, Indent, IndentBlock
					],
					language: 'es',
					toolbar: [
						'ckbox', 'imageUpload', '|',
						'heading', '|',
						'undo', 'redo', '|',
						'bold', 'italic', '|',
						'blockQuote', 'indent', 'link', '|',
						'bulletedList', 'numberedList'
					],
				} )
				.catch( error => {
					console.error( error );
				} );
		</script>
		<script>
			ClassicEditor
				.create( {
					attachTo: document.querySelector( '#editor' ),
					language: 'es',
					ckbox: {
						tokenUrl: 'https://your.token.url'
					},
					toolbar: [
						'ckbox', '|',
						'undo', 'redo', '|',
						'imageUpload', '|',
						'heading', '|',
						'bold', 'italic'
					]
				} )
				.catch( error => {
					console.error( error );
				} );
		</script>
	</body>
</html>
```

As you can see in the example above, the `language` option for CKBox was omitted. This was intentional because by default the language of CKBox will match the language of CKEditor, which has been already set to Spanish. Setting language again in `ckbox.language` would be superfluous in this case.

Below you can see a live example of the configuration presented above.

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