Quick Start
Installation of the SDK
The SDK must be implemented as close to the top of the <head>
section of your HTML site on all pages.
The SDK requires an application key (appkey) to work, it is specific to the domain for which it was generated. It must to be added as a query parameter when adding the script path in the html eg: _key=test. The test key can be used to run the SDK in non production testing mode. The v=x.y.z specify the version of the SDK.
<html lang="en">
<head>
<script src="https://sdk.picsart.io/cdn?v=x.y.z&key=sdk"></script>
</head>
</html>
SDK Initialisation
SDK Container
To start the integration the hosting web page should prepare a container element. It should have a specific identifier and its sizes should be defined. It’s required that the container element has at least 768px width.
<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>
SDK Instantiation
Once the SDK script is added and the container is created the SDK instance can be created using the now available Picsart Object. The id of the container previously created has to be set using the property containerId, see 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 SDK supports several features.
Some of them need to be set during the instantiation, below you can find the complete list of parameters that can be used to configure the 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: 350p | false | |
apiKey* | String | The Picsart for Developers application API Key. | true | |
usePicsartInventory | String | 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. | 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. | true |
- Your Picsart Administrator should have received this at the time of contract.
Production
To go to production please switch the URL to the SDK like 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 2 months ago