Website Embedding (HTML & Frameworks)

Deploying the Pitaj.io widget onto your website takes less than 60 seconds with a single script tag. Our script bundle is ultra-lightweight (under 30 KB compressed), loads asynchronously, and incurs zero penalties on Google Core Web Vitals (LCP, INP, CLS).

1. Standard HTML Embed (Recommended)

Paste the snippet below inside your <head> tags or immediately before the closing </body> tag across your HTML pages:

<!-- Pitaj.io AI Chat Widget -->
<script
  src="https://app.pitaj.io/chat-widget/widget.iife.js"
  data-widget-id="YOUR_WIDGET_ID"
  defer>
</script>

Replace YOUR_WIDGET_ID with the alphanumeric identifier found in Channels → Web Embed.

2. Modern JavaScript Framework Integration

// app/layout.tsx or components/PitajWidget.tsx
'use client';
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.pitaj.io/chat-widget/widget.iife.js"
          data-widget-id="YOUR_WIDGET_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://app.pitaj.io/chat-widget/widget.iife.js',
          'data-widget-id': 'YOUR_WIDGET_ID',
          defer: true
        }
      ]
    }
  }
});

Open your GTM Workspace and click New Tag.
Select tag type Custom HTML.
Paste the script snippet containing your data-widget-id.
Set the firing trigger to All Pages - DOM Ready.
Publish your container version.

3. Inline Container Embed (Full Viewport / Embedded Mode)

If you prefer an inline layout (such as an embedded support console on /contact or inside an authenticated app portal):

<iframe
  src="https://app.pitaj.io/chat-widget/embed/YOUR_WIDGET_ID"
  width="100%"
  height="650px"
  frameborder="0"
  style="border-radius: 16px; border: 1px solid rgba(255,255,255,0.1);"
  allow="microphone">
</iframe>