docs(appointments): Shopify embed snippet + copy-paste instructions

09005938d9dfa5bf552aa292dfaddcba41cdba91 · 2026-05-12 06:50:24 -0700 · SteveStudio2

Self-contained HTML page at exports/shopify-appointment-embed.html with
the <div id=appt-widget data-owner=...> + <script src=...embed/appointments.js>
snippet, plus admin-side instructions for Shopify Pages source view,
sandbox/CSP notes, and a per-owner OAuth reminder.

Files touched

A exports/shopify-appointment-embed.html

Diff

commit 09005938d9dfa5bf552aa292dfaddcba41cdba91
Author: SteveStudio2 <steve@designerwallcoverings.com>
Date:   Tue May 12 06:50:24 2026 -0700

    docs(appointments): Shopify embed snippet + copy-paste instructions
    
    Self-contained HTML page at exports/shopify-appointment-embed.html with
    the <div id=appt-widget data-owner=...> + <script src=...embed/appointments.js>
    snippet, plus admin-side instructions for Shopify Pages source view,
    sandbox/CSP notes, and a per-owner OAuth reminder.
---
 exports/shopify-appointment-embed.html | 93 ++++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)

diff --git a/exports/shopify-appointment-embed.html b/exports/shopify-appointment-embed.html
new file mode 100644
index 0000000..2957f24
--- /dev/null
+++ b/exports/shopify-appointment-embed.html
@@ -0,0 +1,93 @@
+<!--
+  Smart Scheduling — Shopify Embed Snippet
+  ─────────────────────────────────────────
+  Drop the snippet below into a Shopify Page.
+
+  HOW TO PASTE INTO SHOPIFY
+  -------------------------
+  1.  In Shopify admin go to:
+         Online Store  →  Pages  →  Add page
+
+  2.  Title:  "Book an Appointment"   (or anything you like)
+      Handle: book-appointment        (yields /pages/book-appointment)
+
+  3.  In the page-content editor, click the < > Show HTML button
+      (top-right of the rich-text editor).  Paste the EMBED SNIPPET
+      below between the <main> tags Shopify already shows you.
+
+  4.  Save the page.  Add the page to a menu if you want a nav link.
+
+  5.  You can change data-owner to any email that has connected its
+      calendar at https://venturacorridor.com/api/appointments/oauth/start
+
+  6.  Optional: add data-business-id="123" to tag bookings with a
+      specific Ventura Corridor business row id.
+
+  ─────────────────────────────────────────
+  EMBED SNIPPET  ↓ (everything between BEGIN and END)
+  ─────────────────────────────────────────
+-->
+
+<!-- ───── BEGIN COPY ─────────────────────────────────────────── -->
+<div id="appt-widget" data-owner="info@designerwallcoverings.com"
+     style="max-width:780px;margin:32px auto;min-height:820px;background:#0a0a0c">
+  <noscript>
+    <p style="text-align:center;padding:32px;font-family:sans-serif">
+      Please enable JavaScript to book an appointment, or
+      <a href="https://venturacorridor.com/book?owner=info@designerwallcoverings.com">
+        click here to book on our site
+      </a>.
+    </p>
+  </noscript>
+</div>
+<script src="https://venturacorridor.com/embed/appointments.js" async></script>
+<!-- ───── END COPY ───────────────────────────────────────────── -->
+
+<!--
+  WHAT THIS DOES
+  --------------
+  * The loader script lazy-mounts an <iframe> only when the widget
+    scrolls into view (IntersectionObserver), so it doesn't hurt
+    page-speed scores on the Shopify storefront.
+
+  * The iframe is sandboxed:  allow-scripts allow-forms
+    allow-same-origin allow-popups — it cannot navigate the parent
+    page, cannot read parent cookies cross-origin, but CAN run its
+    own JS and submit its own forms.
+
+  * Bookings POST to venturacorridor.com and are persisted in our
+    Postgres.  Customers see a confirmation page hosted on
+    venturacorridor.com.
+
+  * If/when info@designerwallcoverings.com has connected their
+    Google Calendar via the OAuth flow, bookings will ALSO appear
+    on the Google calendar automatically.  Until then, bookings
+    simply sit in the appointment database (no calendar push, no
+    email — review them at the admin /api/appointments/list).
+
+  TROUBLESHOOTING
+  ---------------
+  * Widget never appears?
+      Open browser devtools → Network tab.  You should see two
+      requests to venturacorridor.com:
+        - /embed/appointments.js   (the loader, ~2 KB)
+        - /book?owner=...&embed=1  (the iframe page, ~12 KB)
+      If either is blocked, check Shopify's content-security policy
+      under Online Store → Themes → Customize → Theme settings.
+
+  * "OAuth not configured" error on the connect link?
+      That means Steve hasn't yet pasted GOOGLE_OAUTH_CLIENT_ID +
+      GOOGLE_OAUTH_CLIENT_SECRET into the venturacorridor.com .env.
+      Bookings still work without it — they just won't auto-push to
+      Google Calendar.
+
+  CHANGING THE WIDGET OWNER
+  -------------------------
+  Edit the data-owner attribute.  Examples:
+
+    <div id="appt-widget" data-owner="someone@yourshop.com"></div>
+
+  Each owner must run through
+    https://venturacorridor.com/api/appointments/oauth/start?owner_email=someone@yourshop.com
+  once to connect their calendar.
+-->

← b66894f feat(appointments): self-contained Smart Scheduling widget + · back to Ventura Corridor · Virtual Blvd Gallery + 3-tier business store · 3am autonomou f95cfa2 →