Install on Any Website

The UCrew widget works on any website, regardless of platform or framework. Copy one snippet and paste it before the closing </body> tag.

The Universal Snippet

Copy the code below and paste it into your HTML, just before </body>:

HTML — paste before </body>

<!-- UCrew Chat Widget -->
<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://ucrew.ai/widget/v1.js';
    s.setAttribute('data-project-id', 'YOUR_PROJECT_ID');
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

Replace YOUR_PROJECT_ID with the ID from UCrew Dashboard → Project Settings → Widget tab.

Full Customization Options

Customize using data attributes on the script tag:

html (with all options)

<script
  src="https://ucrew.ai/widget/v1.js"
  data-project-id="YOUR_PROJECT_ID"
  data-position="bottom-right"
  data-theme="dark"
  data-primary-color="#004741"
  data-greeting="Hi! How can I help? 👋"
  data-bot-name="Aria"
  data-open-delay="3000"
  async>
</script>

Attribute	Default	Values
data-position	bottom-right	bottom-right \| bottom-left
data-theme	dark	dark \| light \| auto
data-primary-color	#004741	Any hex color (#RRGGBB)
data-greeting	Hello!	Text shown when widget opens
data-bot-name	AI Assistant	Name in the chat header
data-open-delay	0	Auto-open delay in ms (0 = off)
data-hide-on-mobile	false	true \| false

React / Next.js

In a React or Next.js app, use a Script component or useEffect to load the widget:

Next.js (app/layout.tsx)

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://ucrew.ai/widget/v1.js"
          data-project-id="YOUR_PROJECT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Use strategy="lazyOnload" so the widget loads after the page is ready — this keeps your app fast.

Best Practices

Always place the script before </body> — not in <head> — to avoid blocking page render
The async attribute ensures the widget loads in the background without slowing your site
Test on both desktop and mobile after installation
Use data-hide-on-mobile="true" if you only want the widget on desktop

Squarespace Back to Docs Home