saas-chat-widget

SaaS Chat Widget

A customizable chat widget for integrating SaaS Chat into your website or application.

Installation

NPM

npm install saas-chat-widget

Yarn

yarn add saas-chat-widget

Usage

Basic Usage

<script type="module">
  import SaaSChatWidget from 'saas-chat-widget';
  
  const chatWidget = new SaaSChatWidget({
    apiKey: 'YOUR_API_KEY',
    organization: 'your-organization',
  });
</script>

CDN Usage

<script src="https://unpkg.com/saas-chat-widget/dist/index.umd.js"></script>
<script>
  const chatWidget = new SaaSChatWidget({
    apiKey: 'YOUR_API_KEY',
    organization: 'your-organization',
  });
</script>

Script Tag with Data Attributes

<script 
  src="https://unpkg.com/saas-chat-widget/dist/index.umd.js" 
  data-api-key="YOUR_API_KEY" 
  data-organization="your-organization"
  data-primary-color="#6366f1"
  data-header-text="Chat Support"
></script>

Configuration Options

Option	Type	Default	Description
apiKey	string	null	Your API key (required)
organization	string	null	Your organization ID or slug (required)
userId	string	auto-generated	Custom user ID for the visitor
userName	string	"Website Visitor"	Name of the visitor
userEmail	string	null	Email of the visitor
apiUrl	string	"https://api.saas-chat.com"	API URL
socketUrl	string	"https://api.saas-chat.com"	Socket URL
position	"right" or "left"	"right"	Position of the widget
primaryColor	string	"#6366f1"	Primary color for the widget
headerText	string	"Chat Support"	Text displayed in the widget header
placeholder	string	"Type a message..."	Placeholder text for the input field
welcomeMessage	string	"Hello! How can we help you today?"	Initial message shown to users
autoOpen	boolean	false	Automatically open the chat widget on page load
debug	boolean	false	Enable debug mode for troubleshooting

Methods

open()

Opens the chat widget.

chatWidget.open();

close()

Closes the chat widget.

chatWidget.close();

destroy()

Removes the chat widget from the DOM and disconnects the socket.

chatWidget.destroy();

License

MIT