Dynamic Parameters

What are Dynamic Parameters?#

Dynamic parameters let you change how template elements look and behave at render time — without creating separate templates. Using a simple dot notation syntax, you can override colors, fonts, sizes, positions, and even generate AI content on the fly.

Video Tutorial#

Key Capabilities#

Dynamic parameters enable you to:

1. Override Styles - Change colors, fonts, sizes, and other CSS properties
2. Generate AI Content - Use .prompt to generate text and images with AI
3. Add Interactive Links - Use .href to make elements clickable in PDFs
4. Switch Content Types - Use .contentType to render a text element as an image or vice versa

How It Works#

When you parameterize an element in Orshot Studio (e.g., naming a text element title), you can override its properties using the format:

parameterID.property

Basic Examples#

{
  "modifications": {
    "title": "New Title Text",
    "title.fontSize": "48px",
    "title.color": "#ff0000",
    "subtitle.fontFamily": "Roboto"
  }
}

Multi-Page Templates#

For templates with multiple pages, prefix with the page number:

{
  "modifications": {
    "page1@title": "First Page Title",
    "page2@title": "Second Page Title",
    "page1@title.fontSize": "48px"
  }
}

Supported Properties by Element Type#

All Elements (Position & Size)#

These properties are available for all parameterized elements (text, image, shape, video):

Position & Dimensions:

• x - Horizontal position in px (e.g., "200px")
• y - Vertical position in px (e.g., "100px")
• width - Element width in px (e.g., "500px")
• height - Element height in px (e.g., "300px")

Common Effects:

• opacity - 0 to 1
• filter - CSS blur filter (e.g., "blur(2px)")
• dropShadowX, dropShadowY, dropShadowBlur, dropShadowColor - Drop shadow properties

{
  "modifications": {
    "title.x": "200px",
    "title.y": "100px",
    "logo.width": "150px",
    "logo.height": "150px",
    "banner.opacity": "0.8"
  }
}

Text Elements#

Content & Typography:

• fontSize - Size in px (e.g., "24px")
• fontWeight - Weight from 100-900 (e.g., "700")
• fontStyle - "normal" or "italic"
• fontFamily - Any Google Font or uploaded custom font
• color - Hex or rgba color
• lineHeight - Line height (e.g., "1.5")
• letterSpacing - Letter spacing in px
• textAlign - "left", "center", or "right"
• verticalAlign - "flex-start", "center", or "flex-end"
• textDecoration - "none", "underline", etc.
• textTransform - "none", "uppercase", "lowercase", "capitalize"

Effects:

• textStrokeWidth - Outline width in px
• textStrokeColor - Outline color
• backgroundColor - Background color behind text
• backgroundRadius - Border radius for background
• opacity - 0 to 1
• filter - CSS blur filter (e.g., "blur(2px)")
• dropShadowX, dropShadowY, dropShadowBlur, dropShadowColor - Drop shadow properties

Reserved Properties:

• .prompt - AI text generation (see AI Generation)
• .href - Add clickable links (see Links)
• .contentType - Render as image (see Render As)

Image Elements#

Layout & Styling:

• objectFit - "contain", "cover", "fill", etc.
• objectPosition - Position (e.g., "center center")
• borderRadius - Corner radius in px
• borderWidth - Border width in px
• borderColor - Border color
• boxShadowX, boxShadowY, boxShadowBlur, boxShadowColor - Box shadow properties

Effects:

• opacity - 0 to 1
• filter - CSS blur filter
• dropShadowX, dropShadowY, dropShadowBlur, dropShadowColor - Drop shadow properties

Reserved Properties:

• .prompt - AI image generation (see AI Generation)
• .href - Add clickable links (see Links)
• .contentType - Render as text (see Render As)

Shape Elements#

• fill - Fill color
• stroke - Stroke color
• strokeWidth - Stroke width in px
• borderRadius - Corner radius in px
• opacity - 0 to 1
• filter - CSS blur filter
• dropShadowX, dropShadowY, dropShadowBlur, dropShadowColor - Drop shadow properties

Usage Across Integrations#

Dynamic parameters work consistently across all Orshot integrations:

REST API#

{
  "templateId": "your-template-id",
  "modifications": {
    "title": "Hello World",
    "title.fontSize": "48px",
    "title.color": "#ff0000"
  }
}

Dynamic URLs#

https://api.orshot.com/v1/studio/dynamic-url/my-image?
title=Hello%20World&
title.fontSize=48px&
title.color=%23ff0000

Property Value Formats#

Colors#

{
  "title.color": "#ff0000", // Hex
  "subtitle.color": "rgba(255,0,0,1)" // RGBA
}

Sizes#

{
  "title.fontSize": "48px", // Pixels (recommended)
  "title.letterSpacing": "2px"
}

Fonts#

{
  "title.fontFamily": "Roboto", // Google Font
  "subtitle.fontFamily": "MyCustomFont" // Uploaded custom font
}

URLs#

{
  "logo": "https://example.com/logo.png",
  "banner.href": "https://example.com"
}

Case Insensitivity#

Property names are case-insensitive for convenience:

{
  "title.fontsize": "48px", // Works
  "title.fontSize": "48px", // Also works
  "title.FONTSIZE": "48px" // Also works
}

Best Practices#

1. Use Consistent Units - Stick to px for sizes to avoid rendering issues
2. Test Property Values - Use the Playground to test modifications before deploying
3. Validate Colors - Use valid hex or rgba formats
4. Check Font Availability - Ensure custom fonts are uploaded or use available Google Fonts
5. Handle Multi-Page Templates - Always prefix with page number when applicable

Next Steps#

• Learn about AI Content Generation with .prompt
• Add Interactive Links with .href
• Switch content types with Render As with .contentType
• Explore API Reference for complete integration details