Heatbot
Heatbot turns a page screenshot and its matching heatmap into improved HTML, CSS and JavaScript. Aimed at teams that already track user behaviour, it converts interaction data into redesign code plus a written improvement report on the Pro plan.
What is Heatbot?
Heatbot is a data-driven generative UI builder published by RandomFour, LLC. It sits between a heatmap tool and a front-end developer: instead of reading a heatmap and guessing which changes matter, you hand the picture to a vision model and get a reworked page back as code.
The homepage is blunt about the problem it targets. Interpreting heatmap data accurately and prioritising changes is hard, user experience has to be balanced against business goals, and rolling changes out consistently across devices demands a cross-functional team, A/B testing, staff time and, in the vendor's words, thousands of dollars for software developers. Heatbot's answer is to compress that into one product: Meet your UX agency in one tool.
The workflow has four steps. You upload a screenshot of the page or section you want to improve, then the heatmap image of exactly the same area, exported from your tracking software. You pick an improvement goal from a prompt library or write your own, and Heatbot generates improved HTML, CSS and JavaScript. Cited goals include raising conversion rates, improving accessibility and reducing visual clutter, and the model can return several variants of the same page.
Output follows the plan. Basic covers plain CSS or Bootstrap; Pro adds Tailwindcss, Foundation and other popular frameworks, React, Vue and Svelte components, a written improvement report, and a choice between Claude Sonnet 4.5, 3.7 and 3.5, GPT-4o, GPT-4o Mini and GPT-3.5 Turbo. Heatbot never captures heatmaps itself: it works from exports produced by Hotjar, Microsoft Clarity, Mouseflow, CrazyEgg and Heatmaps.com.
The Heatbot 2.0 release of April 2025 moved the product onto credits and added organisations, with email invitations, admin and member roles, seat tracking and credit transfers, plus in-studio comments, a generation history recording asset URLs, timestamps and credit cost, and projects kept private inside an organisation. It is a web product only, reached after signing in with email and password, a magic link or Google.
What it does
- Generate improved HTML, CSS and JavaScript from a page screenshot paired with its heatmap
- Steer the generation with a predefined improvement goal such as conversion, accessibility or reduced visual clutter
- Produce several alternative versions of the same page from one analysis
- Write a detailed improvement report explaining the changes, on the Pro plan
- Output React, Vue or Svelte components, or plain markup in Bootstrap, Tailwindcss or Foundation
- Switch the underlying model between Claude Sonnet 4.5, 3.7 and 3.5, GPT-4o, GPT-4o Mini and GPT-3.5 Turbo
- Run projects as a team with seats, roles, private projects, in-studio comments and a full generation history
When to use Heatbot / When not to
A quick filter to help you decide if Heatbot is the right fit.
When to use Heatbot
- Conversion specialists who already run Hotjar, Microsoft Clarity, Mouseflow, CrazyEgg or Heatmaps.com and want to move from reading a heatmap to shipping a change
- Small product and design teams without a dedicated UX agency, who need several redesign options for one page rather than one hand-drawn mockup
- Front-end developers who would rather start from generated HTML, CSS and JavaScript in their own framework than from a static image
- Freelancers and solo founders running a handful of projects, for whom the 9 USD entry tier is cheaper than an hour of external design work
- Agencies and small businesses on the Pro plan who need three seats, private projects, in-studio comments and a written improvement report to hand to a client
When not to use Heatbot
- Anyone without a heatmap tool already in place: Heatbot analyses images you export, it does not record user sessions itself
- Teams looking for an A/B testing platform, since the tool generates redesign candidates but runs no experiment and measures no result
- Developers who need programmatic access: there is no public API, no documentation page and no command-line entry point
- Mobile-first teams expecting an iOS or Android app, a browser extension or a desktop client, none of which exist
- Organisations with strict procurement requirements, which will find no DPA, no subprocessor list, no hosting disclosure and no GDPR statement anywhere on the site
How to use Heatbot
A typical end-to-end flow, from setup to results.
- Create an account: the Generate button leads to /dashboard, which redirects to sign-in with email and password, a magic link or Google
- Pick a subscription, since all three published tiers are paid and each carries its own monthly credit allowance
- Take a screenshot of the whole page or the specific section of the interface you want to improve
- Export the matching heatmap image from your tracking software, covering exactly the same area as the screenshot
- Upload both images to the same project, keeping the screenshot and the heatmap paired
- Choose an improvement goal from the predefined prompt library, or write a custom goal on the Pro plan
- Select the output framework, and on Pro the AI model, before launching the generation
- Run the generation, which costs 25 credits, or 50 credits when using Sonnet 3.7
- Read the improvement report and compare the generated variants, then export the HTML, CSS and JavaScript
- Invite teammates, assign admin or member roles, comment on iterations in the Studio and review the generation history
Pros & Cons
Pros
- Covers the whole path from heatmap to shippable code, with no intermediate mockup stage to redraw by hand
- Works with the heatmap tools teams already pay for instead of demanding yet another tracking script
- Lets the Pro user choose the model behind each generation, including recent Claude and GPT releases
- Outputs in several CSS frameworks and, on Pro, as React, Vue or Svelte components rather than a flat image
- Adds a written improvement report on top of the code, which makes the reasoning reviewable by a client or a manager
- Prices generation transparently at 25 credits a run, so a monthly allowance translates into a predictable number of attempts
- Team features are real rather than cosmetic: seats, roles, private projects, comments and extra seats at 5 USD per month
Cons
- Legal documentation is minimal and visibly unmaintained: one page each for terms and privacy, unchanged since 29 July 2024
- The privacy policy names ShipFast in its children's section and points to a Contact Us page that does not exist on the site
- No GDPR mention, no stated user rights, no retention period, no DPA, no subprocessor list and no hosting disclosure anywhere
- Nothing is said about whether uploaded screenshots and heatmaps may be used to train models
- No postal address is published, on heatbot.io or on the publisher's own site
- No free plan and no free trial is announced, and a heatmap tool must already be paid for elsewhere before Heatbot is useful
- Yearly prices are not visible in the page source, the last blog post dates from April 2025, and monthly credits do not roll over
Pricing & Plans
There is no free plan and no free trial announced on the site. The lowest paid entry point is the Basic plan at 9.00 USD per month, which includes one seat, up to two projects and 1,350 monthly credits. The Pro plan costs 29.00 USD per month, and the Enterprise plan starts at 2,990 USD per month. Only monthly amounts are published in the page itself; a yearly billing toggle exists but its figures are rendered by the browser and could not be verified. Payments are handled by Stripe.
- 1 user seat
- up to 2 projects
- 1
- 350 credits per month (non-transferable)
- HTML
- CSS and JavaScript output
- plain CSS or Bootstrap
- predefined improvement goals only. No custom goal prompts and no improvement report.
- 3 seats included with additional seats at 5 USD per month each
- up to 15 projects
- 4
- 350 credits per month (non-transferable)
- everything in Basic
- Bootstrap
- Tailwindcss
- Foundation and other popular frameworks
- unlimited seats
- unlimited projects
- unlimited generations per day
- everything in Pro
- custom integration development
- 24/7 support and SSO via SAML 2.0. Contact goes through an email enquiry rather than self-service checkout.
Data, GDPR & hosting
A consolidated view of how Heatbot handles your data.
GDPR overview
There is no GDPR implementation to report: the word GDPR appears nowhere on the site. The privacy policy, in force since 29 July 2024, lists the data collected and states a single purpose, but names no legal basis, no data subject rights such as access, rectification, erasure, portability or objection, no retention period, no data protection officer, no Article 27 representative, no data processing agreement and no subprocessor list. The only channel offered is hello@heatbot.io. The terms do state that the agreement is governed by the laws of Slovakia, an EU member state, which implies the regulation applies even though the vendor never addresses it. One detail weakens the document further: the children's privacy section names ShipFast, a different product, showing the policy was left as an unedited template.
Who owns the data?
Heatbot's terms are short on ownership. Section 2 states that buying a package grants the right to use the application and that you own the code Heatbot generates. Nothing is said about the screenshots and heatmap images you upload, so their status is left undefined. On the account side, the vendor collects your name, email address and payment details; payment information is not stored on its own servers but handled by third-party processors. The privacy policy limits sharing to what order processing requires and states that personal data is never sold, traded or rented to others. No retention period, no deletion procedure and no data ownership clause for uploads is documented.
Reuse rights
Because the terms hand ownership of the generated code to the customer, that output can be reused, modified, shipped and commercialised without asking Heatbot for permission; nothing in the documents reserves a licence back to the vendor. In the other direction, Heatbot states that personal data is used for the sole purpose of order processing, meaning order confirmations, customer support and status updates, and that it is shared with third parties only where order processing requires it, such as payment processors. Web cookies gather non-personal data such as IP address, browser type, device information and browsing patterns in order to improve the service. The uploaded screenshots and heatmaps are never mentioned in either document, and no use of customer material to train AI models is described, permitted or ruled out.
Data retention & training
Hosting summary
Heatbot publishes nothing about where customer data is hosted. There is no trust or security page, no hosting region or country is named in the privacy policy or the terms, and no infrastructure provider is mentioned anywhere on the site. The complete sitemap holds six URLs, so this is a documented absence rather than a page that was missed. The only jurisdictional statement available is in the terms, which say the agreement is governed by the laws of Slovakia; the publisher, RandomFour, LLC, gives no postal address on the site. One point is stated explicitly: payment information is not stored on Heatbot's own servers and is handled by third-party payment processors, which are never named. A network lookup places the domain's IP address on Amazon infrastructure in the United States, but that is an observation about the web server, not a vendor statement about where user projects, uploaded screenshots or generated assets are stored. Anyone with a hosting requirement will have to ask.
Things to keep in mind
Risks and trade-offs to weigh before adopting Heatbot.
- The privacy policy names ShipFast instead of Heatbot in its children's section and links to a contact page that does not exist, which signals a legal document nobody has reread since July 2024
- Nothing in the terms or the privacy policy says what becomes of the screenshots and heatmaps you upload, so avoid feeding it captures of authenticated pages containing real customer data
- No retention period, no deletion procedure and no hosting disclosure means you cannot tell a client, or a regulator, how long their interface data is kept or where
- The generated redesign is a hypothesis, not a proven uplift: the tool runs no experiment and measures no result, so shipping its output without an A/B test is a leap of faith
- Leaning on generated layouts can quietly erode a team's own reading of user research, replacing the habit of interpreting behaviour with the habit of accepting a suggestion
- Optimising every page for the goal you typed can degrade what you did not type, pushing accessibility or clarity aside in favour of a conversion metric
- Commercial pressure points to watch: the early adopter discount is advertised as limited to 20 places with no counter or deadline, monthly credits do not roll over, yearly prices are not visible in the page source, and the last blog post dates from April 2025
Setup & Integrations
Technical difficulty
Low to start, moderate to finish. There is nothing to install and no script to add to the site you are analysing: the tool works from uploaded images. You need an account, a paid plan and an existing heatmap tool you know how to export from. The one strict requirement is that the heatmap must cover exactly the same area as the screenshot. The real effort comes afterwards, because the output is code you integrate yourself, so front-end skills are needed to put a generated page into production. Framework and model selection are Pro-plan settings; Enterprise adds SAML 2.0 single sign-on.
Deployment
Integrations
Supported languages
Behind Heatbot
Resources
All the official URLs gathered for verification and reference.
Frequently asked questions
What does Heatbot actually do?
Do I need a heatmap tool before I can use Heatbot?
What code do I get back?
How much does one generation cost?
Is there a free plan or a free trial?
Is there an API or a mobile app?
Who owns the code Heatbot generates?
What does Heatbot say about GDPR and data retention?
Should you pick Heatbot?
Heatbot occupies a narrow but real gap. Plenty of tools record how visitors behave, and plenty generate interfaces from a prompt, but few take the recorded behaviour as the input and return code. Pairing a screenshot with the heatmap of the same area, steering the generation with an explicit goal and getting HTML, CSS and JavaScript in the framework of your choice is a genuinely useful shortcut for a small team that has heatmap data and no design capacity to act on it.
The product is more mature than a weekend project. The 2.0 release added credits, organisations, seats, roles, in-studio comments, a generation history and private projects, and the Pro plan lets you choose the model behind each run. Pricing is legible: 9 USD a month to start, 29 USD for three seats and the report, then a steep jump to 2,990 USD for Enterprise.
What has not kept pace is everything around the product. The terms and privacy policy are one page each, unchanged since July 2024, and the privacy policy still names ShipFast in its children's section and links to a contact page that does not exist. GDPR is never mentioned, no retention period or deletion route is documented, nothing is said about whether uploaded material feeds model training, and no postal address is published anywhere. For an independent or a small agency, that is a tolerable trade against a 9 USD entry price. For a company with a procurement checklist, those blanks are the deciding factor, and the only way to fill them is to write to hello@heatbot.io and ask.
- Choosing a selection results in a full page refresh.
- Opens in a new window.