Guides

Quick Start

Start quickly with the Picsart Photo and Video Editor SDK: Simple steps for efficient installation and initial setup.

Suggest Edits

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

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: 350px		false
apiKeyStringThe 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
usePicsartInventoryBooleanWhen 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.falsetrue
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.falsetrue
  • 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 about 1 month ago