---
title: "Integration with external image storage | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/external-storage/"
---

# Integration with external image storage

> You can integrate the Handy Editor with an external image storage service implemented as a web service. This allows you to extend the editor's functionality by connecting your own storage for managing images.

## Example implementation

For clarity and ease of development, a public repository is available, providing an example implementation of an external image server:

https://github.com/aurigma/CCHub-ExternalImageService-PHP-Sample

The repository also includes [documentation](https://github.com/aurigma/CCHub-ExternalImageService-PHP-Sample/blob/master/Documentation.md), which details the features and setup of the service.

## Configuration

To work with an external image storage service, add the service URL and access token to the [`integration`](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/initialization.md#creating-the-integration-object) configuration. Additionally, you must enable this image source in the asset library to  display it in the UI.

```js
{
  // ...
  "integration": {
    // ... Other integration settings
    "externalImageStorage": {
      "url": "https://api.external-storage.url",
      "token": "access_token_for_external_storage"
    }
  },
  "settings": {
    "assetLibrary": {
      "externalImageStorage": {
        "enabled": true
      }
    }
  }
}
```

If the external storage supports file uploads, uploads will use the parameters defined in the [`settings.imageUploader`](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/settings.md#imageuploader) object.

## Updating the token

To update the token for accessing the external storage, you can call the `update()` method on the [web component](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/web-component-api.md) with a partial configuration:

```js
handyEditor.update({
  "integration": {
    "externalImageStorage": {
      "token": "new_access_token_for_external_storage"
    }
  }
});
```

## User interface

Since the external storage may implement various functionalities, you might need to rename the displayed name in the asset library panel.

You can override the displayed name using localization settings with the key `assetLibrary.externalStorage.headerLabel`. By default, this key has the value **Images** in the English localization.

```js
{
    localization: {
        language: "en",
        data: {
            "en": {
                "assetLibrary.externalStorage.headerLabel": "Remote Images"
            }
        }
    }
}
```