activity-finder-button

v3.0.13

Published

a year ago

A floating activity finder button that can be easily added to any website

0High
0Medium
0Low

shreeyash

activity finder button floating

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:

npm install activity-finder-button

CDN

Add the following script tag to your HTML page:

<script src="https://cdn.jsdelivr.net/npm/activity-finder-button@latest/dist/activityFinder.js"></script>

Wordpress Integration

    <!-- Initialize the Activity Finder -->
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const activityFinder = new ActivityFinder({
          orgId: "1",
          buttonText: "Aktivitäten finden",
          position: "right"
        });
      });
    </script>

Usage

Initialize the button with your desired configuration:

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

<!DOCTYPE html>
<html>
  <head>
    <title>Activity Finder Example</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/activityFinder.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const activityFinder = new ActivityFinder({
         orgId: "1",
        });
      });
    </script>
  </body>
</html>

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Opera (latest)

License

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Support

For support, please open an issue in the issue tracker.