Embedding the Widget | AckReply Docs

Learn how to embed the AckReply widget on any website.

Basic Installation

The install snippet is one self-contained tag — its data-* attributes carry the settings:

<script src="https://app.ackreply.com/widget/loader.js" data-workspace-id="YOUR_WORKSPACE_ID" async></script>

Why one tag?

Frameworks like Astro bundle inline scripts and can reorder them, which silently breaks two-tag installs. A single self-configuring tag has no ordering dependency and works everywhere.

Astro

Paste the tag inside <body> in your base layout (e.g. src/layouts/BaseLayout.astro). Astro leaves third-party tags with attributes unprocessed, so the tag works as-is — no is:inline needed for the tag itself.

<body>
  <script src="https://app.ackreply.com/widget/loader.js" data-workspace-id="YOUR_WORKSPACE_ID" async></script>
</body>

Next.js (App Router)

Paste the tag in app/layout.tsx inside <body>. Plain HTML tags pass through untouched.

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script src="https://app.ackreply.com/widget/loader.js" data-workspace-id="YOUR_WORKSPACE_ID" async />
      </body>
    </html>
  );
}

Nuxt

Paste the tag in app.vue, next to your page outlet.

<template>
  <NuxtLayout>
    <NuxtPage />
    <script src="https://app.ackreply.com/widget/loader.js" data-workspace-id="YOUR_WORKSPACE_ID" async />
  </NuxtLayout>
</template>

WordPress

Paste the tag in footer.php before </body>, or use any footer-scripts plugin.

Shopify

Online Store → Themes → Edit code → theme.liquid, before </body>.

Webflow

Site Settings → Custom Code → Footer code. One paste applies site-wide.