# How to Vibe Code Your Own Eloqra (and Stop Paying for It)

> Free live chat widget that goes to your Telegram

- Site: https://eloqra.app
- Category: Customer Support
- Verdict: **Solid side project** (75/100 vibecodeable)
- Estimated effort: 2 weekends

## Verdict

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.

### What you can't replicate

- The Eloqra brand and existing user base

## What it 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

Founded 2026.
Team size: 1 (Solo developer).

## The hard parts

- 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 vibe code Eloqra

### Prerequisites

- Node.js (free): Required for running the Next.js development environment and building the widget script.
- Telegram Bot Token (free): Required to test bot webhook forwarding and receive operator messages.
- GitHub (free): Source control and deployment pipeline integration.

### Recommended AI tools

- Claude Code: Best-in-class coding agent for scaffolding full-stack Next.js apps, database schemas, and vanilla JS widget bundles.
- Cursor: Ideal for fine-tuning the client-side widget DOM rendering and Tailwind dashboard styling.

### 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

- Cloudflare (Hosting the Next.js dashboard, API routes, and serving the static widget script via Workers/Pages on the edge): $0/mo

### Build guide

1. **Project 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.
```

2. **Dashboard 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.
```

3. **Vanilla 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).
```

4. **Visitor 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.
```

5. **Telegram 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.
```

6. **Telegram 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

**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 the SaaS instead: $4.99/mo (Pro)
- Build time: 12-16 hours
- AI tool credits: $20 (Claude Pro)
- Break-even: N/T (Build for learning/fun)

## Sources

- [Eloqra Official Website](https://eloqra.app)