---
title: "Working with API"
description: "Learn how to work with API endpoints. Certain actions within the various features of the Editor plugin require the use of a custom API."
url: https://docs.topol.io/email-editor/guide/how-to-work-with-your-api.html
---

# 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.

![Diagram of connecting the Topol editor to your API](https://docs.topol.io/api-light.png)

## 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.

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

    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](https://docs.topol.io/email-editor/guide/autosaves.html)

-   [Products and Feeds](https://docs.topol.io/email-editor/guide/products.html)

-   [Self-hosted storage](https://docs.topol.io/email-editor/guide/self-hosted-storage.html)

-   [Custom AI](https://docs.topol.io/email-editor/guide/custom-ai.html)

-   [Premade templates](https://docs.topol.io/email-editor/guide/premade-templates-in-editor.html)

-   [Saved blocks](https://docs.topol.io/email-editor/guide/saved-blocks.html)


## Securing the endpoints

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

```ts
  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](https://docs.topol.io/email-editor/guide/security.html) for the full set of options.