Skip to content

Add widgetConfig docs and interactive demo - #51

Merged
matipojo merged 1 commit into
masterfrom
widget-config-docs
Jun 8, 2026
Merged

Add widgetConfig docs and interactive demo#51
matipojo merged 1 commit into
masterfrom
widget-config-docs

Conversation

@matipojo

@matipojo matipojo commented Jun 8, 2026

Copy link
Copy Markdown
Member

Summary

  • Add a dedicated widgetConfig guide covering all fields, layout defaults, v1/v2 usage, and production patterns from Elementor hosts (my.elementor help center + visitor floating widget).
  • Add an interactive demo at demo/load-sidebar-v2-widget-config/ with three presets (helpCenter, visitor, sandbox), live resolved JSON, and window.angieConfig override support.
  • Link the new docs and demo from the root README, loadSidebarV2 README, and demos index.

Test plan

  • Run npm run demo and open /demo/load-sidebar-v2-widget-config/?preset=helpCenter
  • Verify two-column layout (JSON + Common fields) does not overlap
  • Open Angie sidebar — confirm it docks on the right without covering page content
  • Switch presets via ?preset=visitor and ?preset=sandbox and confirm layout/config changes
  • Override copy via window.angieConfig in the console and reload

✨ PR Description

1. Problem & Context

Angie SDK lacks user-facing documentation and interactive examples for widgetConfig — the key API for customizing embedded chat UI (copy, features, MCP focus). This PR ships comprehensive docs plus a production-patterned demo with runtime overrides.

2. What Changed (Where)

File Purpose
src/load-sidebar-v2/widget-config.md Full reference: field types, layout defaults, production patterns (help center, visitor widget), window.angieConfig runtime override pattern
demo/load-sidebar-v2-widget-config/ Three interactive presets (help center sidebar, visitor floating search, feature sandbox) with live config JSON inspector and console override hints
src/load-sidebar-v2/README.md, README.md Links to new docs and demo; export list now includes WidgetConfig type
demo/index.html New featured card linking to widget-config demo

3. How It Works

Demo host (host.js) reads ?preset= param → builds widgetConfig via preset-specific builders → calls sdk.loadSidebarV2({ widgetConfig }) → JS renders resolved config as JSON and highlights active preset. Users can override window.angieConfig in console before reload to test copy/prompts without rebuilding. localServers.skipLoading: true pattern shown to avoid MCP registration race. CSS (demo-host.css) mirrors Elementor production UI tokens and right-docked sidebar layout.

4. Risks

None material. Demo is isolated; docs are additive reference. Only note: window.angieConfig override pattern in demo assumes hosts will inject that global — document clearly that this is optional and for iteration only, not production auth/secrets (already done in widget-config.md § Runtime overrides).

Generated by LinearB AI and added by gitStream.
AI-generated content may contain inaccuracies. Please verify before using.
💡 Tip: You can customize your AI Description using Guidelines Learn how

Document all WidgetConfig fields and Elementor host patterns, and add a demo with help-center, visitor, and sandbox presets.
@matipojo
matipojo merged commit dc9ff21 into master Jun 8, 2026
15 checks passed
@matipojo
matipojo deleted the widget-config-docs branch June 8, 2026 15:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant