Astro
Add the hosted agent to a shared Astro layout or selected static and island pages.
Add the hosted agent to a shared Astro layout or selected static and island pages.
Prepare the deployment origin#
Publish the Make Agent Fast site, enable embedding, and allowlist the exact Astro development, preview, and production origins. The final scheme/hostname/port in the browser matters, not the build host or repository URL.
Add to a shared layout#
Place the standard external loader immediately before </body> in the Astro layout that should own the launcher.
---
// src/layouts/BaseLayout.astro
---
<html lang="en">
<body>
<slot />
<script
is:inline
src="https://makeagent.fast/embed.js"
data-agent="YOUR_SITE_SLUG"
data-position="right"
data-label="Ask us"
async
></script>
</body>
</html>is:inline tells Astro to preserve the external script tag and its data-* attributes instead of bundling/transforming it. The loader remains public and framework-independent; do not import it into a server module.
Limit to selected pages#
Use a nested layout or include the tag only on selected .astro pages. Avoid placing the same tag in both a base layout and page. The loader ignores a duplicate same-slug root, but the duplicate HTML makes navigation and teardown difficult to reason about.
If Astro client-side view transitions are enabled, test direct page loads plus in-app navigation. A persistent shared layout is preferred for a site-wide agent. For route-specific behavior, remove both the script and maf-embed-root-YOUR_SITE_SLUG when the route is left before inserting a fresh script later.
Configure CSP and consent#
Static hosting headers still control the browser. Allow https://makeagent.fast in script-src, frame-src, and the relevant connection policy. If a consent manager blocks the script, load the tag only after required consent rather than weakening CSP or bypassing consent.
Verify the built output#
- Run the Astro production build and inspect the emitted HTML for the preserved
data-agenttag. - Open the deployed page in a private window.
- Confirm one embed root and successful loader/iframe requests.
- Navigate across Astro routes and confirm the intended persistence.
- Send a real message and test mobile/microphone behavior.
Troubleshooting#
| Symptom | Fix |
|---|---|
| Built HTML omits/changes attributes | Add is:inline to the external script |
| Two script tags are emitted | Keep installation in one owning layout/page |
| Client navigation differs from direct load | Test view transitions and choose a persistent shared layout |
| Works in dev but not static host | Add the exact production origin and hosting CSP headers |
| Voice fails | Configure HTTPS, browser permission, and Permissions Policy |
No npm Astro adapter is currently published; use the hosted loader shown here.