Topol Documentation

Appearance

Getting started ​

Step 1. Create API token ​

In your Topol Account go to Settings -> Plugin and create an API token.

API key

As token name, you can set any name (usually the name of your project). As a token domain, you have set the domain where you want to run our plugin, examples:

topol.io
www.topol.io
*.topol.io
localhost:563295

The API key is always connected with given domains and will not work on a different domain.

Step 2. Add necessary code ​

INFO

TIP: We provide integration packages for frontend frameworks. Find out more here.

Once you get your API key, first, insert this HTML within your application:

html
<div id="app" style="position: absolute; width: 100%; height: 100%;"></div>

This is where the plugin will be displayed. (It's important to set an explicit height and width for the element, otherwise the height and width of the div could be too small for the TOPOL.io builder.)

apiKey - API token acquired in step 1
userId - UserId is ID of your user (you will not find it in our app, just use any ID you want). UserID is an alphanumeric string (it can contain letters, numbers, _ or -) and it identifies the unique user of Your app and allows the plugin to load resources for that user (e.g. images). It will be counted as a unique user for monthly billing purposes. Usually, 1 user corresponds to one client of your app, CRM, ESP, etc.

Then, insert this within your file with plugin implementation:

html
<!-- Import Editor Loader -->
<script
  src="https://d5aoblv5p04cg.cloudfront.net/editor-3/loader/build.js"
  type="text/javascript"
></script>

<!-- Define Plugin Options -->
<script>
  const TOPOL_OPTIONS = {
    id: "#app",
    authorize: {
      apiKey: "YOUR_API_KEY",
      userId: "UserID",
    },
    callbacks: {
      onSave: function (json, html) {
        //work with JSON and HTML
      },
    },
  };

  TopolPlugin.init(TOPOL_OPTIONS);

  fetch("https://tlapi.github.io/topol-editor/templates/1.json")
    .then((response) => response.text())
    .then((template) => {
      //Load the template in Editor
      TopolPlugin.load(template);
    });
</script>