Capturekit Integration With Heyboss For Building A Screenshot Tool
Building a screenshot tool sounds like the kind of thing you’d need a caffeine addiction and advanced coding skills for.
Here’s the twist: you don’t. By integrating Capturekit’s screenshot API with Heyboss.io, you can simply tell the platform what layout you want, buttons, titles, the whole lot and it turns your idea into a fully working screenshot tool.
The purpose of building this guide is to show how I built a screenshot tool for myself, how you can do it, and introducing you to this API.
What You’ll Need?
Capturekit API (you’ll get 100 free credits when you sign up)
Heyboss.io account (you get 5 AI edits per day and 30 credits per month on the free plan)
Step 1: Grab Your API Key
After signing up, you’ll land on the Capturekit dashboard. On the left-hand side, click API Keys. There you’ll find your access key. It’s hidden by default, but once you click Show, it’ll appear. Copy it and keep it somewhere safe. You’ll need it later.
Step 2: Build Your API URL
Click on Playground from the sidebar and select the Screenshots option. This is where you can test things out by entering a URL, tweaking a few settings, and instantly see how the screenshot will look. You can also download it directly.
To set that up, expand the Advanced options menu. Because this is just a simple app, I chose PNG as the format, left the device option as None, and switched on Full Page Screenshot. Every change you make here updates the generated API URL on the right.
This generated API URL is what Capturekit uses to create the screenshot. We’ll later use this URL inside Heyboss so the app can call the API and return live webpage screenshots on demand.
Step 3: Build the App on Heyboss
Heyboss is a no-code builder that turns plain text instructions into working web apps, so you don’t need to write a single line of code.
Once you’ve signed up for Heyboss, you’ll land on a screen where you can describe how you want your application to look. Think of it as giving simple instructions to an assistant: layout, background colour, title, colour codes, and any other details you care about.
For this example, I kept things simple. The UI just has two input fields one for the API key and one for the website URL. Along with that, I added a preview window to display the screenshot and a button to download the image. You can add more features if you like, but this setup is enough to get a basic tool working.
Now for the Capturekit integration. You’ll give Heyboss the API URL we generated earlier in the Playground. That URL already includes the parameters you selected (format, full-page, etc.). In the Heyboss setup, replace the API key and website URL in the request with dynamic inputs so users can provide their own.
Note: If you’re building this for business use, you can also hard-code your Capturekit API directly into the integration. In that case, the only field you’d need from the user is the website URL.
For the prompt, you can think about what features you’d like in your app, write them down, and give that prompt to Heyboss. If you’re unsure how to phrase it, you can even describe your idea to ChatGPT and ask it to generate a Heyboss-ready prompt that the platform will understand.
I’ve pasted my prompt below you can use it as is, or tweak things like the colours, titles, and layout to match your own style.
Copy and Paste this Prompt to Heyboss.io:
Build a minimal web app called Instant Website Screenshot with the following requirements:
Background colour: white
Title at the top: Instant Website Screenshot in colour #833BFF
Subtitle just below the title: powered by capturekit.dev in very light grey font
Add two input fields:
API Key (text input)
Website URL (text input)
Add a button labelled Capture. When clicked, it should:
Call this API:
https://api.capturekit.dev/capture?&access_key=API_KEY&url=WEBSITE_URL&full_page_scroll=false&full_page=true
Replace API_KEY with the value from the API Key field
Replace WEBSITE_URL with the value from the Website URL field
Display the returned screenshot below the button as a preview
Show a Download Screenshot button under the preview that lets the user download the PNG image file
Keep the UI clean, minimal, and modern
Now the Heyboss AI team will start doing their work. They’ll chat with you directly inside the platform and begin building your web screenshot capturing app.
It might not be perfect on the first go and that’s totally normal. Just tell the AI in the chat what’s not working, or what you’d like to adjust, and it will fix things step by step. The clearer and more precise your prompt is, the better the app will be.
I’ve already tested mine, and it turned out exactly how I wanted. Watch my Instant Website Screenshot capturing tool in action in the video below:
The result is sleek, clutter-free, and surprisingly fun to use. Just drop in your API key and a website URL, hit Capture, and boom you’ve got a live preview on the screen. One more click and the PNG is downloaded straight to your device.
Conclusion:
So there you have it. What might sound like a project for hardcore coders is actually something you can build in minutes. With Capturekit’s screenshot API and Heyboss.io’s no-code builder, you can also create a working screenshot tool. Just like I did, and make it even better and more functional than mine.
I’ve already shown you my version in the video above, but now it’s your turn.
👉 Sign up for Capturekit here and start with 100 free credits. You can use them right away to build your own Instant Website Screenshot app or even go further and automate screenshot-taking for your business.
If you’re interested in automation, here are some step-by-step tutorials you might like: