Add content
Elevate your Picsart Create Editor by adding custom content like templates, text presets, photos, shapes, fonts, and colors, for a unique and tailored editing experience.
Add Templates
Templates are a powerful tool in the Picsart Create Editor that can be provided in two ways: using the Picsart Inventory (see usePicsartInventory
flag) or by providing a list of templates. To specify the list of templates, you can use the following example code:
PicsartInstance.onOpen(() => {
PicsartInstance.provideTemplates({
data: [
{
id: '',
previewUrl: '',
url: '',
data: {},
previewWidth: '',
previewHeight: '',
},
],
//dataURL: '',
});
});
PicsartInstance.open({...});
When providing templates from external sources, you need to set the usePicsartInventory
flag to false.
The list of external source templates should be defined after the editor is opened.
The configuration method accepts an object with a data property, which is an array of objects representing each template. Alternatively, you can use the dataURL
property to provide a link to a JSON
file containing the template information.
The complete list of parameters that can be used to configure the template object includes:
Templates Parameters
Name | Type | Description | Optional |
---|---|---|---|
id | String | Unique identifier of the template. | false |
previewURL | String/URL | The preview image URL of the template. The value must be a valid URL of a JPG, PNG, or WEBP format photo. | false |
url | String | The template file URL. Either this URL or the data property should be provided.The file should be in JSON format. | true |
data | Object | The template data as an object. Either this data or the url property should be provided. | true |
previewWidth | Number | The width necessary to display previews correctly in the sidebar. | true |
previewHeight | Number | The height necessary to display previews correctly in the sidebar. | true |
Note that templates added with this method will apply only when usePicsartInventory=false
.
Please note that templates added with this method will apply only when usePicsartInventory
is set to false
.
Add Text Presets
Text presets allow you to provide users with quick access to frequently used texts. These presets appear as a list when the user enters the text tool. Here is an example of how to add text presets:
PicsartInstance.provideTexts({
data: [
{
id: '',
previewText: '',
text: '',
fontSize: '',
fontFamily: '',
},
],
//dataURL: '',
});
PicsartInstance.open({...});
Similar to templates, the list of text presets should be defined after the editor is opened. You can use the data property of the configuration object to provide an array of text preset objects, or you can use the dataURL
property to provide a link to a JSON
file containing the text preset information.
The complete list of parameters that can be used to configure the text preset object includes:
Text Presets Parameters
Name | Type | Description | Default | Optional |
---|---|---|---|---|
id | String | Unique identifier of the text preset. | false | |
previewText | String | The text preset preview has a limited space and this text preview can be used to provide a human-readable short+preview version of the complete text. When skipped the text value will be applied. | true | |
text | String | The actual text of the preset that will be inserted when the user selects it. | false | |
fontSize | Number | The font size to be applied when the user selects the text preset. | 16 | true |
fontFamily | String | The font family to be applied when the user selects the text preset. | sans | true |
Add Photos
The default version of photo chooser allows users to upload their own files or provide an image URL. Except for that it is also possible to add a list of photos available for use.
To add custom photos to the Picsart Create Editor, you can use the providePhotos
method. Here is an example of how to add photos:
PicsartInstance.providePhotos({
data: [
{
id: '',
previewURL: '',
imageURL: '',
width: '',
height: '',
},
],
//dataURL: '',
});
PicsartInstance.open({...});
The data property should contain an array of photo objects, each representing a custom photo. You can also use the dataURL
property to provide a link to a JSON
file containing the photo information.
The complete list of parameters that can be used to configure the photo object includes:
Photos Parameters
Name | Type | Description | Optional |
---|---|---|---|
id | String | Unique identifier of the photo. | true |
previewURL | String/URL | The preview image URL of the photo. The value must be a valid URL of a JPG, PNG, or WEBP format photo. | true |
imageURL | String/URL | The image URL of the photo. | false |
width | Number | Image width | true |
height | Number | Image height | true |
Add Shapes
Many photo edits include some sort of a simple shape. The shapes may differ from the use case and industry. To tailor to specific use cases, one can define the list of shapes after the editor is opened.
Shapes can be added to the Picsart Create Editor using the provideShapes
method. Here is an example:
PicsartInstance.provideShapes({
data: [
{
id: '',
previewURL: '',
width: '',
height: '',
shapeURL: '',
shapeData: {},
},
],
//dataURL: '',
});
PicsartInstance.open({...});
The data property should contain an array of shape objects, each representing a custom shape. You can also use the dataURL
property to provide a link to a JSON
file containing the shape information.
The complete list of parameters that can be used to configure the shape object includes:
Shapes Parameters
Name | Type | Description | Default | Optional |
---|---|---|---|---|
id | String | Unique identifier of the Shape. | true | |
previewURL | String/URL | The preview image URL of the shape. The value must be a valid URL of a JPG, PNG or WEBP format photo. | true | |
width | Number | The designated width of the shape. | false | |
height | Number | The designated height of the shape. | false | |
shapeURL | String/URL | The shape file URL. Either this URL or the data defined below should be provided. The file should be of SVG format. | templates | true |
shapeData | Object | The shape data as an Object. Either this data or the URL defined above should be provided. | true |
Add Fonts
Fonts can be added to the Picsart Create Editor using the provideFonts method. Here is an example:
PicsartInstance.provideFonts([
{
fontFamily: 'Proxima nova',
previewURL: 'https://...',
url: 'https://...',
licenseInfo: ''
}
]);
PicsartInstance.open({...});
The data property should contain an array of font objects, each representing a custom font. You can also use the dataURL
property to provide a link to a JSON
file containing the font information.
The complete list of parameters that can be used to configure the font object includes:
Fonts Parameters
Name | Type | Description | Optional |
---|---|---|---|
fontFamily | String | The font family name. | false |
previewURL | String/URL | A small image showing an example of writing a font. | false |
url | String/URL | The font file URL. The file format must be .ttf | false |
licenseInfo | String | The font’s license info. | true |
Note that fonts added with this method will apply only when usePicsartInventory=false
.
Add Colours
The color picker has a default list of colors that come out of the box. The list can also be extended, or modified. It is possible to change the colors in the default 'Presets' color palette, also it is possible to add a branded color Palette with the given name.
To add custom colors to the Picsart Create Editor, you can use the provideColors
method. Here is an example:
PicsartInstance.provideColors({
palette: {
title: ‘Brand colors’
colors: [‘#123efd34’, ‘#ef1265’],
},
presets: {
title: ‘Custom presets title’,
colors: [‘#000000’, ‘#123efd34’],
}
});
PicsartInstance.open({...});
The data property should contain an array of color objects, each representing a custom color. You can also use the dataURL
property to provide a link to a JSON
file containing the color information.
The complete list of parameters that can be used to configure the color object includes:
Colour Parameters
Name | Type | Description | Default | Optional |
---|---|---|---|---|
palette.title | String | The branded color palette title. | Popular colors | true |
palette.title | Arrayk:parame | Defines the list of colors in the branded color palette. The list of colors is a Hex color strings array. You can also use 8-digit hexs to use the alpha channel. Use this to change the default color presets. The maximum number of colors in the palette is 21. | empty | false |
presets.title | String | Default color palette title. | Presets | false |
presets.colors | Arrayk:parame | Defines the list of colors in the default color palette ‘Presets’. The list of colors is a Hex color strings array. You can also use 8-digit hexs to use the alpha channel. Use this to change the default color presets. The maximum number of colors in the palette is 21. | block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Description", "h-3": "Default", "h-4": "Optional", "0-0": "palette.title", "0-1": "String", "0-2": "The branded color palette title.", "0-3": "Popular colors", "0-4": "true", "1-0": "palette.title", "1-1": "Array[String]", "1-2": "Defines the list of colors in the branded color palette. \n \nThe list of colors is a Hex color strings array. You can also use 8-digit hexs to use the alpha channel. Use this to change the default color presets. The maximum number of colors in the palette is 21.", "1-3": "empty", "1-4": "false", "2-0" | false |
Updated 9 months ago