Web Widget Overview

The UCrew Web Widget is a floating chat button that you can add to any website. It lets your visitors chat with your AI agent directly from your site — asking questions, browsing products, or getting support.

Fully Customizable

Match your brand — customize colors, position, size, avatar, and welcome message.

Works Everywhere

Compatible with any website or CMS. No framework dependency.

Instant Load

Async loading — your website's performance is never impacted.

Full AI Power

All UCrew features work in the widget — knowledge base, actions, product search.

The Universal Snippet

All platform guides use a variation of this snippet. Add it before the </body> tag on your page:

html

<!-- UCrew 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 your UCrew Dashboard → Project Settings → Widget.

Configuration Options

Customize the widget by adding data attributes to 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 you today? 👋"
  data-bot-name="Aria"
  data-open-delay="3000"
  async>
</script>

Attribute	Default	Description
data-position	bottom-right	bottom-right \| bottom-left
data-theme	dark	dark \| light \| auto
data-primary-color	#004741	Any hex color
data-greeting	Hello!	Welcome message text
data-bot-name	AI Assistant	Name shown in chat header
data-open-delay	0	Auto-open delay in ms (0 = disabled)

Platform-Specific Guides

🟦

WordPress / WooCommerce

Install via theme editor or header injection — takes 2 minutes.

🟩

Shopify

Add via Online Store theme editor with a single code snippet.

⬛

Wix

Embed using Wix's custom code or HTML embed widget.

⬜

Squarespace

Inject via Code Injection in Advanced Settings.

🔷

Custom HTML

Works on any website. Copy one snippet, paste before </body>.

WooCommerce WordPress / WooCommerce