The Designs call allows you to easy and dynamically query our database of designs to present options to your customer. You can either do this on demand or periodically, it will always return the full catalog of designs offered based on your credentials.
/designsContent-type: application/json
1
2
3
4
curl https://prospector.dragdrop.design/api/v1/designs \
-H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.r3udhowqndkwqneoiqwndjwndei12u390912hrbfhaslkdjbqwiei21nbrhewiuornqwjkfhbaiwodnqwjkbdawuosdhowqubdfjkwbdusandbiwquebio12nedbwbaodpqwnebou12rbwkjalndawuobdnwqndfqwbdfoiwqndpiqwhfiwqnkjdlnwqdnioqwhniorqw3nfjwbaodnwdnqwopd" \
-H "Accept: application/json" \
-H "Content-Type: application/json"
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
[
{
"_id": "zCmKRwkBxBqyd75tC",
"product": {
"_id": "benT9erT8BwHrn6Ws",
"name": "5x7 Flat Card Horizontal"
},
"family": {
"_id": "F6k2L2g3ajq8Q8nZH",
"name": "enchanted holiday",
"priorityVal": 1
},
"occasion": {
"_id": "2xSNk4YaKPtzPpCur",
"name": "holiday"
},
"name": "5x7 flat card horizontal",
"faces": [
{
"name": "Front",
"nodeId": 10000,
"layouts": [
{
"name": "layout_1",
"photoCount": 1,
"previews": {
"purple": "https://s3.amazonaws.com/designs-stage.dragdrop.design/previews/zCmKRwkBxBqyd75tC/10000/layout_1_purple_CL675.jpg",
"blue": "https://s3.amazonaws.com/designs-stage.dragdrop.design/previews/zCmKRwkBxBqyd75tC/10000/layout_1_blue_D7E9B.jpg"
}
},
{
"name": "layout_2",
"photoCount": 1,
"previews": {
"purple": "https://s3.amazonaws.com/designs-stage.dragdrop.design/previews/zCmKRwkBxBqyd75tC/10000/layout_2_purple_ZJBCG.jpg",
"blue": "https://s3.amazonaws.com/designs-stage.dragdrop.design/previews/zCmKRwkBxBqyd75tC/10000/layout_2_blue_CFY6I.jpg"
}
}
]
},
{
"name": "Back",
"nodeId": 10001,
"layouts": [
{
"name": "layout_1",
"photoCount": 1,
"previews": {
"purple": "https://s3.amazonaws.com/designs-stage.dragdrop.design/previews/zCmKRwkBxBqyd75tC/10001/layout_1_purple_H8EKD.jpg",
"blue": "https://s3.amazonaws.com/designs-stage.dragdrop.design/previews/zCmKRwkBxBqyd75tC/10001/layout_1_blue_V7GCE.jpg"
}
},
{
"name": "layout_2",
"photoCount": 3,
"previews": {
"purple": "https://s3.amazonaws.com/designs-stage.dragdrop.design/previews/zCmKRwkBxBqyd75tC/10001/layout_2_purple_QJ9CD.jpg",
"blue": "https://s3.amazonaws.com/designs-stage.dragdrop.design/previews/zCmKRwkBxBqyd75tC/10001/layout_2_blue_7C601.jpg"
}
}
]
}
],
"metadata": {
"shapes": ["no", "a2", "a3", "a4", "a5", "b2", "c6", "c13", "d3", "e1"],
"hasFoils": true
},
"themes": {
"purple": {
"swatch": [102, 45, 127],
"foil_pressed_foil_color": "rose_gold"
},
"blue": {
"swatch": [13, 155, 182],
"foil_pressed_foil_color": "gold"
}
},
"selections": {
"foil_pressed_designs": "making_spirits_bright",
"foil_pressed_foil_color": "rose_gold",
"shapes": "c6",
"themes": "purple"
},
"published": {
"on": "2017-10-02T15:57:53.870Z"
},
"publishState": "published"
},
{...}
]
The response object from this call returns JSON containing an object of designs. The main piece of relevant data is the IDs of these items, but the following additional data is returned to help you offer a complete selection experience on your end. All the data you need to visually show products, designs, and attributes that effect them, as well as to show live pricing for those options, is contained in the response.
_id
string - 32
The ID of the design. You'll pass this in to create an editor of this design.
product
object
information about the parent product for this design.
_id
string - 32
The ID that represents this parent product
name
string - 250
The name of the parent product, generally able to be presented to an end user.
family
object
information about the parent family for this design. Design families are unique sets of designs that have a similar visual design pattern. For example a family of "Watercolor Ferns" could contain multiple designs for a wedding, each with consistent watercolor design elements, examples of children design could be: an Invitation, a Save the Date, a Place Card, a Menu, a RSVP card.
_id
string - 32
The ID that represents this parent product
name
string - 250
The name of the parent product, generally able to be presented to an end user.
priorityVal
float - 32
A value set by our marketing team to denote relative priority of this design family, which can conceptually be used for sorting or prioritization purposes.
occasion
object
information about the parent occasion for this design. Occasions are things like Wedding, Holiday, etc. Categories of cards that would be presented to the end user in a grouped fashion.
_id
string - 32
The ID that represents this parent occasion.
name
string - 250
The name of the parent product, generally able to be presented to an end user.
name
string - 255
The name of the design. This generally describes the product more specifically, since families are also named and where the "style" of the design conceptually comes from.
For example a design might be named "Thank You" or "Invite" or "Holiday Greeting" where a family would be named something like "Plaid Greetings".
In our first-party implementation we don't surface design names to users, just family names, and because most families only contain one design these names might generally not be that relevant.
faces
object
The array contains the order attributes (shipping and packaging options) for this product.
name
string - 255
The name for this attribute category.
nodeId
int - 10
The node this face is attached to, typically a number like 10000 that can be mapped back to the available nodes for a product.
layouts
object
The individual child attributes.
name
string
The name of layout.
photoCount
int
The number of photo boxes the layout contains.
previews
object
The marketing preview photos for this layout.
THEME-COLOR
string - 250
The key of this object is the theme color of the marketing preview, the URL is a jpeg on s3 that represents this faces appearance with this color theme selected. These images are jpegs without bleed, shape, or foils included (since this items can be dynamically changed based on the selections and themes below). So if you are presenting these to an end user you'll typically want to mask them, and overlay foils on-top if applicable. We've documented an SVG to get you started on making these previews lower on this page.
metadata
object
Contains additional metadata about this design, such as attributes that are offered, like shapes.
themes
object
This object contains data about color variant themes that are applied to this family of designs. These are used to dynamically re-color designs programmatically inside the editor. This data is provided to enable offering filtering and sorting by color options.
THEME-NAME
string - 255
This object contains the details needed to present available color options to the user. Each key is the slug we use to refer to the theme, and what you can pass in as a selection when creating an editor to diverge from the default.
swatch
object
An RGB sequence of values representing the color that primarily represents this theme.
foil_pressed
_foil_color
string
Present if this card includes foil, and this theme has a foil associated with it.
selections
object
A key value pairing the represents the default attributes selected for this design.
Often the results of a design API call will turn into a grid of designs that your end user can select from. As you can see from the example response above, we provide tons of information about a design to aid in the construction of this interface, and leave it up to you to work up the perfect design appropriate for your users.
That said, we'd like to provide some code which can help you with one of the most complicated parts, delivering an accurate preview of what a card will look like, with all of its attributes applied. Specifically cut shapes and foil overlays are not a part of the design files, and since users can dynamically adjust them we don't return a file with them applied. Using this SVG as a starting point you should be able to build an SVG (and effect it dynamically if you'd like) to indicate what a design will look like.
Here's a starting point for building inline svgs in your card selection grid. We've used % to enclose variables which will need to be populated in the language of your choice. All of this data can be found by combining the product + design you are attempting to preview.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<svg viewbox="0 0 %WIDTH + 200% %HEIGHT + 200%"> <!-- this width and height of the viewbox places the card with 100units in each direction, to give space for a drop shadow -->
<g filter="url(#dropshadow)"> <!-- this adds a dropshadow around the card, if you remove this you can potentially also remove the + 200 above, and areas where we place items as 100x100 -->
<g clip-path="url(#%ORIENTATION%-%DEFAULT_SHAPE%-5x7)"> <!-- this clips the card based on the defs file, to dynamically change the shape adjust the def referenced -->
<image x="100" y="100" width="%WIDTH%" height="%HEIGHT%" xlink:href="%CARD_FRONT_IMAGE%"></image> <!-- this image is a preview of the front of the card -->
<!-- if a foil is present include the next bit to specify an image to overlay -->
<g filter="url(#foil-%DEFAULT_FOIL_COLOR%)"> <!-- to dynamically change the foil color target this element, and change the def referenced -->
<g filter="url(#foil-texture)">
<image xlink:href="https://cdn.dragdrop.design/foils/%DEFAULT_FOIL_NAME%-%CARD_ORIENTATION%-medium.png" x="100" y="100" width="%WIDTH%" height="%HEIGHT%"></image>
<!-- feel free to reference the foil image from our CDN, we provide a medium sized asset perfect for grid overlaying -->
<!-- %CARD_ORIENTATION% is 7x5 (landscape cards) or 5x7 (portrait cards) -->
</g>
</g>
<!-- end foil overlay specific code -->
</g>
</g>
</svg>
You'll notice a lot of defintion referencing in the above SVG. We've provided an SVG file you can include inline in your document to provide ID-based definitions which will help clip card shapes, and overlay foils on top of them. In addition to the SVG code sample provided below, which both can be used inline in your html.
5×7" Flat Card Shape and Foil Definitions SVG (This SVG file contains only definitions (defs) so attempting to load it directly will result in an error, because there is nothing to render.)
