How to connect to your API

Several editor features (autosaving drafts, loading product feeds, uploading images, and more) call your own backend, and you point them at it through the api option in TOPOL_OPTIONS.

The diagram below shows how that communication is wired.

How to set this up

Each key in the api object maps a feature to one of your endpoint URLs. Provide only the keys for the features you use.

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",

    SAVED_SECTIONS: "https://your-domain.com/saved-blocks",
  },
};

Important notes

• Requests from inside the editor originate from https://v3.email-assets.topol.io, so your server has to allow that origin to avoid CORS errors.

• Each URL is called as given. A few endpoints have a resource key or ID appended to the path (for example GET_AUTOSAVE becomes .../get-autosave/{key} and a single premade template is fetched at .../premade-templates/{id}), but the base URL is otherwise used verbatim.

• The endpoint names above are only examples, so name your routes however you like.

The relevant sections have more detail:

• Autosaves

• Products and Feeds

• Self-hosted storage

• Custom AI

• Premade templates

• Saved blocks

Securing the endpoints

To put your endpoints behind token-based access, attach an authorization header with the apiAuthorizationHeader option:

  apiAuthorizationHeader: "Bearer your-secret-token",

The header is added to the requests aimed at your api endpoints (not to Topol's own backend calls). The object form accepts custom header names and more than one header. See the API authorization section for the full set of options.