saasupport v1.2.0

SaaSupport

SaaSupport is a customizable support widget designed for SaaS businesses to enhance customer service and engagement. It offers a seamless integration with React and Next.js, providing a robust solution for managing support tickets, feature suggestions, and user guides.

About the Project

SaaSupport aims to streamline customer support by offering a widget that can be easily integrated into your SaaS platform. With features like ticket management, feature suggestion, and user guides, it helps improve user experience and engagement.

Built With

• React: A JavaScript library for building user interfaces (supports React 16-19).
• Next.js: A React framework for production.
• Firebase: Used for backend services like authentication and database.
• TailwindCSS: For styling components with utility classes.

Getting Started

To get started with SaaSupport, follow these steps to integrate it into your React/Next.js application.

Installation

Install the package using npm:

npm install saasupport
# or
yarn add saasupport

Usage

Vanilla JavaScript

import SaaSupportWidget from 'saasupport';

const widget = new SaaSupportWidget({
  apiConfig: {
    apiKey: 'your-api-key',
    clientId: 'your-client-id',
  },
  userId: 'user-123',
  showSuggestFeature: true,
  showSuggestions: true,
  showGuide: {
    show: true,
    title: 'Help Guide',
    description: 'Find help or contact support',
    link: 'https://docs.yourdomain.com',
    imageUrl: 'https://your-domain.com/guide-image.jpg'
  },
  styles: {
    backgroundColor: '#ffffff',
    textColor: '#000000',
    fontFamily: 'Roboto, sans-serif',
  },
  linkSearch: true,
});

// Initialize and mount the widget
widget.init().then(() => {
  widget.mount('#support-container'); // Or any CSS selector
});

React

// Option 1: Using default import
import { ReactSaaSupportWidget } from 'saasupport';

// Option 2: Using specific path import
// import ReactSaaSupportWidget from 'saasupport/react';

function App() {
  return (
    <ReactSaaSupportWidget
      apiConfig={{
        apiKey: 'your-api-key',
        clientId: 'your-client-id',
      }}
      userId="user-123"
      showSuggestFeature={true}
      showSuggestions={true}
      showGuide={{
        show: true,
        title: 'Help Guide',
        description: 'Find help or contact support',
        link: 'https://docs.yourdomain.com',
        imageUrl: 'https://your-domain.com/guide-image.jpg'
      }}
      styles={{
        backgroundColor: '#ffffff',
        textColor: '#000000',
        fontFamily: 'Roboto, sans-serif',
      }}
      linkSearch={true}
    />
  );
}

Next.js (Pages Router)

import dynamic from 'next/dynamic';

// Use dynamic import with ssr: false
const SaaSupport = dynamic(
  () => import('saasupport/react').then(mod => mod.default),
  { ssr: false }
);

export default function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <SaaSupport 
        userId="user-123" 
        apiConfig={{
          apiKey: 'your-api-key',
          clientId: 'your-client-id',
        }}
      />
    </div>
  );
}

Next.js (App Router)

// components/SupportWidget.jsx
"use client";

import { ReactSaaSupportWidget } from 'saasupport';

export default function SupportWidget() {
  return (
    <ReactSaaSupportWidget
      userId="user-123"
      apiConfig={{
        apiKey: 'your-api-key',
        clientId: 'your-client-id',
      }}
    />
  );
}

// app/page.jsx
import SupportWidget from '../components/SupportWidget';

export default function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <SupportWidget />
    </div>
  );
}

Server-Side Rendering Considerations

SaaSupport includes server-safe exports for SSR environments. When used in a server-rendered context without proper dynamic imports, it will render placeholder components that will be hydrated on the client.

// Import the server-safe version directly
import { ServerSafeSaaSupportWidget } from 'saasupport/server';

Self-Hosting Guide

SaaSupport can be self-hosted in your own infrastructure. This gives you complete control over the data and functionality.

Self-Hosting Steps

1. Clone the Repository

   git clone https://github.com/yourusername/saasupport.git
   cd saasupport

2. Install Dependencies

   npm install

3. Build the Package

   npm run build

4. Configure Firebase

   Create a .env file with your Firebase configuration:

   FIREBASE_API_KEY=your-api-key
   FIREBASE_AUTH_DOMAIN=your-auth-domain
   FIREBASE_PROJECT_ID=your-project-id
   FIREBASE_STORAGE_BUCKET=your-storage-bucket
   FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
   FIREBASE_APP_ID=your-app-id

5. Deploy to Your Server

   Host the built files from the dist directory on your web server.

6. Use in Your Application

   Update your import paths to point to your self-hosted version:

   import SaaSupportWidget from 'https://your-server.com/path/to/saasupport.js';

   Or install it locally:

   npm install /path/to/local/saasupport

Why Dynamic Imports in Next.js?

SaaSupport needs to be loaded client-side only because:

1. It uses browser-specific APIs like document and window
2. It manipulates the DOM directly to create and manage UI
3. It loads assets and makes API calls that must happen in the browser

For Next.js, this means:

• Pages Router: Use dynamic import with { ssr: false }
• App Router: Use "use client" directive and import normally

Configuration Options

// ... existing docs for configuration options ...

License

This project is licensed under the MIT License.

Contact

contact@saasupport.io

Changelog

v1.2.0

• Added support for React 19
• Improved server-side rendering handling
• Enhanced error reporting in React components
• Added TailwindCSS integration and improved styling options