Quick Start

Suggest Edits

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

NameTypeDescriptionDefaultOptional
propertyIdStringEach client/partner is given a property id which identifies either the placement, application or the businessfalse
containerIdStringThe container/wrapper element ID of the editor.

The minimum size of the container should be width: 768px by height: 350p		false
apiKey*StringThe Picsart for Developers application API Key.true
usePicsartInventoryStringWhen 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
accessibilityTitleStringThe accessibility title to be used for the editor.Picsarttrue
logoString/URLThe logo to be used in the editor.
Max Height: 32px
No max Width		Picsart Logofalse
debugBooleanThis 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