Live preview · real tokens, not a screenshot
When to pick it
Embedded in the flow of a page rather than floating over it. Drop it at the foot of a help article so the reader can ask a follow-up without hunting for a launcher, which is the moment they are most likely to ask.
How it is built
No fixed positioning at all, so it never creates a stacking context against your layout and never needs a z-index. It is the only layout that is safe inside a CSS container with overflow hidden.
Accessibility
Part of the normal document flow, so it lands in the tab order where the reader expects it rather than at the end of the page.
Every design in this gallery states that it is an AI assistant at the start of the conversation and honours prefers-reduced-motion. Neither is configurable, because both are obligations rather than preferences.
Good fit for
- Help articles
- Blog posts
- Docs pages
- Landing pages
Source code
Take Forest Inline anywhere.
You can deploy this design through ChatBrace on any plan, including the free trial — that never changes. A paid plan also gets you the standalone HTML, CSS and JavaScript for it, to drop into a project of your own with or without ChatBrace behind it.
Seven designs ship their source to everyone, no account needed.
Other inline embed designs
Put it on your site
before you finish your coffee.
A hundred free messages, no card, and a playground to try it in before you touch a single line of your own markup.