Hand Lab — Booking Chatbot

The widget is three static files — i18n.js, chatbot.js and chatbot.css — with no build step and no framework. Host them anywhere (same site, S3/CloudFront, or the backend's /widget path) and add the snippet below to any page.

Option A — Floating launcher (recommended)

Add this before </body>. A "Agendar cita 💅" button appears at the bottom-right of the page and opens the chat panel.

<!-- Hand Lab booking chatbot -->
<link rel="stylesheet" href="https://handlab-booking.appypie.workers.dev/chatbot.css" />
<script>
  // Backend origin. Point this at wherever the API is hosted — the current
  // live deployment is the Cloudflare Worker below. (Only needed when the
  // page embedding the widget is on a DIFFERENT origin than the API.)
  window.HANDLAB_API_BASE = 'https://handlab-booking.appypie.workers.dev';
</script>
<script src="https://handlab-booking.appypie.workers.dev/i18n.js"></script>
<script src="https://handlab-booking.appypie.workers.dev/chatbot.js"></script>

Option B — Inline (inside your own container)

Add an empty <div id="handlab-chatbot"></div> where you want the chat to appear (give it a width and height), then load the same scripts. When the div exists, the widget renders inside it instead of floating.

<!-- Hand Lab booking chatbot (inline) -->
<link rel="stylesheet" href="https://handlab-booking.appypie.workers.dev/chatbot.css" />

<div id="handlab-chatbot" style="max-width: 420px; height: 640px;"></div>

<script>
  window.HANDLAB_API_BASE = 'https://handlab-booking.appypie.workers.dev';
</script>
<script src="https://handlab-booking.appypie.workers.dev/i18n.js"></script>
<script src="https://handlab-booking.appypie.workers.dev/chatbot.js"></script>

Configuration

• window.HANDLAB_API_BASE — origin of the backend API. Must be set before chatbot.js loads. If unset, the widget calls the same origin that serves the page — correct when the widget is hosted by the backend itself (the live Cloudflare Worker at https://handlab-booking.appypie.workers.dev, or the local dev server's /widget path). Set it explicitly only when embedding on another site, e.g. thehandlab.mx.
• Languages — Spanish (default) and English. The visitor can switch at any time with the ES / EN toggle in the header.
• Stripe — https://js.stripe.com/v3/ is loaded lazily and only when GET /api/payments/config reports payments are enabled. Payments are now LIVE — the widget collects the 250 MXN deposit per person into the salon's own Stripe account before confirming the booking.