Advanced Setup Options

💡
We strongly recommend first checking out the Setup and Open before exploring the advanced setup options on this page.

Controlling the export type

Picsart Photo and Video Editor SDK gives you the option to choose from different export types that fits your application and workflow better. The available options are base64, blob, buffer. When not provided, the default value applied is blog. In the following example we show how to control it and how to handle different types.

<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
          title: 'Photo Print Designer'
          
          // what you can customize via code
          ...(exportType && { exportType }), // "base64", "blob", "buffer". Default is "blob"
        });
   
        // 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>

Choosing the template category for Web to Print Editor

In the following script we demonstrate how the Web to Print Editor can be opened with a preselected template category. The list of available options are predefined. Additional coding will be required to fetch the list and build a chooser on top of it.

<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: 'Web to Print Designer' // Do you prefer to name the embedded editor a 'Designer' or 'Photo Editor'? You name it here.
        });
   
        // adding new lines here to open and save
        PicsartInstance.open({
          templatesFilters: {
            dimension: '288x576',
            subType: 'announcement',
            class: 'engagement',
          },
          templatesTitleText: 'Announcements'
          templatesSubTitle: 'Engagements, 4x8in'
        });
        
        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>

📘
Important
For the list of available template categories, and subcategories, check the Template taxonomy.
And for the integration details, reach to our tech support.

Opening with custom content

The open method is asynchronous, and when triggered, the onOpen method is called.

PicsartInstance.onOpen(() => {  
  PicsartInstance.provideTemplates({ data: templatesData });  
  PicsartInstance.provideShapes({ data: shapesData });  
  PicsartInstance.provideTexts({ data: textsData});  
  PicsartInstance.provideFonts({ data: fontsData});  
  PicsartInstance.provideLabels(labelsData);  
})

This method defines the callback function that will be executed after the iframe is loaded. Here, you can provide templates, texts, and photos, for example.

Modify Display Labels

The editor comes with commonly used labels in the market, but if you need to customize them for business-specific purposes, you can make adjustments as shown in the example below.

PicsartInstance.provideLabels({
  nextButton:  'Add to Cart', // The label for the button used to proceed to the next step in the editor, e.g., Export.
  cancelButton: 'Cancel', // The label for the button used to cancel or go back if there are multiple steps.
});

💡
It is possible to add more labels to this list. Make sure to reach out to our tech support.