How to Use URLbox to Create Website Preview Images for an Indian Blog
Turn a webpage URL into a durable preview image for an Indian blog. Configure URLbox, secure the render, and save a copy before its URL expires.
URLbox turns a webpage URL or HTML input into an image you can use as a blog preview. For a typical article card, choose the source URL, viewport dimensions, and output format, then generate a render link or call the JSON API. If you use the synchronous JSON API, save the returned image to your own media storage: URLbox documents that its renderUrl expires after 30 days. This workflow applies to an Indian blog, but the cited URLbox documentation does not establish India-specific pricing, GST, or regional availability.
1. Choose how the preview will be generated
URLbox documents two ways to use a render: a render link that can be placed directly in an image element, and a JSON API for server-side control. It accepts a URL or HTML input. For a preview of a published article, use that article’s URL.
| Approach | Use it when | Keep in mind |
|---|---|---|
| Render link | You need a straightforward image URL to embed in a page. | Use a secure signed link in production. Keep the signing secret on the server. |
| JSON API | You want server-side control or a synchronous or asynchronous rendering workflow. | The synchronous response’s render URL is temporary; download the image or configure cloud storage for long-term availability. |
The quick start describes a seven-day free trial for a new account. Trial terms can change, so confirm the current offer in URLbox before relying on it.
2. Pick a viewport, format, and crop
Start with the dimensions and aspect ratio used by your blog’s preview card. URLbox documents a default viewport of 1280 × 1024 pixels. Set dimensions deliberately so the source page renders at the intended responsive breakpoint. The output format options documented include PNG, JPEG, WebP, and AVIF.
- Viewport: controls the browser area rendered. Match it to the layout you want readers to recognize.
- Full page or viewport: choose full-page capture for a long-page preview, or viewport capture when the card should show only the first screen.
- Element selection: capture a particular page element when the whole page is not the intended subject.
- Thumbnail sizing and fit: use the documented thumbnail sizing and image-fit controls to resize or crop the result to your card proportions.
- Format: compare quality and file size in your actual design. Choose a format supported by your delivery and image pipeline.
Preview the image at the size it will appear in the blog. Small text can become unreadable after cropping or downscaling. A page can also change after capture, so retain the image version that corresponds to the published article if consistency matters.
3. Create a URLbox render link
Create a URLbox account and get the API key and secret from its dashboard. The quick start describes secure render links signed with HMAC-SHA256 over the query-string options, using the secret key. Follow the current URLbox documentation for the exact parameter names and signing procedure; do not expose the secret in public page markup or client-side JavaScript.
Once signed, the render link can be used as the image source in a blog template:
<img src="SIGNED_URLBOX_RENDER_URL" alt="Preview of the article page" loading="lazy">Use an accurate alt value for the image’s purpose. If a server template produces the signed URL, serve the final HTML to visitors; do not ship the signing secret to the browser. URLbox’s render options include the input, dimensions, format, full-page capture, element selection, thumbnail sizing, and crop behavior. Consult its documentation for the exact option syntax before constructing a URL.
4. Use the JSON API when you need server-side control
The URLbox JSON API supports synchronous and asynchronous rendering. Its secret is sent as a Bearer token, so make the request from a server or a protected job rather than browser JavaScript. The exact request parameters depend on the capture settings you choose; use the current URLbox API documentation for the request schema and response fields.
# Example request shape; add the documented render options for your account and workflow.
curl -X POST "URLBOX_JSON_API_ENDPOINT" \
-H "Authorization: Bearer YOUR_URLBOX_SECRET" \
-H "Content-Type: application/json" \
-d '{"url":"https://example.com/article"}'The endpoint and payload above are placeholders, not a copy-paste URLbox request. Refer to URLbox’s current API documentation for the actual endpoint, required fields, and options. When a synchronous response includes a renderUrl, download the image and store it in your blog’s media library or use URLbox cloud storage if the image must remain available beyond the temporary URL’s lifetime.
5. Store and publish the image
- Generate the render using the target article URL and the desired capture settings.
- Inspect the output at card size, including crop, responsive layout, and legibility.
- Download the resulting image or configure storage so the published blog does not depend on an expiring render URL.
- Save it in the blog’s media storage and reference that durable copy in the post or archive card.
- Regenerate only when you want the preview to reflect a changed source page; keep the saved image when the original published appearance should stay fixed.
The JSON API’s synchronous render URL expires after 30 days according to URLbox’s quick start. Treat it as a temporary delivery location, not an archival URL.
6. Common problems and fixes
| Problem | Likely cause | What to do |
|---|---|---|
| The image is cropped awkwardly | The output dimensions or fit do not match the blog card. | Adjust viewport and thumbnail sizing or crop behavior, then inspect at the final display size. |
| The page looks different from the blog’s expected layout | The viewport triggers a different responsive breakpoint. | Set viewport dimensions to match the layout you want the preview to represent. |
| The render URL stops working later | The synchronous JSON API’s renderUrl is temporary and expires after 30 days. |
Download the image to blog media storage or configure cloud storage. |
| A signed render link is rejected | The query options and signature may not match, or the signing process may not follow the current URLbox requirements. | Generate the HMAC-SHA256 token from the exact query string options using the secret as described in the current quick start. Keep the secret server-side. |
| The API request is unauthorized | The Bearer token is missing, invalid, or the wrong credential was used. | Use the URLbox secret as the JSON API Bearer token and verify it server-side. |
| The image does not show the intended part of the page | The capture mode is full-page or viewport when an element-level capture is needed, or vice versa. | Choose the documented full-page, viewport, or element selection option that matches the card’s purpose. |
7. Performance, reliability, and cost
Choose the smallest dimensions and suitable format that preserve the details readers need; this helps keep blog media manageable, though actual file size depends on the page and output. A render is a point-in-time view of a changing source page, so store the output you publish if you need a stable preview. If you use an asynchronous workflow, account for its completion flow in your publishing process and consult URLbox’s current API documentation for the relevant response behavior.
URLbox’s official pages reviewed for this guide describe a seven-day trial and temporary synchronous render URLs. They do not establish India-specific pricing, INR billing, GST treatment, or regional availability. Check current plan and billing terms directly before estimating costs.
8. Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a screenshot or PDF, and its [documentation](https://screenshotneo.com/docs/) describes the available parameters.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for free.
FAQ
Can I use a URLbox render link directly in a blog image?
Yes. URLbox documents render links that can be used directly in an image element. For production, use a secure signed link and keep the secret on the server.
How do I keep a URLbox preview image available long term?
Download the image to your blog’s media storage or configure cloud storage. The synchronous JSON API’s renderUrl expires after 30 days.
Is this workflow specific to Indian blogs?
The capture steps work for a blog publishing in India, but the researched URLbox documentation does not establish India-specific pricing, tax treatment, or regional availability.
Which output format should I choose?
URLbox documents PNG, JPEG, WebP, and AVIF. Compare the result’s appearance and file size in your publishing pipeline and choose a format your blog supports.
Sources
- URLbox Quick Start for account setup, authentication, render links, and temporary render URL behavior.
- URLbox Render Options for capture and output controls.
