Printcart SDK for Embeded Design Tool.
npm install @printcart/design-tool-sdkEmbeb Printcart Designer to your web application with our simple JS SDK.
npm
``bash`
npm install @printcart/design-tool-sdk
yarn
`bash`
yarn add @printcart/design-tool-sdk
unpkg
``
Using package:
`js
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:
`js
`
- Required
- Type: string
Your Printcart Unauth Token. You can get your token from your Printcart Dashboard.
- Required
- Type: string
The Product ID that you want to assign the designer to.
- 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.
Render and display Designer.
Example
`js
const designer = new PrintcartDesigner({
token: "your-printcart-unauth-token",
productId: "your-product-id",
});
var openDesignerButton = document.getElementById("your-button-id");
openDesignerButton.addEventListener("click", function () {
designer.open();
});
`
Unmount and hide Designer.
Example
`js`
designer.close();
Subscribe to an Designer event. See below for full list of events.
Example
`js`
designer.on("upload-success", callback);
Exposed events that you can subscribe in your app:
Fired when Designer finish render and displayed to the screen.
Example
`js`
designer.on("rendered", function () {
console.log("Designer opened.");
});
Fired when Designer closed.
Example
`js`
designer.on("closed", function () {
console.log("Designer closed.");
});
Fired when Designer fully loaded.
Example
`js`
designer.on("render-finish", function () {
console.log("Designer rendered.");
});
Parameters:
- response - Printcart API Response object for design upload.
Fired when all upload success.
Example
`js`
designer.on("upload-success", function (response) {
console.log("Response:", response);
});
Parameters:
- error - The error object from Printcart API Response.
Example
`js`
designer.on("upload-error", function (error) {
console.log(error);
});
Parameters:
- response - Printcart API Response object for design edit.
Example
`js`
designer.on("edit-success", function (response) {
console.log("Response:", response);
});
Fired when Designer enter edit mode.
Example
`js``
designer.on("edit", function () {
console.log("Designer on edit mode");
});