The verdict: can you vibe code Eloqra?
You can build this clone in a weekend or two, but the single biggest catch is wrestling with vanilla DOM injection so your chat script doesn't break customer websites.
Eloqra is a classic focused indie SaaS with a single core loop: client-side chat script talking to a backend that forwards payloads to the Telegram Bot API and back. An AI coding agent will generate the Next.js dashboard and Telegram webhook routes effortlessly. However, building the sub-5kb vanilla JavaScript widget that injects cleanly into arbitrary customer sites—without using an iframe and without inheriting broken host styles or causing layout shifts—requires careful manual CSS scoping and testing.
Estimated effort: 2 weekends
What you can't replicate
- The Eloqra brand and existing user base
Founded
2026
Raised
—
Team
1 (Solo developer)
Cheapest paid tier
$0
What Eloqra does
Lightweight live chat widget for websites that routes incoming visitor messages directly into Telegram and provides an operator Mini App.
Core features
- Sub-5kb vanilla JavaScript embedded script that mounts a chat DOM widget
- Per-project widget customization dashboard (theme, accent palette, position, greeting)
- Webhook receiver for widget messages and forwarding to Telegram Bot API
- Telegram Bot bi-directional webhook handler (reply in Telegram routes back to visitor)
- Telegram Mini App for multi-visitor conversation history and project management
- Visitor context collection (page URL, browser, device type, geo/country lookup)
The business
Pricing
- Free$0
- Pro$4.99/mo
Funding
Unknown / bootstrapped
Pay vs build, cumulative
Break-even at month 3 — after that, every month is money kept.
The hard parts of vibe coding Eloqra
- Writing a framework-agnostic client widget under ~5kb that safely injects into arbitrary host DOMs without iframe overhead or CSS leaks
- Mapping bi-directional Telegram chat threads to specific website visitor sessions reliably without a native chat database per visitor
- Handling Telegram Mini App session validation and Telegram Web App initialization data securely
How to vibecode Eloqra
Prerequisites
Node.jsfree
Required for running the Next.js development environment and building the widget script.
Telegram Bot Tokenfree
Required to test bot webhook forwarding and receive operator messages.
GitHubfree
Source control and deployment pipeline integration.
AI coding tools
Recommended stack
| Frontend | Next.js App Router + Tailwind CSS + Vanilla JS widget script |
|---|---|
| Backend | Next.js API Routes / Server Actions |
| Database | Turso (SQLite at the edge for ultra-lightweight project and message state) |
| Auth | better-auth |
| Other | Telegram Bot API, Telegram Web App SDK |
Hosting & infrastructure
| Cloudflare | Hosting the Next.js dashboard, API routes, and serving the static widget script via Workers/Pages on the edge | $0/mo |
Build guide
01Project Scaffolding and Database Schema
Initialize a Next.js project with Tailwind CSS and configure Turso with better-auth for user accounts and project management.
Scramble a new Next.js project using App Router and Tailwind CSS. Set up Turso (libSQL) with Drizzle ORM. Define database tables for users, projects (name, domain, widget settings like theme, accent color, position, greeting), visitors, and messages. Configure better-auth for email/password authentication so users can manage multiple projects.02Dashboard UI & Project Settings
Build the dashboard interface where users can configure their chat widget settings and copy the embed script tag.
Build a clean dashboard layout in Next.js App Router with a project switcher. Create a project settings page with live preview controls for widget theme (light/dark), 6 accent color palettes, launcher position (bottom-right/left), custom greeting, and optional pre-chat form toggle. Display the one-line embed script tag pointing to our hosted widget script.03Vanilla JS Widget Script (~5kb)
Develop the standalone client-side script that injects the chat bubble into customer websites without an iframe.
Write a lightweight, vanilla JavaScript widget script (bundled under 5kb) that customer sites embed via a single <script> tag. The script should fetch project configuration from our backend API, inject a shadow DOM or namespaced CSS container into the document body to prevent style leakage, render the floating chat bubble and chat window, handle open/close animations, and capture visitor context (current page URL, device type, browser, and geo country via IP lookup).04Visitor Chat Loop & API Endpoints
Implement the API routes that receive visitor messages from the widget and persist conversation state.
Implement Next.js API routes for the widget: POST /api/chat/init (to create or resume a visitor session and return history), and POST /api/chat/message (to receive a visitor message, save it to Turso, and trigger outbound forwarding to Telegram). Ensure CORS headers allow embedding on any origin.05Telegram Bot Integration & Webhooks
Connect the Telegram Bot API to forward visitor messages to the project owner and handle incoming replies from Telegram.
Set up Telegram bot webhook handling in Next.js. When a visitor sends a message from the widget, format a rich Telegram message including visitor context (page, browser, country, device) and send it via the Telegram Bot API to the linked chat ID, including inline buttons. Implement a webhook receiver endpoint for incoming Telegram messages (replies from the operator) that parses the reply thread ID, saves the operator message to Turso, and pushes it back to the visitor widget in real time.06Telegram Mini App Operator Console
Create the Telegram Mini App interface enabling operators to view conversation history and manage chats inside Telegram.
Build a Telegram Mini App view in Next.js optimized for mobile web view inside Telegram. Authenticate requests using Telegram Web App initData validation. Provide a full multi-visitor conversation list, scrolling chat history view, and quick reply composer so operators can manage conversations and project settings entirely within the Telegram app.
Cost vs paying for Eloqra
What will you build it with?
Starting total with Claude Code$0 one-time
Starting costs (one-time)
- Domain name (optional)$12
Total~$12 one-time
Ongoing costs (monthly)
- Cloudflare Pages & Turso DB$0/mo
Total$0/mo
Paying for Eloqra
$4.99/mo (Pro)
Your time to build
12-16 hours
AI tool credits
$20 (Claude Pro)
Break-even
N/T (Build for learning/fun)
Vibe code Eloqra: FAQ
- Can you vibe code Eloqra yourself?
- Solid side project — 75/100 vibecodeable. You can build this clone in a weekend or two, but the single biggest catch is wrestling with vanilla DOM injection so your chat script doesn't break customer websites.
- How long does it take to vibe code Eloqra?
- 2 weekends — roughly 12-16 hours of hands-on time with an AI coding agent.
- How do you build your own Eloqra?
- Scoped to personal use: Next.js App Router + Tailwind CSS + Vanilla JS widget script on the front, Next.js API Routes / Server Actions behind it, Turso (SQLite at the edge for ultra-lightweight project and message state) for data. Follow the 6-step build guide on this page — each step has a paste-ready prompt for an AI coding agent.
- How do you code your own Eloqra without being an expert?
- Use an AI coding tool (Claude Code or Cursor) and work in small steps: scaffold, data model, core screens, then deploy. Realistic effort: 2 weekends. The prompts on this page are written so the AI does the heavy lifting.
- How much does it cost to vibe code Eloqra instead of paying?
- About ~$12 one-time to start and $0/mo to run, versus $4.99/mo (Pro) for Eloqra. Break-even: N/T (Build for learning/fun).
- What stack should you use to vibe code Eloqra?
- Next.js App Router + Tailwind CSS + Vanilla JS widget script; Next.js API Routes / Server Actions; Turso (SQLite at the edge for ultra-lightweight project and message state); plus Telegram Bot API, Telegram Web App SDK.