Creating an Editor

The primary endpoint of the Editor API is creating an editor. Once you've presented your user with some UI to select which product and design they would like to order you can take those pieces of data and create an editor from them. You create an editor by passing in a very simple JSON object, and the response given is a URL to redirect a user to, where they actually do the editing. In most cases this call will happen server side and seamlessly (and transparently) redirect to the editor without someone even knowing they've ended up in a new spot.

POST /editors

Content-type: application/json

curl

CURL Example Request
1
2
3
4
5
curl https://prospector.dragdrop.design/api/v1/editors \
	-H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.r3udhowqndkwqneoiqwndjwndei12u390912hrbfhaslkdjbqwiei21nbrhewiuornqwjkfhbaiwodnqwjkbdawuosdhowqubdfjkwbdusandbiwquebio12nedbwbaodpqwnebou12rbwkjalndawuobdnwqndfqwbdfoiwqndpiqwhfiwqnkjdlnwqdnioqwhniorqw3nfjwbaodnwdnqwopd" \
	-H "Accept: application/json" \
	-H "Content-Type: application/json" \
	-d '{"userId":"212091120","productId":"b7jW7PmsfByoSxQ5m","designId":"ztRMDiHup8ooFhxLr","redirects":{"complete":{"text":"Checkout","url":"https://yourdomain.com/return"},"cancel":{"text":"Change Design","url":"https://yourdomain.com/cancel"}}}'
Example Request Payload
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
{
	"userId": "212091120",
	"productId": "b7jW7PmsfByoSxQ5m",
	"designId": "ztRMDiHup8ooFhxLr",
	"redirects": {
		"complete": {
			"text": "Checkout",
			"url": "https://yourdomain.com/return?editor=%EDITOR_ID%"
		},
		"cancel": {
			"text": "Change Design",
			"url": "https://yourdomain.com/cancel"
		}
	},
	"settings": {
		"attributeCategories": [],
		"quantity": {
			"default": 25
		},
		"client": {
			"vendor": "photog",
			"accentColor": "#ff0000",
			"studioName": "Sample Studio",
			"hidePricing": true,
			"markupType": "PERCENT",
			"markupAmount": 30
		}
	},
	"photos": [
		{
			"id": "1",
			"name": "Photo IMG_1",
			"url": "https://s3.amazonaws.com/test-bucket-whoa/IMG_1.jpg",
			"printUrl": "https://s3.amazonaws.com/test-bucket-whoa/nonwatermarkedimage.jpg",
			"filetype": "jpg",
			"size": {
				"original": {
					"width": 3600,
					"height": 2401
				}
			}
		},
		{
			"id": "2",
			"name": "Photo IMG_2",
			"url": "https://s3.amazonaws.com/test-bucket-whoa/IMG_2.jpg",
			"filetype": "jpg",
			"size": {
				"original": {
					"width": 2400,
					"height": 3600
				}
			}
		}
	]
}
Request Elements

userId

string - 255

An internally used ID that's specific to the user you're redirecting into the editor. This value is based on whatever you use to identify who is creating this editor. Your Key combined with your userId is what we used to tie an indvidual user to just their editors. So if you create multiple editor sessions with the same value that user will be able to load all of them simultaneously, but no one else will be able to load those editors, without being passed into them with the appropriate JSON Web Token (JWT).

productId

string - 255

The ID of a product that is able to be edited (probably from a designs call).

designId

string - 255

The ID of a design that is able to be edited (probably from a designs call).

redirects

array

A set of routes that you'd like your user sent to if they leave the editor.

A key value of complete is where a user is sent when they leave the editor via completing their design and choosing to purchase it, this URL is requested containing a payload of what the end outcome of their editor session was.

A key value of cancel is where a user is sent when they click the back or cancel action inside the editor. They are returned without an end output, because they abandoned the design work they did inside the editor.

Show Children ▾

url

string

The URL you'd like them to be sent to. This URL can contain the placeholder value of %EDITOR_ID%, which will be dynamically replaced by the editorId for the session.

text

string

The text they should see in the editor UI when completing that action (for example if you're sending them right to Checkout, versus to a Proofing related stage).

settings

array

Settings to modify and customize your editor experience.

Show Children ▾

quantity

string - 255

Items related to the quantity of items that can be ordered.

Show Children ▾

default

int

Provides the ability to specify the default qty of an editor.

client

string - 255

Options tied to customize the look and functionality of the editor

Show Children ▾

vendor

string

Passing in a value with tell the editor to use an alternate visual theme for display than the one attached to your brand. Current the key photog is supported to allow a photographer specific accent color.

accentColor

string

A hex color value used as an accent inside the editor. We dynamically determine buttons and actions based on this color, and attempt to optimize contrast, so even light color values should result in a positive user experience.

studioName

string

Every design our designers have created has a spot for studio branding on the card. This will effect two things in the editor, the ability to dynamical edit that text area, and it will also pre-populate that text box with the string passed in.

hidePricing

bool

If set to true all pricing in the editor will be hidden.

markupType

string

Apply a pricing markup to the prices inside the editor, the only supported value is PERCENT.

markupAmount

int - 3

The percentage amount (a positive integer) you'd like to markup, requires also passing markupType: PERCENT.

photos

object

An object that pre-populates the photo gallery inside the editor with assets provided. Currently JPEG and PNG assets are supported.

Show Children ▾

id

string - 255

The unique id to refer to this photo.

name

string - 255

The unique name to refer to this photo.

url

string

Publicly accessible file path to get at an image asset to be used in the editor (sometimes watermarked or a smaller version of the image)

printUrl

string

Publicly accessible file path to get the image asset you want to print with (same aspect ratio as url needed)

filetype

string

A value of either "jpg" or "png"

size

array

Pass in the key of "original" to denote the aspect ratio of your file.

Show Children ▾

width

int

Value in pixels representing the width of the image asset.

height

int

Value in pixels representing the height of the image asset.








Example Response
1
2
3
4
{
	"editorId": "2321ej2101293a4e57cdf605",
	"url": "https://www.dragdrop.design/editor/2321ej2101293a4e57cdf605?token=3h2ebaksndohe2o1nen2jkeVCJ9.eyJjbGllbnRLZXlJZCI6InJFMnVlbU1tOGV3ZVFMa243IiwidXNlcklkIjoiMTAwMDEtdGVzdCIsInByb2R1Y3RJZCI6ImI3alc3UG1zZkJ5b1N4UTVtIiwiZGVzaWduSWQiOiJ6dFJNRGlIdXA4b29GaHhMciIsImlzcyI6InBpY2theGUiLC2ebwqhdowqjdnwqjdjkwndw0100218uead0xzUVc5S0ZvR3VaNnR5IiwiZXhwIjoxNTM1MTY2NjM5OTMyfQ.bVnY1DmC9JZYQRklIlCaqusd90109eujnwdnjalXwMtXN4KezaR2-NLpOBIs"
}
Response Elements

editorId

string - 64

A unique identifier of the editor session.

url

string

The path you redirect your user to for them to start editing.

What's Next

Successful Completion of the editor redirects a user to the specified complete URL.

Back to Top 👆
Get in Touch

Interested in integrating with WHCC? Tell us more about what you’re looking for and we’ll be in touch.