Using Mockups

This guide will show you how to enhance your screenshots by applying device mockups directly through the screenshot API.

Available Mockups

Screenshotly provides several mockup templates that can be applied when capturing screenshots:

Template ID	Description	Best For
`browser-light`	Modern browser with light theme (1920×1036)	Websites, web apps
`browser-dark`	Modern browser with dark theme (1920×1036)	Dark mode websites
`iphone-14`	iPhone 14 Pro with Dynamic Island (1000×1760)	Mobile apps, responsive designs
`macbook-pro`	Modern MacBook Pro (1980×1230)	Desktop applications

Using Mockups

To apply a mockup, simply include the mockup parameter in your screenshot request:

const response = await fetch('https://api.screenshotly.app/screenshot', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_TOKEN',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://example.com',
    device: 'desktop',
    mockup: 'browser-light',
    format: 'png'
  }),
});

const screenshot = await response.blob();

Browser Window Mockup

The browser mockup is perfect for showcasing websites:

const response = await fetch('https://api.screenshotly.app/screenshot', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_TOKEN',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://example.com',
    device: 'desktop',
    mockup: 'browser-light',
    aiRemoval: {
      enabled: true,
      types: ['cookie-banner', 'ad'],
      confidence: 0.8
    }
  }),
});

Mobile Device Mockup

Perfect for showcasing mobile-responsive designs:

const response = await fetch('https://api.screenshotly.app/screenshot', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_TOKEN',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    url: 'https://example.com',
    device: 'mobile',
    mockup: 'iphone-14'
  }),
});

Best Practices

Match Device and Mockup: Use appropriate device settings for each mockup:
- browser-light/browser-dark: Use with device: 'desktop'
- iphone-14: Use with device: 'mobile'
- macbook-pro: Use with device: 'desktop'

Clean Screenshots: Use AI removal to clean up unwanted elements before applying mockups:

{
  device: 'desktop',
  mockup: 'browser-light',
  aiRemoval: {
    enabled: true,
    types: ['cookie-banner', 'ad', 'chat-widget'],
    confidence: 0.8
  }
}

Image Quality: Use PNG format for best results with mockups:

{
  device: 'desktop',
  mockup: 'browser-light',
  format: 'png'
}

Next Steps

Learn about AI element removal
Explore API token management
Check out the API reference

Getting Started

API Reference

Guides

Resources

Using Mockups

Using Mockups

Available Mockups

Using Mockups

Browser Window Mockup

Mobile Device Mockup

Best Practices

Next Steps

​Using Mockups

​Available Mockups

​Using Mockups

​Browser Window Mockup

​Mobile Device Mockup

​Best Practices

​Next Steps

Using Mockups

Available Mockups

Using Mockups

Browser Window Mockup

Mobile Device Mockup

Best Practices

Next Steps