Join 2,200+ companies using Produktly to create exceptional announcements that keep users informed and drive engagement with new updates on Astro.
Onboarding for fast Astro websites. Produktly integrates easily with Astro components to provide interactive guidance.
Improve feature adoption and retention by announcing new features and keeping users informed about key events.
Announce New Features
Rich Text Editor
Targeted Delivery
Getting started with Produktly announcements on your Astro project is quick and easy.
Get your Produktly script snippet.
Add it to your base layout component in Astro.
Open your published site or preview and use the Produktly editor.
Create and share guided tours without affecting your site performance.
Astro ships zero JavaScript by default, hydrating only the islands you explicitly mark as interactive. That makes it ideal for content sites and marketing pages where you want guidance for visitors without slowing the page down. Tours load asynchronously and do not affect Lighthouse scores in any meaningful way.
Astro routes are typically multi-page (full reloads between pages) unless you opt into View Transitions or a client-side framework integration. Tour configuration depends on which model your project uses.
Add the snippet to your base layout so it loads on every page, then ship.
---
// src/layouts/Base.astro
---
<!doctype html>
<html>
<head>
<slot name="head" />
<script is:inline>
(function (w, d, f) {
var a = d.getElementsByTagName("head")[0];
var s = d.createElement("script");
s.async = 1; s.src = f;
s.setAttribute("id", "produktlyScript");
s.dataset.clientToken = "YOUR_TOKEN";
a.appendChild(s);
})(window, document, "https://public.produktly.com/js/main.js");
</script>
</head>
<body><slot /></body>
</html>Use is:inline on the script so Astro doesn’t process it as a module. If you have View Transitions enabled, you may also want to register the snippet inside an astro:page-load listener.
Astro processes script tags by default
Without is:inline, Astro will bundle and treat your snippet as a module, which can prevent it from loading on every page. Add is:inline to keep it as-is.
View Transitions need extra wiring
If you enabled @astrojs/transitions, Astro does soft navigation. Wrap the snippet in document.addEventListener("astro:page-load") so it re-attaches after each transition.
Islands hydrate after the page paints
If your tour targets a React or Vue island, the element may not exist on first render. Trigger tours from user actions (clicks) rather than page load when the target is interactive.
Astro teams pick Produktly because the script is async and has no measurable impact on Core Web Vitals. There’s no Astro-specific integration package to keep current, and the no-code editor works on both static pages and interactive islands without separate config.
Product Tours
Product Tours software for Astro.
Checklists
Checklists software for Astro.
Feedback Widgets
Feedback Widgets software for Astro.
Smart Tips
Smart Tips software for Astro.
Tool Tips
Tool Tips software for Astro.
Roadmaps
Roadmaps software for Astro.
NPS Widgets
NPS Widgets software for Astro.
Micro Surveys
Micro Surveys software for Astro.
Changelogs
Changelogs software for Astro.
React
Best announcements software for your React app.
Next.js
Best announcements software for your Next.js app.
Vue.js
Best announcements software for your Vue.js app.
Angular
Best announcements software for your Angular app.
Svelte
Best announcements software for your Svelte app.
Nuxt
Best announcements software for your Nuxt app.
Remix
Best announcements software for your Remix app.
Gatsby
Best announcements software for your Gatsby app.