HostNoc Chat Widget

Premium embeddable chat widget - one script, no framework required.

💬

Native WebSocket

Real-time messaging over the documented /ws/chat/{id} protocol with auto-reconnect.

🎨

Light & Dark

Built-in theme toggle plus configurable brand color and avatar.

🪛

Shadow DOM

Fully isolated styles - the widget never clashes with the host site's CSS.

📱

Responsive

Desktop panel and fullscreen mobile mode with smooth animations.

🔔

Notifications

Unread badge, sound chime, typing indicator and connection status.

Human handoff

Seamlessly switches to a live agent when the backend changes mode.

👋

Proactive teaser

A friendly bubble pops from the launcher to invite visitors to chat.

💬

Quick replies

One-tap starter prompts get conversations going instantly.

😀

Emoji & more

Emoji picker, copy-to-clipboard, date separators and scroll-to-latest.

Try it now

Click the launcher in the bottom-right corner to start a conversation.

<!-- Add this single script to any website --> <script src="https://YOUR-CDN/widget.js"></script> <script> HostNocChat.init({ apiUrl: "https://stagingchatbot.hostnoc.com", // REST base (POST /users/) wsUrl: "wss://stagingchatbot.hostnoc.com", // WebSocket base (/ws/chat/{id}) title: "HostNoc Support", subtitle: "We typically reply in a few minutes", theme: "light", // "light" | "dark" | "auto" themeColor: "#4f46e5", secondaryColor: "#7c3aed", // gradient end color position: "bottom-right", launcherIcon: "chat", // chat | message | help | bubble | <svg> borderRadius: 18, agentName: "HostNoc Team", // shows agent presence in header teaserMessage: "👋 Need a hand? Chat with us!", teaserDelay: 4000, // ms before the teaser pops (0 = off) quickReplies: ["Pricing", "Talk to a human", "Track my order"], enableEmoji: true, maxLength: 2000, greetingMessage: "Hi there! 👋 How can we help you today?" }); </script>