Setup and Open
Effortlessly set up and customize the Picsart Create Editor for your unique needs.
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
Name | Type | Description | Default | Optional |
---|---|---|---|---|
nextButton | String | The label for the button used to proceed to the next step in the editor, e.g., Export. | Next | false |
cancelButton | String | The label for the button used to cancel or go back if there are multiple steps. | Cancel | true |
Updated 9 months ago