Editor Configuration

📘
Examples available
https://github.com/claspo/claspo-plugin-examples

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

Property name	Type	Required	Description	Default
authToken	string	Yes	Authentication token for editor
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.
api	See HTTP 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	(payload: {status: number}) => 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	(payload: {variant: WidgetVariantI}) => void	No	It's called when the user clicks the "Close" button.	`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	(payload: {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	(payload: {key: string, params: string}) => void	No	Allows user activity tracking
showChatMessageCallback	(payload: {message: string}) => void	No	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
useContactFields	boolean	No	Contact Fields Mapping	false
defaultAsyncPattern	string	No	PROMISE or OBSERVABLE	PROMISE
availableComponentsPanel	See Description page	No	Customizes the left panel from which you can drag and drop components into the editor	See Description page
bundledComponentClasses	Class[]	No	An optional array of pre-loaded JavaScript component classes that can be passed to the editor to optimize performance. When provided, the editor uses these bundled classes instead of loading them from the network. This is particularly useful when the same components are used in static widget previews, allowing integrators to import classes directly into their bundle and pass them to the editor, reducing network requests and improving load times	These components are included by default based on usage analytics and load frequency analysis. We identified the most commonly used components across all widgets and pre-bundled the top performers to ensure optimal performance for typical use cases: SysTextComponent, SysContainerComponent, SysColumnsComponent, SysColumnComponent, SysImageComponent, SysInputComponent, and SysButtonComponent.

Updated 8 days ago