Quick Start

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

Suggest Edits

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

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 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>

Updated 3 months ago