Lesson 8 of 8 · 4 min

The Client-Facing Delivery Gallery

Understand what the client sees when they open their delivery link — gallery layout, download options, marketing assets, and invoice.

The Client-Facing Delivery Gallery

Video coming soon

8/8

Lesson Notes

01

The delivery page is the client's window into their completed project. It is accessed via a unique token URL (/delivery/[token]) and is accessible without authentication for viewing — authentication is only required to approve or comment. The page opens with a full-width hero header (DeliveryHeader) showing the organization's branding, the property cover image pulled from the first uploaded photo, the property address, and a Download button in the top-right corner.

02

The media gallery (DeliveryGallery) renders below the approval section and groups all delivered media by type using tabs: Photos, Videos, Floor Plans, Documents, and Virtual Tours — tabs only appear for types that have at least one item. Photos render in a responsive thumbnail grid with 4:3 aspect ratio cards. Clicking any thumbnail opens a full-screen lightbox with previous/next navigation, a download button per item, and a copy-link button. Videos show a thumbnail extracted from the file; clicking opens an embedded player. Floor plans and documents open inline when possible, with an external link fallback.

03

The Download button in the header opens a download dialog (DeliveryDownloadDialog) that lets the client confirm which media types to download before generating the ZIP. Clicking Download All in the dialog triggers a backend job that bundles all files into a signed CDN artifact. The download state machine runs through: preparing → generating → ready → browser redirect to the signed URL. The client sees a live status indicator. If ZIP preparation fails, a retry option appears. Downloads are blocked when the job has a blocking invoice (the amber payment-required banner appears instead, with a Pay Now button linking to the payment page).

04

The Marketing section appears below the gallery when the project has a published listing URL or a brochure PDF. A Property Website card shows the full URL with a copy-link and open-in-new-tab button. Brochure cards link to the PDF. The Invoice section renders below marketing when a non-blocking invoice is attached — it shows the invoice total and status in a centered card. Blocking invoices gate downloads and show the payment banner instead of the invoice card.

05

A floating chat bubble (DeliveryDiscussionBubble) sits in the bottom-right corner. Clicking it opens a discussion panel where the client can leave comments visible to the provider team. This is a separate channel from the Team and Client chat inside the job — it is specifically for delivery feedback and is accessible to authenticated visitors only. Comments submitted here appear in the provider's job detail, creating a feedback loop without requiring the client to log into the main Vremly app.

Key Takeaways

  • Gallery tabs appear per media type — only tabs with content are shown.
  • Download generates a signed CDN ZIP artifact; state progresses through preparing → generating → ready.
  • Blocking invoices gate all downloads; clients see a Pay Now button to resolve before downloading.
  • The floating chat bubble enables delivery-specific comments separate from the internal job chat.
  • Marketing assets (property website, brochure) surface below the gallery as tappable cards.
Related documentation at docs.vremly.com