SaaS Magic
Linx Photos is designed to be a "Zero-Config" SaaS. The goal is for photographers to integrate our high-performance galleries into their existing websites without writing a single line of CSS or JavaScript.
The Challenge
Most SaaS widgets (like Iframes) are black boxes. They don’t know the host site’s brand colors, fonts, or layout, leading to a disjointed user experience.
The Solution: Standardized Magic
We utilize a three-part strategy to ensure our album service looks native to every photographer’s site.
1. Environment Sniffing (Single Script Tag)
The photographer includes a single <script> tag on their site. When this script runs, it performs an audit of the host environment:
// Example of the sniffing logic
const brandColor = getComputedStyle(document.documentElement)
.getPropertyValue('--primary-color') || '#000';
const font = getComputedStyle(document.body).fontFamily;It then injects the Linx Photos component and passes these identified tokens as parameters.
2. CSS Variable Bridge
The Linx Photos application is built using CSS variables for all UI elements. These variables are mapped to the detected host styles on load.
:root {
--saas-bg: var(--external-bg, #ffffff);
--saas-text: var(--external-text, #000000);
}3. Proxy-Based Customization
For standalone galleries (e.g., albums.linx.photos), our backend "scrapes" the photographer’s main site periodically to identify stylesheet links and primary branding. This allows the subdomain to reflect the main site’s aesthetic automatically, even without being embedded.