Editor Configuration

📘

Examples available

https://github.com/claspo/claspo-plugin-examples


Editor bootstrap and destroy

  1. Load the main editor script located at EDITOR_SCRIPTS_URL/activator.js
  2. After the activator script was loaded, call window['ClaspoEditor'].init(config, successCallback, errorCallback) to bootstrap editor
  3. 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

NameDescription
initDescribed below
destroyCleans resources
cancelIt acts as a click on the Cancel button in the editor
saveIt acts as a click on the Save button in the editor

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