Design Tool SDK

Embed the Printcart product designer in a storefront.

Installation

Using npm:

text
npm install @printcart/design-tool-sdk

Using yarn:

text
yarn add @printcart/design-tool-sdk

Using unpkg:

text
<script src="https://unpkg.com/@printcart/[email protected]/dist/main.js"></script>

Usage

Using package:

text
import PrintcartDesigner from "@printcart/design-tool-sdk";

const designer = new PrintcartDesigner({
  token: "your-printcart-unauth-token",
  productId: "your-product-id",
  options: {},
});

Using CDN-hosted copy of the library:

text
<script defer src="https://unpkg.com/@printcart/[email protected]/dist/main.js"></script>

<script>
  window.addEventListener("DOMContentLoaded", function () {
    const designer = new PrintcartDesigner({
      token: "your-printcart-unauth-token",
      productId: "your-product-id",
      options: {},
    });
  });
</script>

Options

token

  • Required
  • Type: string

Your Printcart Unauth Token. You can get your token from your Printcart dashboard (Settings).

productId

  • Required
  • Type: string

The Product ID that you want to assign the designer to.

options

  • Optional
  • Type: object | undefined

Provide options to config the Designer UI and locale.

Parameters

  • processBtnBgColor: string | null - Change the Process button background color.
  • logoUrl: string | null - Add your branding logo to Designer.

Methods

render

Render and display Designer.

Example

text
const designer = new PrintcartDesigner({
  token: "your-printcart-unauth-token",
  productId: "your-product-id",
});

const openDesignerButton = document.getElementById("your-button-id");

openDesignerButton.addEventListener("click", function () {
  designer.render();
});

close

Unmount and hide Designer.

Example

text
designer.close();

on

Subscribe to a Design Tool event. See below for full list of events.

Example

text
designer.on("upload-success", callback);

Events

Exposed events that you can subscribe in your app:

rendered

Fired when Designer finish render and displayed to the screen.

Example

text
designer.on("rendered", function () {
  console.log("Designer opened.");
});

closed

Fired when Designer closed.

Example

text
designer.on("closed", function () {
  console.log("Designer closed.");
});

render-finish

Fired when Designer fully loaded.

Example

text
designer.on("render-finish", function () {
  console.log("Designer rendered.");
});

upload-success

Parameters:

  • response - Printcart API Response object for design upload.

Fired when all upload success.

Example

text
designer.on("upload-success", function (response) {
  console.log("Response:", response);
});

upload-error

Parameters:

  • error - The error object from Printcart API Response.

Example

text
designer.on("upload-error", function (error) {
  console.log(error);
});

edit-success

Parameters:

  • response - Printcart API Response object for design edit.

Example

text
designer.on("edit-success", function (response) {
  console.log("Response:", response);
});

edit

Fired when Designer enter edit mode.

Example

text
designer.on("edit", function () {
  console.log("Designer on edit mode");
});