install guide

heytappr + astro

add heytappr to an astro site with a script tag in your base layout.

where it goes

add the script to your base layout component, usually src/layouts/Layout.astro, using is:inline so astro leaves it as is.

---
const { title } = Astro.props;
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
  </head>
  <body>
    <slot />
    <script
      is:inline
      src="https://cdn.tappr.app/embed.js"
      data-tapprid="your-business"
    ></script>
  </body>
</html>

things worth knowing

• is:inline tells astro not to bundle or process the script, which is what an external cdn script needs.

• give the controls your guides point at stable ids or data attributes. styling classes change often and break selectors.

• allowlist your web origin in the heytappr workspace, or the embed won't load. add every origin you serve from, including staging.