Setup and Open

Open

The editor can be configured to enable or disable all of its features, as well as determine the desired output. To open and configure the editor, you can use the same open method. Here's an example that demonstrates opening/configuring the editor with printing capabilities:

PicsartInstance.open({
  title:      'New Post',
  templatesTitle: 'templates title',
  templatesSubTitle: 'templates subtitle',
  imageURL:   'https://cdn131.picsart.com/365322278040201.jpg',
  replayURL: 'https://cdn131.picsart.com/example.replay',
  selectedTool: 'templates',
  exportFormats: ['print/pdf'],
  exportSettings: {
     'print/pdf': {
        pageInfo: true, 
        colorBars: true,
        emptyMarging: true,
        starTarget: true,
        registrationMark: true,
        cropMark: true,
        colorBar: true,
        tintBar: true
     }
  },
  exportType: 'blob'
  hideCancelBtn: false,
  quality: 90,
  theme: 'light',
  templatesFilters: {
    subtype: 'buffer',
    dimension: '1920x1080'
    class: 'buffer',
  },
  onClose:      () => {
  },
  onExport:     (result) => { /*see #onExport for result details*/
  },
  onError:      (message) => {
  }
);

📘

The sample above demonstrates different parameters that can be used to define the specific edit session.

For example, one can change the title in the editor to define the user flow, or define the end result file name, manipulate the export quality or mention which tools should be enabled.

More examples can be found here:

• Photo Editing Configuration - Example
• Video Editing Configuration - Example
• Web-to-Print Editing Configuration - Example

📘

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.

Open

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.

Open Parameters

Full list of parameters available here: list of parameters

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',
  cancelButton: 'Cancel',
});

📘

nextButton

This label is used to finish the editing process and triggers the Export process, which returns the expected output to the callback function assigned to onExport.

Labels parameters