Topol Documentation

Appearance

How to Connect to Your API ​

Some features of the Topol editor need to talk to your own backend API. For example, saving drafts automatically, loading product feeds, or uploading images.

For a better understanding of the communication, refer to the diagram below:

How to Set This Up? ​

You tell the Topol Plugin where to find your API by providing the URLs for different actions inside the api option in the TOPOL_OPTIONS configuration.

Here’s an example setup:

ts
const TOPOL_OPTIONS = {
  id: "#app",
  authorize: {
    apiKey: "YOUR_API_KEY",
    userId: "YOUR_USER_ID",
  },

  api: {
    GET_AUTOSAVE: "https://your-domain.com/get-autosave",
    AUTOSAVES: "https://your-domain.com/autosaves",
    AUTOSAVE: "https://your-domain.com/autosave",

    FEEDS: "https://your-domain.com/feeds",
    PRODUCTS: "https://your-domain.com/products",

    FOLDERS: "https://your-domain.com/folders",
    IMAGE_UPLOAD: "https://your-domain.com/image-upload",
    IMAGE_EDITOR_UPLOAD: "https://your-domain.com/image-editor-upload",

    GENERATE_TEXT: "https://your-domain.com/generate-text",
    GENERATE_PREHEADER: "https://your-domain.com/generate-preheader",

    PREMADE_TEMPLATES: "https://your-domain.com/premade-templates",
    PREMADE_TEMPLATE_CATEGORIES: "https://your-domain.com/premade-templates-categories",
    PREMADE_TEMPLATES_KEYWORDS: "https://your-domain.com/premade-templates-keywords",
  },
};

​

  • You must allow requests from the Topol server (d5aoblv5p04cg.cloudfront.net) on your server to avoid CORS (cross-origin) issues.

  • Because the editor runs inside an iframe, some modern JavaScript features like Promises can’t be used internally, so your endpoints need to respond accordingly.

  • The URLs above are just examples — you can name your endpoints whatever you want.

  • Topol will automatically add the specific endpoint name to the URLs you provide when making requests.

You can find more details in the relevant sections:

Securing the Endpoints ​

You can add custom headers like authorization tokens by adding this line in your TOPOL_OPTIONS:

ts
  apiAuthorizationHeader: "Bearer your-secret-token",

This helps make sure only authorized users or apps can access your API.

For more information and additional options for headers, refer to API authorization section.