Setup and Open Customization

💡
We strongly recommend first checking out the Quick Start before exploring the customization options on this page.

Automated Setup

When you activate the SDK trial for one of Photo Print Editor, Web to Print Editor, Static Ads Editor or Video Ads Editor, most of the configurations for the editor are done automatically and you won't need to do much about it. This makes the process seamless, allows better control and makes sure you spend less time configuring or making mistakes.

What you can control via Code

Nevertheless, there are some configurations that will require your input and here we will elaborate on most of them.

This code example lists the configurations and properties that you can control:

<html lang="en">
  <head>
    <script src="https://sdk.picsart.io/cdn?v=1.13.2&key=sdk"></script>
  </head>
  <body>
    <div id="containerId" style="width:100%; height:100%;"></div>
    <script>
      (async () => {
        const PicsartInstance = new Picsart({
          apiKey: 'YOUR_API_KEY_GOES_HERE', // provided during the signup process
          customerId: 'CUSTOMER_ID_GOES_HERE', // provided during the signup process
          propertyId: 'YOUR_PROPERTY_ID_GOES_HERE', // provided during the signup process
          containerId: 'containerId', // should match the identifier of the container element

          
          // what you can customize via code
          title: 'Photo Print Designer' // Do you prefer to name the embedded editor a 'Designer' or 'Photo Editor'? You name it here.
          theme: 'light', // Available options are 'dark', 'light', defaults to 'dark'.
          selectedCategory: '', // This option allows you to control what tool to open by default. Choose from 'background', 'elements', 'layout', 'photos', 'subtitles', 'templates', 'text', 'uploads'.
          canvasSize: '500x500', // Define your preferred canvas size in 'WIDTHxHEIGHT' format. Numbers should be provided in pixels. When not provided, the canvas size will default to 1024x1024. When not provided, but the editor is opened with an image, then the canvas size will default to the provided image size.
          
        });
   
        // adding new lines here to open and save
        const imageUrl = "https://cdn-cms-uploads.picsart.com/cms-uploads/05b3d2e9-1fd6-43f3-b342-b232638c5614.png";
        PicsartInstance.open({
          imageUrl
        });
        
        PicsartInstance.onExport((output) => {
          if (output.data.imageData) {
            const blob = output.data.imageData;
            const link = document.createElement('a');
            link.href = typeof blob === 'string' ? blob : URL.createObjectURL(blob);
            link.download = 'picsart-editor-result-image.png';
            document.body.append(link);
            link.click();
            link.remove();
          }
        });
      })();
    </script>
  </body>
</html>

Open

When opening the editor, you can modify some of the configurations that were previously provided during the setup process:

PicsartInstance.open({
  title: 'Photo Print Designer'
  theme: 'light',
  selectedCategory: '',
  canvasSize: '500x500'
  imageURL:   'https://cdn-cms-uploads.picsart.com/cms-uploads/05b3d2e9-1fd6-43f3-b342-b232638c5614.png'
});

You can also open the editor with different (file) options, but note that limitations may apply depending on the package you have got. For instance, opening a video file will not work if you are subscribed to the Photo Print Editor.

PicsartInstance.open({
  imageURL:   'https://cdn-cms-uploads.picsart.com/cms-uploads/05b3d2e9-1fd6-43f3-b342-b232638c5614.png',
  // use either imageUrl, videoUrl, or replayUrl to open the editor
  // provided more than one file option will trigger an error
  // videoUrl: '',
  // replayUrl: ''
});

📘
Important
If an "editor open" request is made while the editor is already open, the method will ignore the request, and the previous edit session will continue.