🧪 HEA Ask Bar Test — method: Magic ask bar (askbar widget)

Ask bar embed — Pros & Cons

✅ Pros

One script + one div: configure via data-* attributes.
Clean UX: inline bar that expands; feels native to pages.
Theming: brand1/brand2, placeholder, start/max, etc.
Mobile option: data-fullpage-onmobile="1" to open full page.

⚠️ Cons

Inside an iframe for isolation → tight host styling requires params instead of CSS.
Analytics/lead capture via postMessage bridge if needed.

Generated embed snippet

Tip: pass ?hea_id=..., &creator_id=..., &placeholder=Ask+away…, &start=420, &max=640, &brand1=%23ff5f6d, &brand2=%23ffc371, &fullpage_onmobile=1 to this page to preview and to prefill the snippet.

⚙️ Key `data-*` parameters

data-creator-id — your workspace/org id (e.g. hea-world)
data-hea-id — chatbot id (e.g. heaguide-web-001)
data-expand — when to expand (focus | submit)
data-autoclose — collapse on blur (1 | 0)
data-placeholder — custom input hint text
data-start — initial expanded height (px)
data-max — max chat height before scrolling
data-brand1, data-brand2 — button gradient colors
data-fullpage-onmobile — open hea_simple full page on phones
data-widget-origin — override widget base URL (advanced)

💡 Best defaults: expand="focus", autoclose="1", start="420", max="640", fullpage-onmobile="1"

<div
  data-hea-askbar
  data-creator-id="hea-world"
  data-hea-id="heaguide-web-001"
  data-expand="focus"
  data-autoclose="1"
  data-placeholder="Ask about features, pricing, or setup…"
  data-start="420"
  data-max="640"
  data-brand1="#ff5f6d"
  data-brand2="#ffc371"
  data-fullpage-onmobile="1"
  style="max-width:920px;margin:20px auto;"></div>
<script src="https://hea-world.com/public/hea_chat_engine/hea_askbar_embed.js"></script>