`exports/shopify-appointment-embed.html`

94 lines
<!--
  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.
-->