apiKey

str

Design Lab API Key generated for your account

product

product

Information on the product to be loaded in the Design Lab. id is required, color is optional (The default color variant would be loaded if not provided), name and description are optional (The product name and description will be used if not provided)

externalCustomerId

str

A string identifier unique to each of your customers. If you don't need to identify your customers, just send an identifier for yourself and make sure it is always the same

logoURL

str

URL for a custom logo to be shown on the Design Lab. If no logoURL, the Safsira logo will be used instead

userSelectedQuantity

number

100

A quantity to be used as the initial value in the Design Lab quantity field. If the product has a Minimum Order Quantity (MOQ) greater than this number, the MOQ will be used instead. Also if no userSelectedQuantity is provided, the default quantity will be the MOQ value

renderHeader

boolean

true

Boolean value to determine if the Design Lab header should be rendered or not. If renderHeader is not provided, the header will not be rendered by default

renderFooter

boolean

true

Boolean value to determine if the Design Lab footer should be rendered or not. If renderFooter is not provided, the footer will not be rendered by default

header

header

header: { title: "Custom Title", breadcrumbs: [ { name: "Home", href: "/" }, {...} ] }

Data to be displayed on the Design Lab header (mainly the title and breadcrumbs). For this information to be rendered, renderHeader must be set to true first, otherwise this parameter will be ignored

startingStep

1 or 2

2

Number to determine the starting step of the Design Lab. If not provided, the default starting step will be the first step (1)

notifications

notifications

notifications: { position: 'bottom-center', artworkCreated: { message: 'Custom message', iconEmoji: '🎨' }, }

Data to be displayed on the Design Lab notifications. If not provided, the default notifications will be used. See the Notifications type for more information

onClose

() => void

--

Callback function to be executed when closing the Design Lab using the cross on the top right corner

onFinish

(product: CustomProduct) => void

--

Callback function to be executed when user finishes designing a product. Will receive newly created Custom Product data from our API as a parameter

number

Product id of the product to load in the Design Lab

color

str

"Red"

Valid color variant name to load for the product in the Design Lab. If not provided, the default color variant will be loaded instead

str

"custom product name"

Custom name to be displayed for the product in the Design Lab. If not provided, the product name will be used instead

description

str

"custom product description"

Custom description to be displayed for the product in the Design Lab. If not provided, the product description will be used instead

title

str

"Design Lab"

Title to be displayed at the top of the Design Lab. If no title is provided, the name of the product will be used. If renderHeader is not provided or set to false, this parameter will be ignored

breadcrumbs

breadcrumbentry-type

[{ name: 'Home', href: '/' }]

List of elements that define the breadcrumbs

str

"Catalog"

Text to be displayed on the breadcrumb item.

str

/catalog

Used as a href to render the breadcrumb as a link

position

"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"

"bottom-left"

Position of the notifications on the Design Lab screen. If not provided, the default position will be top-right

artworkCreated

{ message: string | undefined

iconEmoji: string | undefined

style: object | undefined }

artworkCreated: { message: 'Custom message', iconEmoji: '🎨', style: { borderRadius: '10px', background: '#6F6F88', color: '#fff', } }

Data to be displayed in the notification toast when an artwork is created. If not provided, the default message will be used

artworkUpdated

{ message: string | undefined

iconEmoji: string | undefined

style: object | undefined }

artworkUpdated: { message: 'Custom message', iconEmoji: '🎨', style: { borderRadius: '10px', background: '#6F6F88', color: '#fff', } }

Data to be displayed in the notification toast when an artwork is updated. If not provided, the default message will be used

artworkDeleted

{ message: string | undefined

iconEmoji: string | undefined

style: object | undefined }

artworkDeleted: { message: 'Custom message', iconEmoji: '🎨', style: { borderRadius: '10px', background: '#6F6F88', color: '#fff', } }

Data to be displayed in the notification toast when an artwork is deleted. If not provided, the default message will be used

newArtworkVersionCreated

{ message: string | undefined

iconEmoji: string | undefined

style: object | undefined }

newArtworkVersionCreated: { message: 'Custom message', iconEmoji: '🎨', style: { borderRadius: '10px', background: '#6F6F88', color: '#fff', } }

Data to be displayed in the notification toast when a new artwork version is created from a previous version. If not provided, the default message will be used

error

{ message: string | undefined

iconEmoji: string | undefined

style: object | undefined }

error: { message: 'Custom message', iconEmoji: '🎨', style: { borderRadius: '10px', background: '#6F6F88', color: '#fff', } }

Data to be displayed in the notification toast when an error occurs. If not provided, the default message will be used