URL screenshots for marketing

Create marketing images from live webpages

Capture landing pages, product launches, customer sites, and campaign sections without recreating them in a design tool.

Start free Read the API docs
  • Automation-friendly API
  • Full-page campaign captures
  • CSS selector cropping
Real URL screenshot API requests followed by their rendered webpage images.
Request
POST https://hcti.io/v1/image
{
"url": "https://google.com",
"viewport_height": 480,
"viewport_width": 640
}
https://hcti.io/v1/image/019fb43a-a8b4-7017-a337-6bac3e7305a0
https://google.com
Screenshot of Google in a small viewport

Live demo

Try the URL screenshot API

Enter a public URL, add optional CSS, and generate a real website screenshot with the same controls available through the API.

Options

Enter a public webpage URL.

Apply styles after the page loads and before the screenshot is captured.

Content
Adjust how content is rendered by adjusting these settings.
?

A CSS selector for an element in the HTML. We’ll crop the image to this specific element.

Image size & Cropping
Images are automatically cropped by default. We crop to the outermost HTML element. For extra tweaking, use these settings.
?

Take a screenshot of the entire screen

?

Adjusts the pixel ratio for the screenshot. The default is 2 which is equivalent to a 4K monitor.

?

Set the width of Chrome's viewport. This will disable automatic cropping.

?

Set the height of Chrome's viewport. This will disable automatic cropping.

Set the viewport to landscape orientation.

Timing
By default the API generates a screenshot once everything is loaded. If the page executes JavaScript, you may want extra time before the image is rendered.
?

Adds extra time for JavaScript to execute. Use this if you're seeing a blank image and are using JavaScript.
Default: 0. Start with 500 if needed.

?

Sets a limit on time to wait until the screenshot is taken. Use this if your page loads a lot of extra irrelevant content, and you want to reduce the render time.

?

Check to control when the image is generated.
Call ScreenshotReady() from JavaScript in your code to trigger the image generation.

Browser Context
These settings will impact how Chrome is started, giving you more control when taking screenshots.

Instructs the viewport to behave as if it's being viewed from a mobile device.

Instructs the viewport to behave as if it is being viewed on a device supporting touch events.

?

Set Chrome to render assuming the user has explicitly set their browser to Light or Dark mode.

Set Chrome to render as if it's being set to print or screen mode.

?

Render your image with Chrome set to a specified timezone.

?

Attempt to block cookie/consent banners from displaying

Send X-HCTI-SCREENSHOT: 1 with the top-level page navigation

?

Remove the background of the rendered image.

Preview

Your screenshot will appear here

Enter a URL, choose the settings you need, and generate the image.

Use cases

Reuse the webpages you already publish

Browse image examples

Social and content previews

Turn landing pages, products, and articles into images for social and publishing channels.

Campaign QA screenshots

Capture desktop and mobile campaign pages for review before and after launch.

Customer and partner spotlights

Create consistent snapshots of customer sites, partner pages, and featured work.

No-code screenshot automation

Send webpage captures into content automations instead of taking and cropping screenshots by hand.

Precise capture

Capture a full page, viewport, or element

Choose the exact area of the webpage that should appear in the screenshot.

Full-page screenshots

Capture the complete page from top to bottom, including content below the fold.

"full_screen": true

Element screenshots

Target a CSS selector and crop the final image to one component, card, chart, or section.

"selector": "#campaign-hero"
#campaign-hero

Viewport size

Set the browser viewport width and height for consistent desktop, tablet, or mobile captures.

1440 x 900
viewport_width + viewport_height

Browser controls

Capture JavaScript-rendered pages in the right state

Set viewport, color scheme, timezone, mobile behavior, consent-banner blocking, and capture delay before the screenshot is taken.

  • Timing controls

    Add a delay, set a timeout, or trigger capture with ScreenshotReady().

  • Device behavior

    Set mobile emulation, orientation, and touch input.

  • Page environment

    Choose light or dark mode, timezone, and screen or print media.

  • Clean output

    Inject custom CSS or attempt to hide cookie and consent banners.

POST https://hcti.io/v1/image request example.
Request
POST https://hcti.io/v1/image
{
"url": "https://example.com",
"viewport_width": 390,
"viewport_height": 844,
"viewport_mobile": true,
"viewport_touch": true,
"color_scheme": "dark",
"ms_delay": 500,
"block_consent_banners": true
}

URL to image

Create a website screenshot in three steps

  1. Send a URL and options

    Authenticate from your server and send the public URL with any viewport, selector, or browser settings.

  2. Get an image ID and URL

    The API response includes an image ID and a hosted URL for the screenshot.

  3. Use the screenshot

    Embed the hosted URL, download the image, or save the file in your own system.

Ready to capture?

Start taking website screenshots

Send one API request and receive a hosted image URL. Add viewport, full-page, selector, and browser controls when you need them.

Start free Read the API docs

Explore more workflows

See how URL screenshots fit your workflow

Explore practical ways different teams use webpage captures.

AI & Agents

Capture rendered webpages for vision models, task records, and automated UI checks.

View workflow

Developers

Automate webpage screenshots with explicit browser, viewport, and device settings.

View workflow

Sales

Add company, product, and contact-page screenshots to prospecting and CRM systems.

View workflow