Documentation, Features, News

Querlo SDK 1.3.0 — Templates, Variants, and Full Embedding Flexibility

Lorenzo Meriggi / March 18, 2026

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 template
  • liquidglass — Glassmorphism design with animated gradients (variants: sunset, ocean)
  • liquidmetal — Brushed-metal aesthetic with reflective surfaces
  • copertino — 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 chrome
  • macosmodern — Modern macOS-style interface with a clean native appearance
  • cyberpunk — Neon-lit hacker aesthetic with glitch effects
  • kawaii — Pastel, playful UI with soft animations
  • luxe — 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.