Activity-finder-button NPM

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/activity-finder-button@1.0.0/dist/activityFinder.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const activityFinder = new ActivityFinder({
         orgId: "1",
        });
      });
    </script>
  </body>
</html>