Architecture Overview

Complete data flow architecture from the client-side in Webflow to the backend services.

Data Flow Diagram

┌─────────────────────────────────────────────────────────┐
│              Client-Side (Webflow) + (11ty)             │
│  ┌────────────────────────────────────────────────┐    │
│  │  User → UCP Session → Consent UI → History    │    │
│  └────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────┘
                          ↓
┌─────────────────────────────────────────────────────────┐
│            Middleware (Xano/n8n)                        │
│  ┌────────────────────────────────────────────────┐    │
│  │  Webhook → Workflow → Transform & Enrich      │    │
│  └────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────┘
                    ↓                ↓
        ┌───────────────┐  ┌───────────────────┐
        │    Shopify    │  │   Google AI       │
        │  Metaobjects  │  │  Data Stream      │
        │   Customer    │  │  AI Processing    │
        └───────────────┘  └───────────────────┘
                          ↑
                    WebSocket
                    Real-time Updates

1. Client-Side (Webflow) + (11ty)

The user interacts with Front End (Webflow Design Modules/11ty templates) paired with Shopify Native Mirror of synced front end. All user actions, session data, and consent changes are captured on the client-side.

UCP Session Management

A client-side JavaScript module manages the UCP session, handling session creation, data storage in localStorage or sessionStorage, and retrieval. The session includes a unique session ID, user authentication status, and session-specific information.

sessionId, userId, email, consentStatus, userHistory

User History Tracking

JavaScript event listeners capture all significant user actions such as page views, button clicks, and form submissions. Each event is stored with a timestamp, event type, and relevant metadata.

Consent Management

A consent management UI allows users to grant or revoke consent for different data processing purposes. Consent status is stored in the UCP session and persisted in localStorage. When consent changes, a webhook is triggered to notify the middleware.

2. Middleware (Xano/n8n)

The middleware processes incoming webhooks, transforms and enriches data, and orchestrates the data flow to backend services.

Webhook Endpoint

A webhook endpoint receives POST requests from the Webflow front-end, triggered by significant events like consent changes or page views.

Data Transformation

The workflow parses incoming JSON payloads and transforms data into the format required by Shopify and Google AI APIs. This includes renaming fields, restructuring data, and enriching with additional information like IP geolocation.

Idempotency Checks

All operations implement idempotency checks to prevent duplicate processing. Each operation is assigned a unique key and logged to ensure data consistency.

idempotencyKey = sessionId_eventType_timestamp

3. Backend Services

Shopify Metaobjects

Custom Metaobject definitions store user consent status, browsing history, and last active timestamps. These are associated with customer records for comprehensive user profiles.

  • ▪ consent_status: JSON
  • ▪ user_history: JSON
  • ▪ last_seen: DateTime

Google AI Data Stream

User interaction data is streamed to Google AI Platform for real-time analysis, enabling personalization, recommendations, and analytics dashboards.

  • ▪ Real-time analytics
  • ▪ ML model training
  • ▪ Personalization

4. Real-time Updates

WebSocket Communication

The middleware emits events via WebSockets to the client-side, allowing for real-time updates to the user interface based on backend processing. This enables instant feedback for consent confirmations, personalization updates, and other user-facing changes.

Client ← WebSocket ← Middleware → Backend Services

Security Considerations

Data Encryption

All data in transit between the client, middleware, and backend services MUST be encrypted using TLS. Sensitive user data stored in Shopify Metaobjects should be encrypted at rest.

Authentication

All API requests to the middleware and backend services MUST be authenticated using API keys or OAuth 2.0 tokens. Webhooks from Webflow should be secured using a secret key to verify authenticity.

Consent Management

User consent preferences MUST be respected at all times. Data should only be processed for purposes for which the user has given explicit consent.