Guides
Start typing to search…

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 3 days ago