Quick Start
Start quickly with the Picsart Photo and Video Editor SDK: Simple steps for efficient installation and initial setup.
Installation of the Picsart Photo and Video Editor SDK
To begin, the Picsart Photo and Video Editor SDK needs to be implemented near the top of the <head>
section of your HTML site on all pages.
The Picsart Photo and Video Editor SDK requires an application key (appkey) to function, which is specific to the domain it was generated for. It must be added as a query parameter when including the script path in the HTML, for example: key=test. The test key can be used to run the Picsart Photo and Video Editor SDK in non-production testing mode. The v=x.y.z parameter specifies the version of the Picsart Photo and Video Editor SDK.
<html lang="en">
<head>
<script src="https://sdk.picsart.io/cdn?v=x.y.z&key=sdk"></script>
</head>
</html>
Picsart Photo and Video Editor SDK Initialisation
Picsart Photo and Video Editor SDK Container
To start the integration, the hosting web page should prepare a container element with a specific identifier and defined sizes. The container element should have a minimum width of 768px.
<div id="test_container_id" style="width:768px; height:350px;"></div>
<script src="https://sdk.picsart.io/cdn?v=x.y.z&key=sdk"></script>
Picsart Photo and Video Editor SDK Instantiation
After adding the Picsart Photo and Video Editor SDK script and creating the container, the Picsart Photo and Video Editor SDK instance can be created using the available Picsart Object. Set the id of the previously created container using the containerId property, as shown in the example below:
<div id="test_container_id" style="width:768px; height:350px;"></div>
<script src="https://sdk.picsart.io/cdn?v=1.0.0&key=sdk"></script>
<script>
const PicsartInstance = new Picsart({
propertyId: 'account_id_or_domain',
containerId: 'test_container_id',
accessibilityTitle: 'Picsart',
logo: 'logo_URL',
});
PicsartInstance.onOpen(() => {
console.log('Editor SDK for Web is ready to use!');
});
PicsartInstance.provideShapes({ data: shapesData });
PicsartInstance.open();
</script>
The Picsart Photo and Video Editor SDK supports several features.
Some of these features need to be set during instantiation. Below, you can find the complete list of parameters that can be used to configure the Picsart Photo and Video Editor SDK before use.
Parameters
Name | Type | Description | Default | Optional |
---|---|---|---|---|
propertyId | String | Each client/partner is given a property id which identifies either the placement, application or the business | false | |
containerId | String | The container/wrapper element ID of the editor. The minimum size of the container should be width: 768px by height: 350px | false | |
apiKey | String | The Picsart for Developers application API Key. Required only when tools such as remove background and upscale are enabled, as well as when usePicsartInventory=true . | true | |
usePicsartInventory | Boolean | When this flag is set to true, all templates, fonts, and photos are retrieved from Picsart Content Inventory. Additionally, all content provided through #provideTemplates (), #providePhotos (), and #providedFonts() method is disabled. | false | true |
accessibilityTitle | String | The accessibility title to be used for the editor. | Picsart | true |
logo | String/URL | The logo to be used in the editor. Max Height: 32px. No max Width. | Picsart Logo | false |
debug | Boolean | This flag enables the debug mode which will let the editor log more detailed information about the integration and operations which may help during problem troubleshooting. | false | true |
- Your Picsart Administrator should have received this information at the time of the contract.
Production
To switch to production, modify the URL to the Picsart Photo and Video Editor SDK as shown in the example below, using your app_key and apiKey if needed:
<div id="test_container_id" style="width:768px; height:350px;"></div>
<script src="https://sdk.picsart.io/cdn?v=x.y.z&key=<app_key>"></script>
<script>
const PicsartInstance = new Picsart({
propertyId: 'account_id_or_domain',
apiKey: 'api_key_provided',
});
PicsartInstance.onOpen(() => {
console.log('Editor SDK for Web is ready to use!');
});
PicsartInstance.open();
</script>
Updated 24 days ago