We recommend using the standard API endpoint for most use cases. Only use this endpoint if you specifically need to generate image URLs from client-side code or need to avoid the two-step create-then-fetch process.
Key benefits
This endpoint allows you to generate image URLs that directly render images when accessed:
No POST request needed: Generate image URLs client-side without making API calls
Client-side friendly: Use signed URLs to keep your API Key secure
Simplified workflow: Skip the image creation step and go straight to image rendering
Unlike the standard endpoint that requires a POST request followed by using the returned URL, this endpoint lets you construct a signed URL that will generate and return the image when accessed.
Each API key has an associated API ID (public) and API Key (secret). The token is generated by creating an HMAC SHA256 hash of the query string (without the ?) using your API Key as the secret.
Security note
Never expose your API Key in client-side code. The API ID and generated token are safe to use client-side.
Creating an image
To generate an image with a signed URL, construct a URL with your API ID and token:
get https://hcti.io/v1/image/create-and-render/:api_id/:token/:format
URL Components
Component
Description
api_id
Your public API ID from the dashboard
token
HMAC SHA256 hash of the query string using your API Key (see below for how to generate)
format
Optional file format: png (default), jpg, or webp
Parameters
The parameters are the same as the standard API endpoint, but they must be passed as query parameters in the URL.
Name
Type
Description
html†
String
This is the HTML you want to render. You can send an HTML snippet (<div>Your content</div>) or an entire webpage.
css
String
The CSS for your image. When using with url it will be injected into the page.
url†
String
The fully qualified URL to a public webpage. When passed this will override the html param and will generate a screenshot of the url.
Required params
† Either url OR html is required, but not both. css is optional.
Additional parameters
Optional parameters for greater control over your image.
Name
Type
Description
google_fonts
String
Google fonts to be loaded. Example: Roboto. Multiple fonts can be loaded like this: Roboto|Open Sans
selector
String
A CSS selector for an element on the webpage. We’ll crop the image to this specific element. For example: section#complete-toolkit.container-lg
ms_delay
Integer
The number of milliseconds the API should delay before generating the image. This is useful when waiting for JavaScript. We recommend starting with 500. Large values slow down the initial render time. Learn more.
device_scale
Double
Controls the image resolution by adjusting the pixel ratio. Minimum: 1, Maximum: 3. Higher values increase image quality and file size. For example, 2 will double the resolution. Learn more.
render_when_ready
Boolean
Set to true to control when the image is generated. Call ScreenshotReady() from JavaScript to generate the image. Learn more.
full_screen
Boolean
When set to true, the API will generate an image of the entire height of the page.
viewport_width
Integer
Set the width of Chrome’s viewport. This will disable automatic cropping. Both height and width parameters must be set if using either.
viewport_height
Integer
Set the height of Chrome’s viewport. This will disable automatic cropping. Both height and width parameters must be set if using either.
Understanding HMAC authentication
HMAC (Hash-based Message Authentication Code) is a mechanism for calculating a message authentication code involving a hash function in combination with a secret key. In this API:
The message is your query string (without the leading ?), e.g., html=<div>Hello</div>&css=div{color:red}
The secret key is your API Key
The hash function used is SHA-256
The resulting token is used in the URL path to authenticate the request
This allows you to create signed URLs without exposing your API Key. If any part of the query string is changed without updating the token, the url will be invalid.
const crypto = require('crypto');
function generateToken(queryString, apiKey) {
return crypto
.createHmac('sha256', apiKey)
.update(queryString)
.digest('hex');
}
// Example 1: Using HTML and CSS
const apiId = 'your_api_id_here';
const apiKey = 'your_api_key_here';
const format = 'png';
const queryString = 'html=<div>Hello World</div>&css=div{color:red}';
const token = generateToken(queryString, apiKey);
// Generate the URL
const imageUrl = `https://hcti.io/v1/image/create-and-render/${apiId}/${token}/${format}?${queryString}`;
// Example 2: Using a URL parameter
const websiteUrl = 'https://example.com';
const encodedUrl = encodeURIComponent(websiteUrl);
const urlQueryString = `url=${encodedUrl}`;
const urlToken = generateToken(urlQueryString, apiKey);
// Generate the URL for website screenshot
const screenshotUrl = `https://hcti.io/v1/image/create-and-render/${apiId}/${urlToken}/${format}?${urlQueryString}`;
// Now these URLs can be used directly in an <img> tag or as a link
// <img src="imageUrl" alt="Generated image" />
PHP example
<?php
// Example 1: Using HTML and CSS
$apiId = 'your_api_id_here';
$apiKey = 'your_api_key_here';
$format = 'png';
// Create query string
$html = '<div>Hello from PHP</div>';
$css = 'div{color:blue;font-family:Arial}';
$queryString = 'html=' . urlencode($html) . '&css=' . urlencode($css);
// Generate token
$token = hash_hmac('sha256', $queryString, $apiKey);
// Generate the URL
$imageUrl = "https://hcti.io/v1/image/create-and-render/$apiId/$token/$format?$queryString";
echo "Generated image URL: $imageUrl\n";
// Example 2: Using a URL parameter
$websiteUrl = 'https://example.com';
$urlQueryString = 'url=' . urlencode($websiteUrl);
$urlToken = hash_hmac('sha256', $urlQueryString, $apiKey);
// Generate the URL for website screenshot
$screenshotUrl = "https://hcti.io/v1/image/create-and-render/$apiId/$urlToken/$format?$urlQueryString";
echo "Screenshot URL: $screenshotUrl\n";
// Use the URLs directly in your HTML
// echo '<img src="' . htmlspecialchars($imageUrl) . '" alt="Generated image">';
Example response
When you access a valid signed URL, the API will return the generated image directly with the appropriate content type header (image/png, image/jpeg, or image/webp depending on the format).
If there’s an error, you’ll receive a JSON response: