Editor Configuration
Examples available
Editor bootstrap and destroy
- Load the main editor script located at
EDITOR_SCRIPTS_URL/activator.js - After the activator script was loaded, call
window['ClaspoEditor'].init(config, successCallback, errorCallback)to bootstrap editor - When the user closes the editor, call
window['ClaspoEditor'].destroy()
const script = document.createElement('script');
script.src = 'EDITOR_SCRIPTS_URL/activator.js';
script.onload = () => {
window['ClaspoEditor'].init(
config,
() => console.log("editor loaded"),
() => console.log("editor wasn't loaded"),
);
};
document.body.appendChild(script);
Editor instance methods
| Name | Description |
|---|---|
| init | Described below |
| destroy | Cleans resources |
| cancel | It acts as a click on the Cancel button in the editor |
| save | It acts as a click on the Save button in the editor |
init config
init config| Property name | Type | Required | Description | Default |
|---|---|---|---|---|
| containerElement | HTMLElement | string | Yes | HTML element or CSS selector where the editor is embedded. Editors takes full width and full height of the element. It’s important to set a size of the element before editor initialization. Editor calculates actual element size and based on that it will calculate the size of it’s blocks. | |
| editorScriptsUrl | string | Yes | EDITOR_SCRIPTS_URL. A trailing slash is required. | |
| staticResourcesUrl | string | Yes | STATIC_RESOURCES_URL. A trailing slash is required. | |
| getWidgetDataCallback | See Appearance Management page | Yes | Loads initial data for editor | |
| saveWidgetDataCallback | See Appearance Management page | Yes | The function is called when the user clicks the "Save" button. | |
| api | See Images API page | Yes | The editor can request data at runtime. To do so, it calls the corresponding API method. | |
| theme | See Theme page | No | Claspo theme | |
| initialLoadErrorCallback | (httpResponseStatus: boolean) => void | No | This function will be called if any initial request, such as user info or appearance, fails. If the parameter is absent, the UI will show the default initial load error. | |
| countryCode | string | No | When the user adds a SysPhoneInputComponent to the widget, control.countryCode is set to config.countryCode | UA |
| previewEnv | "DESKTOP" | "MOBILE" | No | Sets default env for viewport | "DESKTOP" |
| logo | { imageUrl: string; link?: string;} | No | Adds logo in the top left corner | |
| localePatch | { [key: string]: { [key: string]: string } } | No | Overrides translations of keys for the specified languages. Example: { 'WIDGET_TYPE_FLOATING_BOX': { 'en': 'Floating Box', 'ru': 'Плавающее окно', 'uk': 'Плаваюче вікно' } } | |
| selectedAppearanceId | number (id) | No | After the editor initialization, the corresponding appearance can be shown instead of the origin one. | |
| hideSaveOptionsMenu | boolean | No | Shows only the "Save" button instead of a menu with several options. | false |
| closeEditorCallback | (variant: WidgetVariantI) => void | No | It's called when the user clicks the "Close" button. | console.log will be called |
| afterSavedCallback | (variant: WidgetVariantI) => void | No | It’s called after saveWidgetDataCallback finished successfully | console.log will be called |
| notificationHandlers | { success: (message: string) => void; info: (message: string) => void; warning: (message: string) => void; error: (message: string) => void; hide: () => void; } | No | console.log will be called | |
| navigateToWidgetCallback | (widget: WidgetsListItemI) => void | No | It's called when the user clicks the "Open widget" button in "Action on click" > "Launch the widget". | console.log will be called |
| trackUserActivityCallback | (key: string, params: string) => void | No | Allows user activity tracking | |
| showChatMessageCallback | (message: string) => void | No | Currently, it is used in the components panel to notify the integrator app that a message needs to be shown in support chat like Intercom. | |
| actionOptions | { availableClickActions?: ClDocumentActionType[]; isDisplayingOpenLinkNewTabSwitch?: boolean; } | No | “isDisplayingOpenLinkNewTabSwitch” shows “Open in a new tab” option in “Open link” action | { isDisplayingOpenLinkNewTabSwitch: true, } |
| analyticsNotificationsEnabled | boolean | No | Shows - “Clicks on text links are not accounted for in Click and Conversion rates" message in text link dialog | true |
Updated 2 months ago