Skip to main content
Platform:
Language:

Use of Emojis in Text

Text blocks in CE.SDK support the use of emojis. A default emoji font is used to render these independently from the target platform. This guide shows how to change the default font and use emojis in text blocks.

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

Setup#

This example uses the headless CreativeEngine. See the Setup article for a detailed guide. To get started right away, you can also access the block API within a running CE.SDK instance via cesdk.engine.block. Check out the APIs Overview to see that illustrated in more detail.

Change the Default Emoji Font#

The default front URI can be changed when another emoji font should be used or when the font should be served from another website, a content delivery network (CDN), or a file path. The preset is to use the NotoColorEmoji font loaded from our CDN. This font file supports a wide variety of Emojis and is licensed under the Open Font License.

In order to change the URI, call the setSettingString(keypath: string, value: string) Editor API with 'defaultEmojiFontFileUri' as keypath and the new URI as value.

Add a Text Block with an Emoji#

To add a text block with an emoji, add a text block and set the emoji as text content.

File:
import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.16.1/index.js';
const config = {
baseURL:
'https://cdn.img.ly/packages/imgly/cesdk-engine/1.16.1/assets'
};
CreativeEngine.init(config).then(async (engine) => {
document.getElementById('cesdk_container').append(engine.element);
let uri = engine.editor.getSettingString('ubq://defaultEmojiFontFileUri');
// From a bundle
engine.editor.setSettingString(
'ubq://defaultEmojiFontFileUri',
'bundle://ly.img.cesdk/fonts/NotoColorEmoji.ttf'
);
// From a URL
engine.editor.setSettingString(
'ubq://defaultEmojiFontFileUri',
'https://cdn.img.ly/assets/v1/emoji/NotoColorEmoji.ttf'
);
const scene = engine.scene.create();
const page = engine.block.create('page');
engine.block.setWidth(page, 800);
engine.block.setHeight(page, 600);
engine.block.appendChild(scene, page);
engine.scene.zoomToBlock(page, 40, 40, 40, 40);
const text = engine.block.create('text');
engine.block.setString(text, 'text/text', 'Text with an emoji 🧐');
engine.block.setWidthMode(text, 'Auto');
engine.block.setHeightMode(text, 'Auto');
engine.block.appendChild(page, text);
});