Enterprise Systems Architecture

How it works: Customers access a responsive collection link (konspot.com/c/{campaign_slug}) or an embedded inline iframe with hardware camera and microphone access.

• Hardware Video & Audio: Leverages the HTML5 MediaRecorder API with allow="camera;microphone" permissions, enabling zero-install 30-second video reviews.
• Bidirectional Iframe Resizing: Communicates via iframeResizer.contentWindow.js using window.postMessage to continuously adapt container height dynamically, preventing double scrollbars.
• Incentive Delivery: Unlocks post-submission rewards (thank-you videos, promotional coupon codes, or instant redirects).

How it works: Submissions are ingested by core backend microservices (api.konspot.com on edge runtimes) and routed to cloud infrastructure.

• Direct Cloud Storage Uploads: High-resolution video recordings, logos, and avatars upload directly to Cloudflare R2 / AWS S3 (media.konspot.com) via presigned URLs.
• Automated Subtitle Transcription (Roadmap): Video recordings queue for speech-to-text processing to generate synchronized WebVTT subtitle tracks and plaintext indexing.
• Semantic Highlight Parsing: Key customer praise phrases are wrapped with semantic <mark> HTML tags for bold callout rendering.

How it works: Embeddable components are delivered through a single lightweight CDN script: cdn.konspot.dev/widget/{id}/platform.js.

• True CSS Style Isolation: Instantiates an open ShadowRoot (attachShadow({mode: "open"})), strictly scoping all CSS rules and preventing host page styles (Tailwind, Bootstrap, Shopify) from bleeding into widget components.
• Pre-Serialized Payloads: Review items, customer details, and theme configurations are packaged directly within the script payload, eliminating secondary fetch delays.
• Framework Lifecycle Observer: Automatically monitors DOM mutations via MutationObserver to mount and hydrate widgets even when components dynamically render in React, Vue, or Next.js SPAs.

How it works: Stored testimonials are dynamically converted into omni-channel acquisition assets.

• Social Graphics Generator: Converts high-converting quotes into high-resolution 1:1, 16:9, and 9:16 visual cards optimized for LinkedIn, Twitter/X, and Instagram.
• Vertical Video Reels: Formats video testimonials with burned-in karaoke captions and animated audio frequency waveforms for TikTok and Instagram Reels.
• Schema.org Rich Snippet Injection: Injects Google-compliant schema.org/AggregateRating JSON-LD directly into the host document head for organic search star badges.