Skip to main content
Language:

Adding and Using Variables

The CreativeEditor SDK can be configured to offer a set of variables that can then be used by users during text editing.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

Added variables are directly accessible from the text canvas actions:



Configuring Custom Variables#

You can define your custom variables in the configuration under variables. The keys of this object should be i18n localization keys and the contained items of the following structure:

  • value: string describes the value to insert into the text when using this variable.

Localizing Variable Keys#

You can show localized labels for the registered variables to your users by adding a corresponding label property to the object stored at i18n.<language>.variables.<key>.label. Otherwise, the key used in variables will be shown.

File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.9.0/cesdk.umd.js';
let config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.9.0/assets',
variables: {
my_custom_variable: {
value: 'IMG.LY'
}
},
i18n: {
en: {
'variables.my_custom_variable.label': 'My Variable'
}
}
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
});