Chat Widget Demo

This page demonstrates the chat widget embedded directly from the server.

How to Use

To add the chat widget to your website, include the following script tag:

Local Server

Remote Server

If you're hosting the chat server on the same domain as your website:

<script 
  id="chat-widget"
  src="/chat-widget.js"
  data-position="bottom-right"
  data-color="#007bff"
  data-title="Chat with us">
</script>

If you're hosting the chat server on a different domain:

<script 
  id="chat-widget"
  src="http://your-chat-server-domain:3000/chat-widget.js"
  data-position="bottom-right"
  data-color="#007bff"
  data-title="Chat with us">
</script>

Note: Replace your-chat-server-domain with your actual server domain or IP address.

The widget will automatically connect to the server it's loaded from, so if the server is down, the widget won't load.

Configuration Options

data-position: Where to position the chat button (top-right, top-left, bottom-right, bottom-left)
data-color: The primary color for the chat widget (hex color)
data-title: The title displayed in the chat window

Multiple Widgets

You can add multiple widgets to the same page by using different IDs and colors:

<script 
  id="chat-widget-1"
  src="/chat-widget.js"
  data-position="bottom-right"
  data-color="#007bff"
  data-title="Chat with us">
</script>

<script 
  id="chat-widget-2"
  src="/chat-widget.js"
  data-position="bottom-left"
  data-color="#28a745"
  data-title="Support Chat">
</script>

Demo

This page demonstrates two chat widgets with different colors:

Widget 1: Blue (bottom-right)
Widget 2: Green (bottom-left)