# Activity Finder Button
A lightweight, customizable floating button component that can be easily integrated into any website. The button appears on the side of your page and can be configured to link to any URL.
## Features
- 🎯 Easy to integrate
- 🎨 Modern design with Tailwind CSS
- 📱 Fully responsive
- ⚙️ Customizable position, text, and target URL
- 🔄 Dynamic updates supported
- 🪶 Lightweight with minimal dependencies
## Installation
### NPM
Install the package using npm:
```bash
npm install activity-finder-button
```
### CDN
Add the following script tag to your HTML page:
```html
```
## Wordpress Integration
```
```
## Usage
Initialize the button with your desired configuration:
```javascript
const activityFinder = new ActivityFinder({
orgId: "1"
buttonText: "Find Activities",
position: "right",
});
```
### Configuration Options
| Option | Type | Default | Description |
| -------------- | -------------------------------- | ----------------- | ----------------------------------------------- |
| `orgId` | string | '1' | Organization ID for the activity finder |
| `buttonText` | string | 'Activity Finder' | Text displayed on the button |
| `position` | 'right'\| 'left' | 'right' | Button position on the screen |
| `view` | 'desktop'\| 'mobile' \| 'tablet' | 'desktop' | Controls the width of the activity finder panel |
| `language` | 'en'\| 'de' | auto-detected | Language for the activity finder interface |
| | | | |
// ... existing documentation ...
### Styling
The button uses Tailwind CSS for styling, which is automatically injected into your page. It features:
- Modern, clean design
- Hover effects
- Shadow effects
- Smooth transitions
- Responsive sizing
## Example
```html
Activity Finder Example
```
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
## License
MIT © Shreeyash Haritashya, Hyll
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## Support
For support, please open an issue in the [issue tracker](https://gitlab.com/hyll/devs/hyll-webchat-integration/-/issues).