Choosing a surface
Chat bubble, inline panel, popup or ask bar — and how to style each.
The four surfaces
The same assistant, in four shapes. Pick one on your dashboard under Add it to the site you already have; each has a live preview.
💬 Chat bubble
A floating button in the corner of every page. The default, and the right choice if you're not sure — it's always available and never in the way.
📄 Inline panel
Sits inside a section of a page, like any other block. Good for a dedicated "menu" or "our services" page where the assistant is the point of the page.
🔘 Button and popup
Your own buttons open a large window. Use this when you already have "Order now" or "Book" buttons and want them to open the assistant.
🔍 Ask bar
A search-style box for your hero section. Invites a question immediately rather than waiting to be clicked.
The snippets
The chat bubble needs only the script tag. Paste it before </body> on every page you want it on:
<script src="https://raglie.com/embed.js" data-restaurant-slug="your-web-address" async ></script>
The inline panel and ask bar add a container that marks where they appear. Put the <div> exactly where you want the assistant to sit:
<div id="raglie-assistant"></div> <script src="https://raglie.com/embed.js" data-restaurant-slug="your-web-address" data-mode="inline" data-target="#raglie-assistant" async ></script>
The popup attaches to buttons you already have. Add data-raglie-open to any button on the page and it opens the assistant — every matching button works, so you can have several:
<button data-raglie-open>Ask our assistant</button> <script src="https://raglie.com/embed.js" data-restaurant-slug="your-web-address" data-mode="modal" async ></script>
Always copy the snippet from your own dashboard rather than these examples — yours carries your web address and any appearance settings you've changed.
Appearance settings
Whichever surface you pick, you can adjust it before copying the code:
- Theme — auto, light or dark. Auto follows the visitor's own setting.
- Launcher shape, size and shadow — how the bubble sits against your design
- Button text and icon — what the launcher says
- Corner of the page — which corner the bubble occupies
- Placeholder text and width — for the ask bar; full width or a fixed size
- Panel height — for the inline panel
- Which buttons open it — for the popup, if you'd rather target your own CSS selector than use
data-raglie-open - Branding — whether a small Raglie credit shows
Save, and installed sites pick the changes up on their own. Only the surface and its layout live in the snippet.
💡 Pro tip
You can use more than one. A chat bubble everywhere, plus an inline panel on the page that lists what you sell, is a common and effective combination.