Purple Nexus LogoPurpleNexus.com.au
← Back to Demo

Chat Widget Demo

Interactive demo and integration guide for the Purple Nexus chat widget

Quick Start

Add the following code to any website to embed the chat widget:

<div id="my-chat-widget"></div>
<script>
  window.ChatWidgetConfig = {
    agentId: 'chat_agent'
  };
</script>
<script src="https://purplenexus.com.au/chat-widget.js?v=2.0.0" async></script>

The widget will automatically fetch the agent configuration (API URL, theme colors, text, position) from Firestore using the provided agentId.

Configuration

Simple to Add the Widget to Your Portal

Just add a single script tag and a container div to your website. The widget automatically loads and configures itself using the agentId you provide.

Control Behavior Online

All widget behavior is controlled through the Purple Nexus portal. Update settings in real-time without changing any code on your website. Changes take effect immediately across all embedded widgets.

Customize Appearance & Behavior

Configure all aspects of the widget through the portal:

  • Brand Color - Match your website's color scheme
  • Title - Customize the chat window header
  • Widget Position - Choose bottom-right, bottom-left, or custom positioning
  • Welcome Message - Set a personalized greeting for users
  • Placeholder Text - Customize the input field placeholder
  • API URL - Configure the backend endpoint for chat processing

All configuration options are stored in Firestore and fetched automatically at runtime using the agentId.

agentId (required)

The unique identifier of your agent. This is the only parameter you need to provide—all other settings are managed through the portal.

Live Demo

The chat widget is already active on this page. Look for the chat icon in the bottom-right corner—it uses the same widget implementation that your clients will have when they embed the code snippet above.