initial content
", dialogButtonText: "Open Custom Dialog", disabled: false } ] ``` A dialog-style custom block needs the `onOpenCustomBlockDialog` callback. Like all callbacks, it is passed as a top-level property next to `config`: ```typescript const LPE = LandingPageEditor({ config: TOPOL_OPTIONS, onOpenCustomBlockDialog({ block }) { // open your own dialog UI here console.log("Custom block dialog requested:", block); }, }); ``` > **WARNING** > > There is currently no public method to push edited content back into the custom block from your dialog. ## `contentBlocks` The `contentBlocks` option (`object`, optional) controls which block types appear in the Elements panel, and whether they are disabled. It is an object keyed by block type; valid keys are `text`, `image`, `gif`, `button`, `divider`, `spacer`, `social`, `video`, `form`, `html`, `raw`, and `custom-raw`. Each entry accepts: - `hidden` (`boolean`): removes the block from the Elements panel entirely. - `disabled` (`boolean`): keeps the block visible but not usable. - `disabledText` (`string`): tooltip text shown on a disabled block. - `disabledBadge` (`string`): badge label shown on a disabled block (e.g. `"PRO"`). ```typescript { contentBlocks: { html: { hidden: true }, form: { disabled: true, disabledText: "Upgrade to use forms", disabledBadge: "PRO" } } } ``` When `contentBlocks` is not set, all block types are available. The `disabled` variant is useful for upsell flows, where a block advertises a higher plan instead of vanishing. ## API Integration for Saved Blocks Saved blocks and synced sections are stored on your server, with support for folders, search, pagination, and preview images. Enable the features and point `api.SAVED_SECTIONS` at your backend: ```typescript const TOPOL_OPTIONS = { savedBlocks: true, syncedSectionsEnabled: true, api: { SAVED_SECTIONS: "https://your-domain.com/saved-blocks" } }; ``` Both features share the single `api.SAVED_SECTIONS` endpoint and are differentiated by the `type` field in requests and responses, which is one of `saved_section`, `synced_section`, or `folder`. In the URLs below, `{API.SAVED_SECTIONS}` stands for the base URL you configured. > **WARNING** > > Before implementing the endpoints, check [how to work with API endpoints](https://docs.topol.io/landing-page-editor/guide/api.html). ### List Saved Blocks, Synced Sections and Folders - URL: `/{API.SAVED_SECTIONS}` - Method: `GET` - Content-Type: `application/json` **Params:** | key | value | required | | --- | --- | --- | | key | authorization api key | true | | hostname | hostname | true | | entity\_id | entity\_id corresponds to userId in Options | true | | per\_page | number of items per page | false | | current\_page | number of page to return | false | | sort\_by | "name" or "date" or "type" | false | | desc | "true" | false | | folder\_id | id of folder to return | false | | search | string to search | false | | type | "saved\_section" or "synced\_section" to filter by type | false | This endpoint is called when the editor lists all saved blocks/synced sections, changes sort, page or folder, searches by string, or whenever `LPE.refreshSyncedSections()` is called on the editor instance. **Response:** ```json { "success": true, "data": { "data": [ { "id": 1, "name": "name of saved block, synced section, or folder", "type": "saved_section", "created_at": "ISO 8601 time", "definition": { "tagName": "mj-section", "children": ["..."] }, "image": "https://url-to-preview-image.jpg", "folder_id": 2 } ], "lastPage": 5, "parentFolderId": null } } ``` In all saved-sections payloads, `definition` is the section JSON as an object (or an array of section objects), not a serialized string. ### Create Saved Block, Synced Section or Folder - URL: `/{API.SAVED_SECTIONS}` - Method: `POST` This endpoint is called when a new saved block, synced section, or folder is created. **Request:** ```json { "entity_id": "entity user_id", "hostname": "origin", "key": "api key", "type": "saved_section", "name": "name of new item", "definition": { "tagName": "mj-section", "children": ["..."] }, "folder_id": 1 } ``` **Response:** ```json { "success": true, "data": { "id": 2, "name": "name of saved block, synced section, or folder", "type": "saved_section", "created_at": "ISO 8601 time", "definition": { "tagName": "mj-section", "children": ["..."] }, "folder_id": 1 } } ``` ### Get Synced Section Detail - URL: `/{API.SAVED_SECTIONS}/{id}` - Method: `GET` - Params: `key`, `hostname`, `entity_id` This endpoint is called only for **synced sections**: when a synced section is inserted into a template, and when a template containing synced sections is refreshed so the latest content is displayed. Regular saved blocks are inserted from the listing data and never hit this endpoint. **Response:** ```json { "success": true, "data": { "id": 1, "name": "name of the synced section", "type": "synced_section", "created_at": "ISO 8601 time", "definition": { "tagName": "mj-section", "children": ["..."] }, "folder_id": 2 } } ``` The response's `type` must be exactly `"synced_section"`, and `success` must be `true`. If either is missing, the editor treats the section as missing and drops it from the page instead of reporting an error, so this is worth checking first when synced sections disappear on load. ### Edit Saved Block, Synced Section or Folder - URL: `/{API.SAVED_SECTIONS}/{id}` - Method: `PATCH` This endpoint is called when editing the name, content, or folder location of a saved block, synced section, or folder. **Request:** ```json { "entity_id": "entity user_id", "hostname": "origin", "key": "api key", "folder_id": 1, "definition": { "tagName": "mj-section", "children": ["..."] }, "name": "edited name" } ``` **Response:** HTTP `200 OK` ### Delete Saved Blocks, Synced Sections or Folders - URL: `/{API.SAVED_SECTIONS}/delete` - Method: `POST` This endpoint is called when the user deletes saved blocks, synced sections, or folders. For synced sections, the last loaded version remains in templates where it was used. **Request:** ```json { "entity_id": "entity user_id", "hostname": "origin", "key": "api key", "blocksToDelete": [1, 2, 3] } ``` **Response:** HTTP `200 OK` ### Refresh Synced Sections Call `refreshSyncedSections` on the editor instance to update the synced sections listing and reload the template with the latest changes: ```js const LPE = LandingPageEditor({ config: TOPOL_OPTIONS }); LPE.render("#landing-page-editor"); // later, e.g. when another user changed a synced section: LPE.refreshSyncedSections(); ``` This matters when multiple users work in the editor simultaneously: when someone else creates, edits, or deletes a synced section, calling this function keeps the current view up to date. ## Premade Templates API The premade template library is served by three endpoints, which default to Topol's own collection on `app.topol.io` and can be repointed at your backend through the [`api` option](https://docs.topol.io/landing-page-editor/guide/api.html): | Endpoint key | Serves | | --- | --- | | `PREMADE_TEMPLATES` | The template listing, and one template's full detail at `{PREMADE_TEMPLATES}/{id}` | | `PREMADE_TEMPLATE_CATEGORIES` | The categories offered as filters | | `PREMADE_TEMPLATES_KEYWORDS` | The keywords offered as filters | The listing is a `GET` with `per_page` and `current_page` query parameters, plus `search`, `categories`, and `keywords` when the user filters. Both the listing and the detail must answer with a `{ "success": true, "data": ... }` envelope; a missing or falsy `success` is reported to the user as a fetch failure. When the URL points at `app.topol.io`, the editor authenticates with your Public API key: ```json { "accept": "application/json", "Authorization": "Bearer