Templates that you've designed in Orshot Studio are Studio Templates. These templates are custom designs that you can customize and paramterize
You can render content from a custom template that you've designed using Orshot Studio by making POST request to Orshot API
https://api.orshot.com/v1/studio/renderawait fetch("https://api.orshot.com/v1/studio/render", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer <ORSHOT_API_KEY>",
},
body: JSON.stringify({
templateId: <TEMPLATE_ID>,
modifications: {
canvasBackgroundColor: "#eff2fa", // Supports CSS Color Values(HEX, RGBA, linear-gradient)
canvasBackgroundImage: "https://acme.com/public/web-background.png",
title: "Custom Title",
imageUrl: "Custom Image URL"
},
response : {
type: "base64",
format: "png",
scale: 1, // control scale of the image/pdf, scale = 1(set size), 2 = double the size
includePages: [1, 3] // only for multi-page templates
fileName: "" // specify custom file name(without extension) for output file
},
pdfOptions : { // applicable only if response.format is "pdf"
margin: "20px",
rangeFrom: 1, // show only from page 1(set to "null" to show all pages)
rangeTo: 2, // to page 2(set to "null" to show all pages)
colorMode: "rgb", // set color mode for PDFs (supports "rgb" and "cmyk")
dpi: 300 // set DPI for the PDF
},
publish: { // optional — publish render to connected social accounts
accounts: [1, 2], // social account IDs from your workspace
content: "Check out our latest design!", // caption for the post
},
}),
});{
"data": {
"content": "data:image/png;base64,iVBORw0.....",
"format": "png",
"type": "base64",
"responseTime": 325.22
},
// only if publish object was included in the request
"publish": [
{ "platform": "twitter", "username": "acmehq", "status": "published" },
{ "platform": "instagram", "username": "acmeinsta", "status": "published" }
]
}data.content, it's in string formatdata.content, it's in array format with contenttemplateId: Each Studio template has a unique templateId(integer) which you can see on Template's page or paygroundmodifications: Object structure of the dynamic modidifcations that you've set in the template. Additionally, you can also use style parameters to dynamically set styles for your layers, learn moreresponse.format - Supports png, webp, jpg, pdf, mp4, webm, gifresponse.typeresponse.fileName: works only when the response type is either url or binary, can be used to specify custom file name for the output files. In carousel templates, the file name will be suffixed by -page-1, -page-2 etc. Also if response/format is set to url, the custom file name will be suffixed with -[UNIQUE_HASH] to make sure it's a unique filepublish: Optional object to publish the render directly to connected social accounts
publish.accounts: Array of social account IDs from your workspacepublish.content: Caption/text for the social postpublish.isDraft: Set to true to save as draft instead of publishingpublish.schedule.scheduledFor: ISO date string to schedule the post for laterpublish.timezone: Timezone string (e.g. "America/New_York") for schedulingpublish.platformOptions: Per-account options keyed by account ID (e.g. LinkedIn firstComment, Pinterest title/link). See Publish from APIFor templates with video elements, you can render them as video files by setting response.format to mp4, webm, or gif.
await fetch("https://api.orshot.com/v1/studio/render", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer <ORSHOT_API_KEY>",
},
body: JSON.stringify({
templateId: <TEMPLATE_ID>,
modifications: {
"videoElement": "https://example.com/custom-video.mp4", // Dynamic video URL
"videoElement.trimStart": 0, // Start time in seconds
"videoElement.trimEnd": 10, // End time in seconds
"videoElement.muted": false, // Include audio
"videoElement.loop": true, // Loop the video
},
videoOptions: { // global video option
trimStart: 0, // in seconds
trimEnd: 20, // in seconds
muted: true,
loop: true,
},
response: {
type: "url",
format: "mp4", // or "webm", "gif"
},
}),
});For video elements with a parameter ID set, you can pass dynamic video properties:
{parameterId} - Custom video URL{parameterId}.trimStart - Start time in seconds{parameterId}.trimEnd - End time in seconds{parameterId}.muted - true or false for audio{parameterId}.loop - true or false for looping