Installing the widget on your website
Publish the agent, copy the script tag from Widget, Install, and paste it immediately before the closing body tag of every page you want the chat to appear on — or open the guide for your website builder, which carries the same snippet.
Last checked against the running product on 30 August 2026.
One script tag installs the whole widget. It loads asynchronously, so it does not hold up the rest of your page, and it draws itself inside a shadow root, so your site styles cannot leak into it and its styles cannot leak out.
Publish the agent first
Until the agent is published there is no snippet to copy. The Widget screen says so, and the copy button reads Publish first instead of Copy.
Open Widget in the sidebar
The page opens on the Install tab. Garuda looks for a live agent in your workspace and shows its snippet; if none is live it falls back to the first agent in the list.
Everything you need is on that one tab: the snippet, the domains the agent is allowed to run on, a guide for each of the popular website builders, a panel for handing the job to somebody else, and a checklist of what is still outstanding.
Copy the snippet
It is a single tag carrying your publishable agent key, and it looks like this:
The embed snippet <script async src="https://api.garuda.ravan.ai/widget.js" data-agent-key="pub_your_agent_key"></script>The key that begins
pub_is publishable: it is meant to sit in page source where anyone can read it. It identifies a published agent and nothing else, and it cannot be used to sign in to your workspace.Paste it before the closing body tag
Put it immediately before
</body>in your site template, so it appears on every page you want the chat on. Most site builders call this a custom code, footer code or before-body-end field.Once per page, not once per site section
If the same snippet ends up on the page twice, Garuda still mounts one widget: it records what is already mounted on the page itself, which also keeps single-page applications from stacking a new launcher on every navigation.
Or open the guide for your website builder
Under Platform guides there is a tile for Webflow, WordPress, Shopify, Framer and one for any hand-written site or framework. Choosing one opens a dialog with your own snippet at the top and numbered steps beneath it, naming the site-wide custom-code or footer field to paste into rather than a menu path that moves between releases.
Each guide also states the awkward part of that platform: Webflow and Framer run site-wide custom code only on paid plans and only on the published site, never in the canvas or preview; WordPress.com allows custom scripts only on its higher plans; and Shopify's theme code does not run on checkout pages, so the launcher appears across the storefront but not during checkout.
Check the site's domain is approved
The widget starts only on domains the agent allows, and refuses every other origin — so the snippet on an unapproved domain does nothing at all. Publishing & domain access on the same tab lists the approved domains; it is a display, and the editable field is in the agent editor under Appearance. See Approving the domains your agent may run on.
Load the page and check the launcher
Open your site in a normal browser tab — not a local file, and not a preview on a domain you have not approved. The launcher appears in the corner you chose, and opening it shows your greeting.
The tag accepts a few optional attributes if you need them. None of them are required, and each one only affects the page it is written on:
| Attribute | What it does |
|---|---|
| data-launcher-label | Overrides the text beside the launcher button, up to 50 characters. |
| data-open | Set to true to open the panel as soon as the widget mounts. |
| data-z-index | Sets the stacking order, clamped between 1,000 and 2,147,483,000. The default is 2,147,482,000. |
| data-memory-consent | prompt (the default) asks the visitor; true or false decides for them. |
| data-api-origin | Points the widget at a different API origin. Rarely needed; the script URL decides it otherwise. |
Handing the job to whoever manages the site
The panel headed Need a teammate to install it? has two buttons that hand over the same note. Email the install steps opens your own mail client with it already written, for you to address and send; Copy install instructions puts the identical text on the clipboard. The note carries your snippet, that it belongs in the shared layout rather than on one page, that it loads asynchronously, the domains this agent is allowed to run on, and the reminder to republish the site afterwards. Both are inactive until the agent is published, because until then there is no live snippet to hand over.
If a copy button reports it was blocked
Copying needs a secure origin and the browser's permission. Where it is refused, the text you were copying appears in a box below the button, selected, so you can copy it by hand rather than being told it worked when it did not.
If it still does not work
The snippet area says to publish an agent first
The agent is still a draft, or it is paused. Open it under Agents and publish or resume it.
The embed code could not be loaded
The screen shows a red bar with a Try again button. It retries without a page reload. If it keeps failing, sign out and back in — an expired session produces the same symptom.
The snippet is on the page but nothing appears
That is almost always the domain allowlist, the publishing state or a toggle. Work through My widget is not showing up, which covers all four causes in order.
Related articles
- Getting startedApproving the domains your agent may run onThe allowed domain is set in the agent editor, under Appearance. Garuda compares it to the browser origin exactly, with no wildcards and no automatic subdomain matching.
- TroubleshootingMy widget is not showing upFour causes account for nearly every missing widget: the agent is not published, the domain is not approved, the snippet is not really on the page, or the Chat toggle is off. Check them in that order.
- ConfiguringCustomising the widget's appearanceWidget, Customize holds six numbered sections: bot identity, theme, chat logo, placement, nine toggles and the lead form. Changes preview live and are written when you save.