Widget6 min readUpdated July 10, 2026

Install the widget

Install the customer-facing widget with a script tag and organization ID.

The Tinfiz support widget is loaded via a client-side JavaScript snippet. The widget script requires your unique Organization ID, which configures the launcher, themes, greetings, and routing backend.

Installation code snippets

Select the snippet that matches your technology stack:

HTML / Static Sites

html

<script
  src="https://widget.tinfiz.com/widget.js"
  data-org-id="YOUR_ORGANIZATION_ID"
  async
></script>

Next.js (App Router Layout)

tsx

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://widget.tinfiz.com/widget.js"
          data-org-id="YOUR_ORGANIZATION_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

React SPA Component

tsx

import { useEffect } from 'react'

export function TinfizWidget() {
  useEffect(() => {
    if (document.getElementById('tinfiz-widget-script')) return

    const script = document.createElement('script')
    script.id = 'tinfiz-widget-script'
    script.src = 'https://widget.tinfiz.com/widget.js'
    script.dataset.orgId = 'YOUR_ORGANIZATION_ID'
    script.async = true
    document.body.appendChild(script)
  }, [])

  return null
}

Verifying your installation

Once you deploy the snippet to your website, you can verify it directly from the dashboard:

Steps

1Navigate to the Install section in the sidebar.
2Scroll down to the "Verify installation" card.
3Enter your full live website URL (e.g., https://mywebsite.com) and click Verify.
4The system will crawl the URL and display a status check list showing if the script is loaded, has the correct organization ID, and if connection limits are active.

Workspace setup

Widget customization