Quick Start

Installation of the Picsart Create Editor

To begin, the Picsart Create Editor needs to be implemented near the top of the <head> section of your HTML site on all pages.

The Picsart Create Editor 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 Create Editor in non-production testing mode. The v=x.y.z parameter specifies the version of the Picsart Create Editor.

<html lang="en">
<head>
  <script src="https://sdk.picsart.io/cdn?v=x.y.z&key=sdk"></script>
</head>
</html>

Picsart Create Editor Initialisation

Picsart Create Editor 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 Create Editor Instantiation

After adding the Picsart Create Editor script and creating the container, the Picsart Create Editor 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 Create Editor 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 Create Editor 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 information at the time of the contract.

Production

To switch to production, modify the URL to the Picsart Create Editor 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>