API Guide

Welcome to Bluepic's API guide! This article will walk you through the steps to generate images from a template using our API. You'll learn how to set up a project in Bluepic EMBED, use the API view, and understand the different response types available.

Prerequisites

Before you begin, make sure you have:

Access to Bluepic STUDIO to create and manage templates.
Access to Bluepic EMBED to create and manage projects.
Basic knowledge of using APIs and working with cURL commands.

Step 1: Create a Template in Bluepic STUDIO

Start by creating a template in Bluepic STUDIO. This template will be the basis for the images generated through the API. Ensure that all variable input fields are properly configured, as these will be used when sending data through the API.

Step 2: Set Up a Project in Bluepic EMBED

Create a New Project:
- Log in to Bluepic EMBED.
- Create a new project and select the template you created in Bluepic STUDIO.
Access the API View:
- In the project editor, navigate to the API View. Here, you'll find a console with an example cURL command that you can use to generate images.

Step 3: Understand the cURL Command

Here is an example of a cURL command used to generate an image:

curl \
-XPOST \
'https://embed-backend.c2.bluepic.io/editor/export/p_c2338d5f-e1ec-4395-bd5c-f1a6beccbca4/66b2191f06da0c358687fd20?api=true' \
-H 'Content-Type: application/json' \
-H 'accept: application/octet-stream' \
-d '{"data":{"image1_src":"https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/223d2ddd-f461-4e21-243e-87ee3f360d00/public","rectangle1_fill":"#175463","text1_text":"Lorem ipsum dolor"},"width":1080,"height":1080}' \
-o 'render.png'

Key Components:

Request Method (-XPOST ): Indicates that this is a POST request.
URL: The URL specifies the project and template to be used for generating the image.
Headers:
- Content-Type: application/json : Indicates that the data sent in the request body is in JSON format.
- accept : Defines the response type. You can choose between:
  - application/octet-stream : Returns the generated image directly.
  - application/json : Returns a URL to the generated image in JSON format.
  - text/plain : Returns a URL to the generated image in plain text.
Data (-d ): Contains the input-key/value pairs that correspond to the variables in your template. For example:
- image1_src : The source URL for an image.
- rectangle1_fill : The color code for a rectangle fill.
- text1_text : The text to be displayed.
Output (-o render.png ): Specifies the name of the file where the generated image will be saved.

Step 4: Customize Your API Request

To generate different images, you'll need to modify the data object in the cURL command. The input-key values should match the variable names in your template. These can be viewed in Bluepic STUDIO under the Input Fields view.

Example:

If your template has variables named image1_src , rectangle1_fill , and text1_text , your data object should look like this:

{
    "data": {
      "image1_src": "https://example.com/image.png",
      "rectangle1_fill": "#ff5733",
      "text1_text": "Your custom text"
    },
    "width": 1080,
    "height": 1080
}

Step 5: Send the Request and Handle the Response

After configuring your cURL command, run it in your terminal or command prompt. Depending on the accept header you set, the response will either be the image itself or a URL pointing to the image.

If using application/octet-stream : The image will be saved directly as render.png .
If using application/json or text/plain : You'll receive a URL that you can use to access the image.

By following these steps, you should be able to generate images from templates using Bluepic's API. Remember to adjust the data object to fit the variables defined in your template, and choose the appropriate response type based on your needs.