Next.js (App Router)

Add the Eloqra chat widget to a Next.js 13+ App Router project. The script tag goes in your root layout and the floating chat launcher appears on every page — there is no container element to add.

Install#

You don't need to install a package. The widget loads from our CDN. Copy the snippet from the Connect tab in your dashboard and replace YOUR_PROJECT_ID with your project's ID.

Add the script#

In app/layout.tsx, use Next's <Script> component with strategy="afterInteractive":

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script id="eloqra-config" strategy="afterInteractive">
          {`window.ELOQRA_CHAT_CONFIG = { projectId: 'YOUR_PROJECT_ID' };`}
        </Script>
        <Script
          src="https://chat.eloqra.app/eloqra-chat.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Verify#

Run npm run dev and load any page — the chat bubble appears in the corner you chose in the dashboard. Send a test message and it should arrive in your connected Telegram. Make sure chat is enabled and your Telegram is connected in the dashboard first.

1

Because afterInteractive defers the script, window.eloqra doesn't exist during your first render. If a component opens the chat, call it optionally — window.eloqra?.('open') — or add the queue stub described in Control it from JavaScript, which buffers commands until the widget is ready.