🛟 Help Center Widget for React

Publish help articles, FAQs, and guides. Allow customers to find answers on their own, reduce repetitive questions, and keep your support team to focus on more challenging issues.

👀 Preview

📦 Installation

Install the widget via npm or yarn:

npm install help-center-widget-react
# or
yarn add help-center-widget-react

✨ Key Features

• 🚀 Easy Integration: Get started with minimal setup.
• 📱 Responsive Design: Optimized for all screen sizes.
• 🔍 Search Functionality: Allow users to quickly find relevant articles.
• 📚 Article Categorization: Organize content for better discovery.
• 🗂️ Multi-Language Support: Target a global audience.
• 💪 TypeScript Compatibility: Fully typed for a seamless developer experience.
• 🌓 Dark Mode Support: Matches your user's preferences.

🔧 Configuration

Register your project on Swiftyper.

Customize the widget to fit your needs using the following options:

Option	Type	Description
apiKey	string	API key for authenticating with the help center.
locale	string	Locale setting for the widget (e.g., en_US, de_DE).
isOpen	boolean	Whether the widget is open by default.
launcherPosition	string	Position of the launcher on the screen (e.g., bottom-right).
launcherColor	string	Color of the launcher icon.
launcherBackgroundColor	string	Background color of the launcher.
launcherSize	string	Size of the launcher (e.g., 3.5rem).
launcherMargin	string	Margin around the launcher (e.g., 1rem).
launcherAnimation	boolean	Enable animation for the launcher.
widgetRadius	string	Border radius of the widget (e.g., 12px).
widgetWidth	string	Width of the widget (e.g., 400px).
widgetHeight	string	Height of the widget (e.g., 650px).
displayMode	string	Display mode of the widget (modal, popup).
showModalBackdrop	boolean	Show a backdrop when the widget is in modal mode.
backdropColor	string	Color of the modal backdrop (e.g. rgba(0, 0, 0, 0.5)).
launcherIconSvg	string	Custom SVG icon for the launcher.

⚡️ Quick Start

Follow these steps to integrate the widget into your app:

1. Add the following script to your React app:

import { HelpCenterWidget } from 'help-center-widget-react';

function App() {
  return (
    <div>
      <HelpCenterWidget
        apiKey="YOUR_API_KEY"
        launcherPosition="bottom-right"
        launcherColor="#fff"
        launcherBackgroundColor="#2563eb"
        displayMode="popup"
      />
      {/* Your app content */}
    </div>
  );
}

2. Replace YOUR_API_KEY with your actual API key.

3. Customize the configuration options as needed.

🖥️ Browser Support

The widget supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🤝 Contributing

We welcome contributions! If you'd like to help improve this project, feel free to open an issue or submit a pull request.

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.