Premade Templates in the Editor

The Premade Templates feature allows users to start from professionally designed templates instead of a blank canvas. This is a valuable enhancement to the user experience, enabling faster design, visual inspiration, and a more streamlined content creation workflow.

Enabling Premade templates

To activate the premade template picker, simply set the following option in your TOPOL_OPTIONS configuration:

premadeTemplates: true,

Once enabled, users who open the editor without loading a specific template will be presented with two options:

• Start from predefined template
• Design from scratch

Selecting the predefined template option opens a Premade Template Modal Picker directly inside the editor.

The Premade Template Modal Picker displays a selection of ready-made email templates provided by Topol. These templates are hosted by Topol and are immediately available to use without further configuration.

Additionally, the Premade templates picker offers features to filter templates by categories or keywords. These features are accessible only if you provide the appropriate API endpoints in your TOPOL_OPTIONS.api configuration for listing categories and/or listing keywords. If these endpoints are not configured, the filters will be hidden from the UI.

Load Custom Premade Templates

In addition to the default Topol templates, you can integrate your own custom template library using backend APIs. This allows you to deliver brand-specific or client-specific templates directly into the editor interface.

To do this, implement the following API endpoints.

WARNING

Before implementing the endpoints, check how to work with API endpoints.

List Templates

Called to retrieve a paginated list of available templates.

Request

• URL: /{API.PREMADE_TEMPLATES}
• Method: GET
• params:
  • per_page (integer) - number of templates per page (default: 25, min: 1)
  • current_page (integer) - page number (default: 1, min: 1)
  • categories (array) - keywords IDs to search for
  • keywords (array) - keywords IDs to search for
  • search (string) - search for templates by name

Expected Response:

{
  "success": true,
  "data": {
    "data": [
      {
        "id": 1,
        "name": "Example template",
        "type": "FREE",
        "img_thumb_url": "example.com/img-thumb-url",
        "category_id": 1,
        "description": "Example description",
        "keywords": [
          {
            "id": 1,
            "keyword": "marketing",
            "slug": "marketing",
            "created_at": "2023-01-01T00:00:00.000000Z",
            "updated_at": "2023-01-01T00:00:00.000000Z",
            "pivot": {
              "premade_template_id": 1,
              "premade_template_keyword_id": 1
            }
          }
        ],
        "created_at": "2023-01-01T00:00:00.000000Z",
        "updated_at": "2023-01-01T00:00:00.000000Z"
      }
    ],
    "total_records": 150,
    "current_page": 1,
    "per_page": 25,
    "next_page": 2,
    "prev_page": null,
    "last_page": 6
  }
}

List Template

Retrieves full content (HTML + JSON) of the selected template.

• URL: /{API.PREMADE_TEMPLATES}/{template-id}
• Method: GET

Response:

{
  "success": true,
  "data": {
    "id": 1,
    "name": "Example template",
    "type": "FREE",
    "html": "<b>example html </b>",
    "json": "{\"example\": \"json\"}",
    "category_id": null,
    "order": 1,
    "description": null,
    "visible": 1,
    "created_at": "2023-01-01T00:00:00.000000Z",
    "updated_at": "2023-01-01T00:00:00.000000Z",
    "image_path": "/img/templates/1.jpg",
    "image_thumb_path": "/img/templates/1_thumb.jpg",
    "category": null,
    "keywords": []
  }
}

List Categories

Calling this endpoint will enable a built-in feature for filtering templates by categories and populate it with relevant data.

• URL: /{API.PREMADE_TEMPLATE_CATEGORIES}
• Method: GET

Response:

Successful response will look like this:

{
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "Business",
      "value": "business"
    },
    {
      "id": 2,
      "name": "E-commerce",
      "value": "e-commerce"
    }
  ]
}

List Keywords

Calling this endpoint will enable a built-in feature for filtering templates by keywords and populate it with relevant data.

• URL: /{API.PREMADE_TEMPLATES_KEYWORDS}
• Method: GET

Response:

Successful response will look like this:

{
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "sale/discount",
      "value": "salediscount"
    },
    {
      "id": 2,
      "name": "autumn",
      "value": "autumn"
    }
  ]
}

Remove Template

Allows deleting a template from your custom source.

• URL: /{API.PREMADE_TEMPLATES}/{templateId}
• Method: DELETE

Expected response:

{
  "data":
    {
    "success": true
    }
}