Skip to content
Template Food & Drink FreeClaude prompt

Chai Adda

Warm café & restaurant website with a tabbed menu and WhatsApp ordering

by Haptags Studio · Updated Sept 2026
chai-adda.demo — Food & DrinkOpen live preview ↗
Full-page screenshot of the Chai Adda template
Chai Adda on a phone

Mobile view

About this template

Chai Adda is built for the neighbourhood café that wants to look as good online as it tastes in person. The hand-drawn chai illustration, warm cream-and-brown palette and friendly serif headings feel local and inviting, not corporate.

Customers can browse the menu by category, check if you're open right now and order on WhatsApp in one tap — no apps, no commissions, no website backend to maintain.

What's inside

  • Sticky header with WhatsApp order button
  • Hero with animated chai illustration
  • Scrolling favourites ticker
  • Today's specials cards
  • Tabbed menu with ₹ prices & veg marks
  • Our story with stat tiles
  • Visit us: map, hours & directions
  • Floating WhatsApp button

Highlights

  • One-tap WhatsApp ordering
  • Menu tabs powered by a few lines of JavaScript
  • Today's hours highlighted automatically
  • Works offline — no external images
  • Mobile-first and accessible
  • LocalBusiness SEO built in via the prompt
✦ Free Claude prompt

Build your own version with Claude

Add your details, copy the prompt and paste it into Claude. You'll get a complete website as a single HTML file — save it as index.html and open it in your browser.

  1. Fill in your details
  2. Copy the prompt
  3. Paste into Claude & press Enter
chai-adda-prompt.txt · 38 lines Copy & open Claude ↗
You are an expert web designer and front-end developer. Build a complete, production-ready one-page website for my café as a single HTML file (HTML + CSS + vanilla JavaScript in one file — no frameworks, no build step).

BUSINESS DETAILS
- Name: [Your business name]
- Location: [Your area, city]
- Phone / WhatsApp: [Your WhatsApp number]
- Email: [Your email address]
- Opening hours: Mon–Fri 7 AM–11 PM, Sat–Sun 7 AM–12 AM

DESIGN DIRECTION
- Mood: a warm, cosy Indian chai-house — friendly, handmade and a little playful
- Colours: cream background #FBF4E8, chai brown #5B3420 (primary), saffron #E39B2D (accent), leaf green #2F6B45 (veg marks), ink #2B1B12 (text)
- Fonts (Google Fonts): "Fraunces" for headings (bold, with one italic accent word), "Manrope" for body text
- Rounded cards (20px radius), soft shadows, generous white space, gentle hover lifts
- Mobile-first and fully responsive from 360px to 1440px

PAGE SECTIONS (in this order)
1. Sticky header: logo mark + name, links (Specials, Menu, Our story, Visit us), a green "Order on WhatsApp" button and a hamburger menu on mobile
2. Hero: an "Open today" pill with the hours, a big headline with one italic highlighted word, a short intro, two buttons (See the menu, Order on WhatsApp), three quick facts (ready in 10 min, delivery radius, 100% vegetarian) and an inline SVG illustration of a glass of cutting chai with animated steam and a bun maska on a plate
3. A slightly rotated scrolling ticker (marquee) of favourite items
4. Today's specials: 3 cards, each with a small SVG illustration, name, description, price in ₹ and an "Add to order" button
5. Menu: tabs for Chai & Coffee, Snacks and Sweets that filter items with JavaScript; each item has a veg mark, name, one-line description, a dotted leader line and a realistic price in ₹ (6 items per tab)
6. Our story: a dark brown rounded section with 2 short paragraphs and 4 stat tiles
7. Visit us: a stylised map placeholder with a pin, the address, an opening-hours table that highlights today automatically, and "Get directions" (Google Maps link) and "Call" buttons
8. Footer with the current year set by JavaScript and a few links

FUNCTIONALITY
- Every WhatsApp button opens https://wa.me/<digits-only number with 91>?text=<URL-encoded message> using my number above
- A floating round WhatsApp button in the bottom-right corner with a soft pulse animation
- Smooth scrolling, an accessible mobile menu (aria-expanded), visible focus styles, aria-labels on icon buttons and prefers-reduced-motion support
- No external images: use inline SVG and CSS for every visual so the page loads fast and works offline

SEO
- A descriptive <title> and meta description that mention the café name and area
- Open Graph tags, and CafeOrCoffeeShop JSON-LD with name, address, phone and opening hours

OUTPUT
Return the complete HTML file in one code block. Then list the 5 things I should personalise before publishing (menu, prices, photos, map link and hours).
Highlighted words update as you type. Anything in [square brackets] is yours to fill in.
Copied! Now open Claude, paste with Ctrl+V (⌘V on Mac) and press Enter.

Tip: Claude can keep editing for you — try follow-ups like “make the header sticky”, “add a photo gallery” or “translate the page into Kannada”.

FAQ

Can customers pay online?

This template takes orders on WhatsApp. If you want UPI or card payments on the site, add our Online Payments Setup plugin.

Do I need to know how to code?

No. Claude writes all the code. You only need to copy the prompt, paste it into Claude and save the file it gives you. If you get stuck, message us — we're happy to help.

Can I use it for my business?

Yes — free items are free for personal and commercial use, with no attribution required.

Can Haptags build it for me instead?

Yes. We can customise this design with your content, connect your domain and WhatsApp, and publish it for you. Book a free consultation to get a quote.

FreeChai Adda Get the prompt
Marketplace
Talk to us
📞 Phone:+91 99868 61402
✉️ Email:info@haptags.com
🔐 Client login