@creaditor/starter-kit-editor

Creaditor 3 - API Documentation

Welcome to the Creaditor API documentation! This guide will help you seamlessly connect your Creaditor sites with the everyday tools you rely on, enabling you to create powerful workflows within seconds.

Getting Started

Learn how to initiate your first API requests using the Creaditor API and unlock its potential for your projects.

Authorization

To ensure secure communication, the Creaditor API employs bearer tokens for request authorization from integrations. As a developer working on integrations, it's crucial to select the appropriate integration type for the specific integration you're creating. Depending on the chosen integration type, the process of receiving and storing bearer tokens may differ. However, for both integration types, the integration is required to include the bearer token in the HTTP Authorization request header. The following example illustrates this:

GET /v1/sites/81db384d452b81dbd1ef79 HTTP/1.1
Authorization: Bearer {TOKEN}

Registering a New Client on Creaditor API

Register new Client [POST] - [https://api.creaditor.ai/v1/auth/registerClient]

You have the capability to create your own clients by utilizing this action. This process involves sending a JSON object that includes a unique user_id, secret, and domain.

• Request (application/json)

  {
  "userId":"any-string",
  "role":"user" | "admin"
  }

• Response 200 (application/json)

  • Body

  {
      "user": {
          "role": "user",
          "user_id": "12345",
          "domain": "yourdomain.com",
          "auth": "...",
          "id": "61f6a2a83a4ba348f5e0f3d1"
      },
      "tokens": {
          "access": {
              "token": "...",
              "expires": "2022-01-30T15:07:28.684Z"
          },
          "refresh": {
              "token": "...",
              "expires": "2022-03-01T14:37:28.685Z"
          }
      }
  }

User Authentication and Token Management

Login [POST] - [https://api.creaditor.ai/v1/auth/loginClient]

This action facilitates the authentication process for clients. To proceed, provide the following information in the request:

• Request (application/json)

  {
      "userId": "your-user-id",
      "userSecret": "...",
      "domain": "your-domain-name"
  }

• Response 200 (application/json)

  • Body (application/json)

  {
      "user": {
          "role": "user",
          "user_id": "Adil123",
          "domain": "sendmsg",
          "client_id": "67f31a7024e1b4fd038b4449fac5bad6650b875de7265ca2887a95fa36af5e9df65ba8584aa7fc40b2be399ced150dc0cdb772647de183c571935f12097eab14",
          "id": "61f6a2a83a4ba348f5e0f3d1"
      },
      "tokens": {
          "access": {
              "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2MWY2YTJhODNhNGJhMzQ4ZjVlMGYzZDEiLCJpYXQiOjE2NDM1NTM0NDgsImV4cCI6MTY0MzU1NTI0OCwidHlwZSI6ImFjY2VzcyJ9.pNkVaWbfXReuUUt1ChD_sstpVVmU_zs0QkosAx7m1vY",
              "expires": "2022-01-30T15:07:28.684Z"
          },
          "refresh": {
              "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2MWY2YTJhODNhNGJhMzQ4ZjVlMGYzZDEiLCJpYXQiOjE2NDM1NTM0NDgsImV4cCI6MTY0NjE0NTQ0OCwidHlwZSI6InJlZnJlc2gifQ.hYC1oBbyJTMDPugNoSSqI-N5gD6PNpxxbdEe0gikd0o",
              "expires": "2022-03-01T14:37:28.685Z"
          }
      }
  }

Refresh Token [POST] - [https://api.creaditor.ai/v1/auth/refresh-tokens]

This action allows refreshing of authentication tokens. The request requires the refreshToken:

• Request (application/json)

  {
      "refreshToken": "..."
  }

• Response 200 (application/json)

  • Body (application/json)

  {
      "tokens": {
          "access": {
              "token": "...",
              "expires": "2022-01-30T15:07:28.684Z"
          },
          "refresh": {
              "token": "...",
              "expires": "2022-03-01T14:37:28.685Z"
          }
      }
  }

User Management [https://api.creaditor.ai/v1/users] - Admin Only

Get User [GET]

Get User Example: [https://api.creaditor.ai/v1/users/{objectID}]

Using Filters

Example: [https://api.creaditor.ai/v1/users/?userId={userId}&limit=1] Filters: ['name', 'userId', 'role'] Options: [sortBy, limit, page]

Filters

• SortBy - Sorting criteria using the format: sortField:(desc|asc). Multiple sorting criteria should be separated by commas (,)
• limit - Maximum number of results per page (default = 10)
• page - Current page (default = 1)

Fonts Management [https://api.creaditor.ai/v1/fonts]

Get Font [GET]

Add Font [POST]

BODY:

{
    "name": "any font name",
    "cssRule": "'name', fallback",
    "url": "https://fonts.googleapis.com/css2?family=fontname&display=swap",
    "language": ["he", "en"]
}

Site Management on Creaditor API

Sites [https://api.creaditor.ai/v1/sites]

PUBLISH []

Publish your site using: [https://api.creaditor.ai/v1/sites/publish/{siteID}]

Upon publication, you will benefit from:

• A visually appealing thumbnail of the site.
• Optimized external media for improved performance.
• Comprehensive hot statistics.
• And more...

Render Site [POST]

Render Site Example: [https://api.creaditor.ai/v1/sites/render]

{
    "siteId": "62dfab37bfde1b89c8f34f2b",
    "footer": {
        "dangerouslySetHTML": "<h1>hello world</h1>"
    }
}

Get Site [GET]

Retrieve Site Example: [https://api.creaditor.ai/v1/sites/{siteID}]

Create Site [POST]

{
    "name": "new page",
    "components": [
        {
            "type": "tour-domain-name:component-name",
            "props": {
                "blogId": 1,
                "name": "blog name"
            }
        }
    ]
}

Using Filters

Example: [https://api.creaditor.ai/v1/sites/?name=pageName&alias=al550&sortBy=desc&limit=1]

Available filters: ['name', 'userId', 'siteRole', 'tags', 'isPublished', 'comments', 'allowed_users', 'language', 'alias', 'innerName', 'innerDescription', 'created_at']

Available options: [sortBy, limit, page, populate]

Filters

• SortBy: Sorting criteria using the format: sortField:(desc|asc). Multiple sorting criteria should be separated by commas (,)
• populate: Populating data fields. Hierarchy of fields should be separated by (.). Multiple populating criteria should be separated by commas (,)
• limit: Maximum number of results per page (default = 10)
• page: Current page (default = 1)

Edit Site [POST]

Retrieve Site for Editing: [https://api.creaditor.ai/v1/sites/editPage/{siteID}]

Delete Site [DELETE]

Delete Site Example: [https://api.creaditor.ai/v1/sites/{siteID}]

Patch Site [PATCH]

Patch Site Example: [https://api.creaditor.ai/v1/sites/{siteID}]

{
    "name": "string",
    "alias": "string",
    "innerName": "string",
    "innerDescription": "string",
    "category": "string",
    "language": "string",
    "tags": ["string"],
    "comments": ["string"],
    "domains": [{
        "name": "valid url",
        "isActive": true,
        "params": {
            "hello": "world"
        }
    }],
    "body": {
        "html": "string"
    },
    "head": {
        "html": "string"
    },
    "isPublished": true,
    "seo": {
        "description": "string",
        "isIndexed": true,
        "favicon": "string",
        "title": "string",
        "image": "string",
        "icons": [{
            "href": "string",
            "sizes": "string"
        }],
        "themeColor": "string",
        "type": "string",
        "keywords": ["string"],
        "url": "string"
    }
}

Duplicate Site [POST]

Duplicate Site Example: [https://api.creaditor.ai/v1/sites/duplicate/{siteID}]

{
    "duplicateToken": "f7b93477-365b-4e9f-a35d-a3770d762647",
    "name": "my duplicate site",
    "deepClone": false,
    "newOwnerUserId": "6230818ae41a4825c0403bdf",
    "transforms": [
        {
            "type": "button",
            "key": "text",
            "value": "wow, it works!",
            "exp": "\\[(.*?)\\]"
        }
    ]
}

• Header

Authorization: {your-token}

• Request (application/json)

  {
      "redirect": ""
  }

• Response (application/json)

  {
      "access": "...",
      "redirect": "example.com/?access=..."
  }

const config = {
    access: {...}
};
new Creaditor(config);

Creaditor Properties

Interface

siteId: string; // the page id.
access: string; // the access token from edit site.
language?: Language; //default is en.
theme?: Theme; // classic|light|dark
target?: Element; // dom element
onSave?: Function;
onChange?: Function;
onLoad?: Function;
onError?: Function;
onWarning?: Function; 
onUnauthorized?: Function; // what should be if the user is not authorized.
onNotFound?: Function; // what should be if the page is not found.

Create Site [POST]

• Header

Authorization: {your-token}

• Request (application/json)

  {
      "name": "My first Page",
      "language": "en"
  }

• Response (application/json)

  "allowed_users": [],
  "tags": [],
  "language": "he",
  "animations": [],
  "fonts": [],
  "name": "my first site",
  "duplicateToken": "...",
  "userId": "61f63aab76f4ce64ed985dd2",
  "created_at": "Sun Jan 30 2022 17:45:19",
  "rootComponent": "61f6b28f5e4da771061d8fb6",
  "id": "61f6b28f5e4da771061d8fb4"

Commands

const creaditor = new Creaditor();
creaditor.commands.snackbar("hello toast...!");

I want the creditor to work in my browser. how To Start ?

To get started with integrating and using the Creaditor API in your project, follow the provided code snippet and steps:

1. Begin by setting up the necessary configurations and connecting to the API. This includes obtaining the access token and required information.

const connectToAPI = () => {
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

    var urlencoded = new URLSearchParams();
    urlencoded.append("domain", "any-domain");
    urlencoded.append("userId", "this-is-for-tests");
    urlencoded.append("userSecret", "...");

    var requestOptions = {
        method: "POST",
        headers: myHeaders,
        body: urlencoded,
        redirect: "follow",
    };

    return fetch("http://api.creaditor.ai/v1/auth/loginClient", requestOptions)
        .then((response) => response.json());
};

// Call the connectToAPI function to obtain the access token
connectToAPI().then((results) => {
    // Replace 'YOUR_ACCESS_TOKEN' with the actual access token you obtained
    const accessToken = results.tokens.access.token;

    // Configure Creaditor
    const config = {
        user: {
            logo: "https://example.com/assets/logos/logo.png",
        },
        access: accessToken, // Access token from Creaditor API
        target: document.getElementById("root"), // DOM element to render Creaditor
        language: "en",
    };

    // Initialize Creaditor
    const creaditor = new Creaditor(config);
});

2. The connectToAPI() function handles the connection to the API and retrieves the access token.

3. After retrieving the necessary data, set up the requestOptions with the authorization header using the access token.

4. Make a fetch request to the appropriate endpoint to obtain the required data, such as the appId.

5. Upon receiving the response, configure the Creaditor instance using the retrieved data and the provided configurations.

6. Initialize the Creaditor instance by creating a new Creaditor object with the configured options.

With these steps, you'll be able to connect to the Creaditor API, obtain the required data, and set up the Creaditor instance for your application. After creating the Creaditor instance, you can expect the provided functionality to work as intended.