We are releasing @querlo/sdk 1.3.0, a significant update focused on improving design flexibility, visual consistency, and integration control.
This version introduces:
- Improved and expanded template system
- New visual variants for supported templates
- Full compatibility between templates and embed types
Improved and Expanded Templates
We refined existing templates and introduced new ones to support a broader range of visual styles, from playful interfaces to enterprise-ready UIs.
Available Templates
esd— Classic default Querlo templateliquidglass— Glassmorphism design with animated gradients (variants: sunset, ocean)liquidmetal— Brushed-metal aesthetic with reflective surfacescopertino— Apple-inspired interface with subtle blur effects (variants: dark, emerald, mono)darkstudio— Professional dark theme with 3D material transitions (variants: cyberpunk, hacker)macosclassic— Retro macOS window chromemacosmodern— Modern macOS-style interface with a clean native appearancecyberpunk— Neon-lit hacker aesthetic with glitch effectskawaii— Pastel, playful UI with soft animationsluxe— Elegant dark theme with gold accents and serif typography
Variants
Some templates now support a variant option, allowing you to change color schemes without modifying styles manually.
Example:
Querlo.embed({
id: 'YOUR_CHATBOT_ID',
template: 'liquidglass',
variant: 'sunset',
embedType: 'popup',
});
Variants enable faster brand alignment, multiple visual configurations, and simplified experimentation across UI styles.
Full Template × Embed Compatibility
In version 1.3.0, all templates can be used with all embed types.
This decouples:
- Visual layer (template, variant)
- Behavioral layer (embedType)
You can now reuse the same template across different contexts without constraints.
Embed Types
The embedType defines how the chatbot is rendered and behaves within the page.
popup (default)
A floating chatbot anchored to a viewport corner with a trigger button.
Querlo.embed({
id: 'YOUR_CHATBOT_ID',
template: 'liquidmetal',
embedType: 'popup',
posX: 'right',
posY: 'bottom',
width: '400px',
height: '600px',
});
Characteristics:
- Fixed position
- Trigger-based interaction
- Optional fullscreen behavior
- Automatically fullscreen on mobile
inpage
The chatbot is rendered directly inside the page layout.
Querlo.embed({
id: 'YOUR_CHATBOT_ID',
template: 'kawaii',
embedType: 'inpage',
container: '#chat-section',
width: '100%',
height: '500px',
});
Characteristics:
- Always visible
- No open/close state
- Ideal for landing pages, dashboards, or embedded experiences
inpage_popup
A hybrid model combining inline presence with fullscreen interaction.
Querlo.embed({
id: 'YOUR_CHATBOT_ID',
template: 'liquidmetal',
embedType: 'inpage_popup',
container: '#chat-preview',
width: '100%',
height: '300px',
});
Characteristics:
- Inline preview component
- Expands into fullscreen overlay on click
- Optimized for limited layout space
- Automatically fullscreen on mobile
Why This Update Matters
Querlo SDK 1.3.0 introduces a more composable architecture:
- Templates are fully reusable across contexts
- UI customization is faster and more scalable
- Integration logic is simpler and more predictable
This enables:
- Consistent chatbot experiences across multiple pages
- Better adaptation to layout constraints
- Faster iteration on UI/UX without structural changes
Documentation
Templates and variants:
https://studio.querlo.com/docs/sdk-templates
Embed types:
https://studio.querlo.com/docs/sdk-embed-types
Summary
Version 1.3.0 strengthens Querlo’s UI system by separating design from behavior and making both fully configurable.
The result is a more flexible SDK that supports a wide range of product and integration scenarios without increasing complexity.


