Predefined templates in editor

You can enable this opt-in feature simply by adding premadeTemplates: true inside Topol Options.

Now, when opening an editor without any template, user can choose between starting from scratch of pick predefined template.

When user clicks on "Start from predefined template", modal opens and user can choose from Topol predefined templates and is able to sort the templates by category, keywords and search for specific template topic.

Load custom premade templates

We support loading premade templates directly from custom API endpoints into the editor. This allows you to add fully customized templates to the premade template picker.

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

List templates

This endpoint is called when listing premade templates into the premade templates picker.

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

• 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

• 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

• 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"
    }
  ]
}