Next.js (Pages Router)

For projects using the older Pages Router (pages/ directory), the chat script goes in pages/_app.tsx. The floating launcher appears on every page — no container element needed.

Install#

No package install needed. Copy the snippet from the Connect tab in your dashboard and replace YOUR_PROJECT_ID with your project's ID.

Add the script#

In pages/_app.tsx, use Next's <Script> component:

import Script from 'next/script';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <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"
      />
      <Component {...pageProps} />
    </>
  );
}

Verify#

Run npm run dev and the chat bubble appears on every page. Send a test message and confirm it lands 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.