How to setup for the Configurable plan

In this page we will see how Photo and Video Editor SDK can be setup for the configurable plan.

Before we go forward, let's quickly go over the differences between the basic and configurable plans.

The highlight is that the basic plan is designed for an easy start and simple photo editing experiences. In contrast, the configurable package allows for more advanced configuration options, in particular, you can set it up for video editing or print design and can control almost all features.

Let's now get to the advanced, configurable editing. On this page, we will configure the editor for print use case. Examples for video editing can be found here as well.

As it was shown in the quickstart it's required to have an HTML host page, a place to embed the editor. The container of the editor can, in general, be any block element. Here we use <div> as an example:

<div id="photoEditorContainer" style="width:768px; height:350px;"></div>

Be wary of the minimal space required to visualize the editor properly.

Let's now build our editor step by step.

Step 1 - Load the editor and set the access up

We need to load the SDK

<div id="printEditorContainer" style="width:768px; height:350px;"></div>
<script src="https://sdk.picsart.io/cdn?v=1.8&key=sdk"></script>

and initialize the editor

const PicsartInstance = new Picsart({
      propertyId: 'yourdomainaddress.com', // example: 'picsart.com'
      containerId: 'printEditorContainer',
      apiKey: 'Your API Key here',
      mode: 'print',
      logo: 'Your logo URL here',
      usePicsartInventory: true,
      ...
});

It's important to set these up properly.

The propertyID is your production domain address.
The apiKey is your API access key. It's not always required. For instance, it will be mandatory in case the Remove Background feature is enabled.
The containerId should match the value of the id attribute of the container element.
The mode defines the preset for the print use case and is important to be explicitly provided. Other options are photo and video.

Step 2 - Open the editor

Opening the editor means rendering it on the page. Unless it's performed, the container will look empty.

PicsartInstance.open({ 
      selectedTool: 'uploads',
      title: 'Picsart Editor'
});

The title value allows to customize the name of the editor, having your use case and business flow. You're free to give it any name, e.g. Print designer or Business Card designer, etc.

The selectedTool is not mandatory, but we recommend to use it to control what should load. The tools available for selection are

layout
templates
photos
upload
text
elements
background

Step 3 - Control your features

Now that we have the editor's basic setup, let's also have a little extra control over what shows up on your screens.

const PicsartInstance = new Picsart({
      mode: 'print',
      theme: 'light', // turns the color mode of the UI into lighter colors,
      features: {
        undoRedoControls: true,
        zoomControls: true,
        tools: [
            'edit',
            'color',
            'gradient',
            'eraser',
            'duplicate',
            'adjust',
            'font',
            'border',
            'outline',
            'shadow',
            'flip_rotate',
            'position',
            'tool_removeBG'
          ],
      },
      categories: {
        layout: {
          title: true,
        },
        templates: {
          title: true,
        },
        photos: {
          thumbnailHeader: true,
        },
        text: {
          title: true,
        },
        uploads: {
          title: true,
          tabs: ['Images'],
        },
        elements: {
          smallTitle: true,
        },
        background: {
          header: true,
          tabs: ['Color', 'Upload', 'Library']
        },
      },
});

The features>tools configuration allows to control photo editing features. For example, you can decide whether basic editing like opacity and bland should be enabled or not, etc.

Pay extra attention to the tool_removeBG. This one enables the remove background feature on photos and it implies remove background API usage. This requires the apiKey be provided. Every time remove background is performed, it will make a call to the API service and consume credits.

Make sure to purchase enough credits to ensure an uninterrupted remove background processing. See the pricing for remove background.

The categories section in this configuration controls what you see on the left side of the editor. This includes the option to upload images and add to the design, add text, elements/shapes as well as the ability to modify the background.

In the background section you can choose whether the user can add color and/or upload and apply a photo.

Step 4 - Control what to export, handle the result

Now, let's see how we can control what files should be exported. The full list of export formats can be found here and here we will show how to export in PDF.

const PicsartInstance = new Picsart({
      ...
      exportFormats: ['print/pdf'],
      ...
});

And there are options to choose from, what to expect, a blob, base64 or buffer (read more about all export types here).

const PicsartInstance = new Picsart({
      ...
      exportType: 'blob',
      ...
});

PicsartInstance.onExport((output) => {
      PicsartInstance.close();
      if (output.data.printData) downloadFile(output.data.printData, 'result.pdf');
});

To learn more about additional configuration options for the print ready pdf setup see this document.

Step 5 - Two more little things

Almost there, let's also see how you should provide the list of shapes as well as hot to control the label on the next button.

PicsartInstance.provideShapes({ dataURL: 'https://cdn140.picsart.com/41273773997815915185.json' });

PicsartInstance.provideLabels({
      nextButton: 'Print',
});

Summary

As we have gone through the whole setup process, let's see how the final HTML file should look like.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Your company name]</title>
</head>

<body>
  <style>
    body {
      padding: 100px;
      font-family: Helvetica, Arial, sans-serif;
    }

    .container {
      position: absolute;
      top: 20px;
      left: 20px;
      right: 20px;
      bottom: 20px;
      pointer-events: none;
    }

    iframe {
      border: none;
      border-radius: 4px;
      box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.4);
      border-radius: 4px;
    }
  </style>
  <div id="printEditorContainer" class="container"></div>
  <script src="https://sdk.picsart.io/cdn?v=1.8&key=sdk"></script>
  <script>
    const downloadFile = (blob, fileName) => {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      document.body.append(link);
      link.click();
      link.remove();
    };

    const PicsartInstance = new Picsart({
      propertyId: 'yourdomainaddress.com', // example: 'picsart.com'
      containerId: 'printEditorContainer',
      apiKey: 'Your API Key here',
      logo: 'Your logo URL here',
      usePicsartInventory: true,
      exportFormats: ['print/pdf'],
      exportSettings: {
        'print/pdf': {
            pageInfo: true, 
            colorBars: true,
            emptyMarging: true,
            starTarget: true,
            registrationMark: true,
            cropMark: true,
            colorBar: true,
            tintBar: true
        }
      },
      exportType: 'blob',
      mode: 'print',
      theme: 'light', // turns the color mode of the UI into lighter colors,
      features: {
        undoRedoControls: true,
        zoomControls: true,
        tools: [
            'edit',
            'color',
            'gradient',
            'eraser',
            'duplicate',
            'adjust',
            'font',
            'border',
            'outline',
            'shadow',
            'flip_rotate',
            'position',
            'tool_removeBG'
          ],
      },
      textSettings: {
        fontsFolderView: true,
      },
      categories: {
        layout: {
          title: true,
        },
        templates: {
          title: true,
        },
        photos: {
          thumbnailHeader: true,
        },
        text: {
          title: true,
        },
        uploads: {
          title: true,
          tabs: ['Images'],
        },
        elements: {
          smallTitle: true,
        },
        background: {
          header: true,
          tabs: ['Color', 'Upload', 'Library']
        },
      },
    });

    PicsartInstance.provideShapes({ dataURL: 'https://cdn140.picsart.com/41273773997815915185.json' });
    PicsartInstance.provideLabels({
      nextButton: 'Export',
    });

    PicsartInstance.onExport((output) => {
      PicsartInstance.close();
      if (output.data.printData) downloadFile(output.data.printData, 'result.pdf');
    });

    PicsartInstance.open({ 
      selectedTool: 'layout',
      title: 'Print designer'
    });
  </script>
</body>

</html>

After all, you can simply save this code to your local drive and open the HTML file to get how things come together.

Should you have any issue or any question in regards to this setup process, we would be happy to hear your feedback. Don't hesitate to contact us.