Embed A Design
This guide will walk you through how to embed a design using the Core3D Embed APIs.
Note: This guide builds up a previous guide (Generate A Design).
Note: You'll need an API token to perform any of these actions. See the Authentication section of the API Reference. We'll use
$TOKEN
as a placeholder for your API token in the examples below.
Contents
- Step 1 — Choose A Design
- Step 2 — Request The HTML
- Step 3 — Generate A Token
- Step 4 — View The Result
Step 1 — Choose A Design
We'll use the Design generated in our previous guide as an example. The URI for that Design is core3d:design:018d715f-b81f-79e7-a942-c9e4f3f5f1cc
.
Step 2 — Request The HTML
We can request HTML from the Core3D API that we can drop onto our website to display the 3D model.
Request
$ curl -X POST https://api.core3d.io/embed/iframe/v1 \
-H "Authorization: Bearer $TOKEN" \
-H "Content-Type: application/json" \
-d '{
"uri": "core3d:design:018d715f-b81f-79e7-a942-c9e4f3f5f1cc"
}'
Response
{
"html": "<iframe title=\"chill-zebra-2271\" frameborder=\"0\" allow=\"autoplay;\" execution-while-out-of-viewport execution-while-not-rendered src=\"https://api.core3d.io/embed/iframe/v1/core3d:design:018d715f-b81f-79e7-a942-c9e4f3f5f1cc?token=$TOKEN\"></iframe>"
}
Step 3 — Generate A Token
We'll need to replace the $TOKEN
string in the response with a real API token. Exposing a token with read
or write
access in any public context is dangerous -- if the token is visible in your source code it can be extracted and used to view or manipulate resources in your Core3D account. To avoid this, we'll generate a token that meets the following criteria:
- is assigned only the
embed
capability, which provides very limited access to Core3D API resources - has an explicit
origin
allowlist, to prevent it from working on any other origins
Note: You can read more about this in the API Reference.
Request
$ curl -X POST https://api.core3d.io/v1/tokens \
-H "Authorization: Bearer $TOKEN" \
-H "Content-Type: application/json" \
-d '{
"capabilities": ["embed"],
"origins": ["https://www.core3d.io"],
"type": "api",
"user": "~"
}'
Response
{
// ... additional properties omitted
"token": "c3dak_abcdefgh_abcdefghijklmnopqrstuvqx"
}
Step 4 — View The Result
After replacing the $TOKEN
parameter with our new embed
token we can view the result.