Ask AI Bar
A fullscreen widget style: a centered input bar that expands into an immersive conversation
Overview
The Ask AI Bar is an alternative style for your chat widget. Instead of the classic bubble in the corner, visitors see a centered input field at the bottom of the page inviting them to ask a question. The moment they start typing, the page transforms into a fullscreen conversation with a sidebar for past conversations. Because the bar sits in the most visible part of the page and removes the click-to-open step, visitors start far more conversations with it than with a bubble.
It is the same assistant underneath: your knowledge base, AI instructions, colors, privacy settings, lead capture, bookings and every other setting apply to both styles. Human takeover, transcripts and conversation history work identically.
Enabling It
Open Customize in your dashboard and pick Ask AI Bar under Widget Style. That is all - your existing embed snippet and plugins keep working, and the new style appears on the next page load. No code changes are needed on your website.
The bar is available on the Pro and Enterprise plans. If your plan changes later, your website automatically falls back to the classic bubble - nothing breaks.
Placeholder Text
By default the bar invites visitors with the text Ask AI, automatically translated into each visitor's language. You can replace it with your own wording - for example, Ask our travel expert - in the Bar Placeholder Text setting that appears when the bar style is selected.
Bar Width
Two sliders in Widget Settings control how wide the bar can grow. The first sets the width on large screens; the default is 640 pixels. The second, Bar Width on Phones, is off by default - phones then use the full screen width, which looks best on small screens. Turn it on to give phones their own fixed width, capped by the screen size.
Showing the Bar Only on Specific Pages
Many websites want the bar on content-heavy pages such as documentation or help centers, and the classic bubble everywhere else. Enable the option Show Bar Only On Specific Pages and list the pages, one per line or separated by commas:
/pricing, /docs*, example.com/support
Visitors see the bar on matching pages and the bubble on all other pages. A path like /pricing works without the domain and matches that exact page - trailing slashes do not matter. End an entry with a star to cover a whole section: /docs* matches /docs and every page under it.
Controlling the Style Programmatically
Developers can force a style per page directly on the embed snippet with the data-asyntai-style attribute. It accepts bar or bubble and takes priority over the dashboard setting:
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");s.setAttribute("data-asyntai-style","bar");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
Use bar on the pages that should show the bar, and bubble - or simply omit the attribute - everywhere else. This is useful when your pages are rendered from different templates and you prefer to keep the decision in code instead of the dashboard.
Good to Know
- Conversations continue across styles - a visitor who chatted with the bubble on one page keeps the same conversation with the AI when they meet the bar on another.
- Settings whose only job is getting visitors to open the chat - position, chat icon, auto-trigger, greeting bubble, trigger input and unread badge - are not used by the bar, since it is always visible. They keep their values for when you switch back.
- The bar fully supports voice input, image upload, product cards, bookings, email and phone capture, localization and right-to-left languages.
- On phones the bar sits above the bottom edge of the screen and the conversation opens fullscreen, with past conversations in a slide-in drawer.