`
-
-
-
-
-TypeError: SocialShareButton is not a constructor
-
-**Cause:** CDN script not loaded yet
-
-**Solution:** Use interval polling (see Next.js example above)
+Choose your framework and start sharing in minutes — no dependencies, no setup friction.
-
+**Start here if you're new to SocialShareButton:**
-
-URL not updating on navigation
+### Installation Guides
+- [CDN Setup](./docs/installation-cdn.md) - Fastest way to get started
+- [npm Package](./docs/installation-npm.md) - For build-based workflows
-**Cause:** Component initialized once, doesn't track routes
+### Framework Guides
+- [Vanilla JavaScript](./docs/vanilla-js.md) – Zero-build, script-tag usage
+- [React](./docs/react.md) – Create React App & React projects
+- [Next.js (App Router)](./docs/nextjs-app-router.md) – Recommended for new Next.js apps
+- [Next.js (Pages Router)](./docs/nextjs-pages-router.md) – Legacy Next.js support
+- [Vue / Angular / Vite](./docs/vue-angular.md) – Framework-agnostic setup
-**Solution:** Use `updateOptions()` method (see Advanced Usage above)
+### Customize & Configure
+- [Configuration Options](./docs/customization.md) - Colors, styles, button variants, and messaging
+- [Callbacks](./docs/callbacks.md) - Track share events in your app
+- [Dynamic URLs (SPA)](./docs/spa-dynamic-url.md) - Update share URL on route changes
-
+### Help & Support
+- [Troubleshooting](./docs/troubleshooting.md) - Common issues and solutions
+- [View all docs](./docs/index.md) - Complete documentation index
---
-## Examples
+## 🎬 Demo
-### Mobile Menu
+See SocialShareButton in action! Open `index.html` in your browser to explore all features.
-```jsx
-
-```
-
-### Custom Platforms
-
-```jsx
-// Professional networks only
-new SocialShareButton({
- container: '#share-button',
- platforms: ['linkedin', 'twitter', 'email']
-});
-
-// Messaging apps only
-new SocialShareButton({
- container: '#share-button',
- platforms: ['whatsapp', 'telegram']
-});
-```
-
-### Custom Styling
-
-```jsx
-new SocialShareButton({
- container: '#share-button',
- buttonStyle: 'icon-only',
- theme: 'light'
-});
-```
-
----
-
-## Demo
-
-Open `index.html` in your browser to see all features.
-Tutorial: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM
+📺 **Video Tutorial:** [Watch on YouTube](https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM)
---
-## Contributing
-
We welcome contributions of all kinds! To contribute:
1. Fork the repository and create your feature branch (`git checkout -b feature/AmazingFeature`).
@@ -677,7 +154,9 @@ If you encounter bugs, need help, or have feature requests:
We appreciate your feedback and contributions!
-This project is licensed under the GNU General Public License v3.0.
-See the [LICENSE](LICENSE) file for details.
-
---
+
+## License
+
+This project is licensed under the GNU General Public License v3.0.
+See the [LICENSE](LICENSE) file for details.
\ No newline at end of file
diff --git a/docs/callbacks.md b/docs/callbacks.md
new file mode 100644
index 0000000..4eef912
--- /dev/null
+++ b/docs/callbacks.md
@@ -0,0 +1,13 @@
+# Callbacks
+
+```jsx
+new SocialShareButton({
+ container: '#share-button',
+ onShare: (platform, url) => {
+ console.log(`Shared on ${platform}: ${url}`);
+ },
+ onCopy: (url) => {
+ console.log('Link copied:', url);
+ }
+});
+```
\ No newline at end of file
diff --git a/docs/customization.md b/docs/customization.md
new file mode 100644
index 0000000..6fd2d59
--- /dev/null
+++ b/docs/customization.md
@@ -0,0 +1,148 @@
+# Customization & Configuration
+
+## Basic Options
+
+```jsx
+new SocialShareButton({
+ container: '#share-button', // Required: CSS selector or DOM element
+ url: 'https://example.com', // Optional: defaults to window.location.href
+ title: 'Custom Title', // Optional: defaults to document.title
+ buttonText: 'Share', // Optional: button label text
+ buttonStyle: 'primary', // default | primary | compact | icon-only
+ theme: 'dark', // dark | light
+ platforms: ['twitter', 'linkedin'] // Optional: defaults to all platforms
+});
+```
+
+## All Available Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `container` | string/Element | - | **Required.** CSS selector or DOM element |
+| `url` | string | `window.location.href` | URL to share |
+| `title` | string | `document.title` | Share title/headline |
+| `description` | string | `''` | Additional description text |
+| `hashtags` | array | `[]` | Hashtags for posts (e.g., `['js', 'webdev']`) |
+| `via` | string | `''` | Twitter handle (without @) |
+| `platforms` | array | All platforms | Platforms to show (see below) |
+| `buttonText` | string | `'Share'` | Button label text |
+| `buttonStyle` | string | `'default'` | `default`, `primary`, `compact`, `icon-only` |
+| `buttonColor` | string | `''` | Custom button background color |
+| `buttonHoverColor` | string | `''` | Custom button hover color |
+| `customClass` | string | `''` | Additional CSS class for button |
+| `theme` | string | `'dark'` | `dark` or `light` |
+| `modalPosition` | string | `'center'` | Modal position on screen |
+| `showButton` | boolean | `true` | Show/hide the share button |
+| `onShare` | function | `null` | Callback when user shares: `(platform, url) => {}` |
+| `onCopy` | function | `null` | Callback when user copies link: `(url) => {}` |
+
+**Available Platforms:**
+`whatsapp`, `facebook`, `twitter`, `linkedin`, `telegram`, `reddit`, `email`
+
+## Customize Share Message/Post Text
+
+Control the text that appears when users share to social platforms:
+
+```jsx
+new SocialShareButton({
+ container: '#share-button',
+ url: 'https://myproject.com',
+ title: 'Check out my awesome project!', // Main title/headline
+ description: 'An amazing tool for developers', // Additional description
+ hashtags: ['javascript', 'webdev', 'opensource'], // Hashtags included in posts
+ via: 'MyProjectHandle' // Your Twitter handle
+});
+```
+
+**How messages are customized per platform:**
+- **WhatsApp:** `title` + `description` + `hashtags` + link
+- **Facebook:** `title` + `description` + `hashtags` + link
+- **Twitter/X:** `title` + `description` + `hashtags` + `via` handle + link
+- **Telegram:** `title` + `description` + `hashtags` + link
+- **LinkedIn:** `title` + `description` + link
+- **Reddit:** `title` - `description` (used as title)
+- **Email:** Subject = `title`, Body = `description` + link
+
+## Customize Button Color & Appearance
+
+**Option 1: Use Pre-built Styles** (Easiest)
+
+```jsx
+new SocialShareButton({
+ container: '#share-button',
+ buttonStyle: 'primary' // or 'default', 'compact', 'icon-only'
+});
+```
+
+**Option 2: Programmatic Color Customization** (Recommended)
+
+Pass `buttonColor` and `buttonHoverColor` to match your project's color scheme:
+
+```jsx
+new SocialShareButton({
+ container: '#share-button',
+ buttonColor: '#ff6b6b', // Button background color
+ buttonHoverColor: '#ff5252' // Hover state color
+});
+```
+
+**Option 3: CSS Class Customization** (Advanced)
+
+For more complex styling, use a custom CSS class:
+
+```jsx
+new SocialShareButton({
+ container: '#share-button',
+ buttonStyle: 'primary',
+ customClass: 'my-custom-button'
+});
+```
+
+Then in your CSS file:
+
+```css
+/* Override the button background color */
+.my-custom-button.social-share-btn {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+}
+
+/* Customize hover state */
+.my-custom-button.social-share-btn:hover {
+ background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+}
+```
+
+**Color Examples:**
+
+```jsx
+// Material Design Red
+new SocialShareButton({
+ container: '#share-button',
+ buttonColor: '#f44336',
+ buttonHoverColor: '#da190b'
+});
+
+// Tailwind Blue
+new SocialShareButton({
+ container: '#share-button',
+ buttonColor: '#3b82f6',
+ buttonHoverColor: '#2563eb'
+});
+
+// Custom Brand Color
+new SocialShareButton({
+ container: '#share-button',
+ buttonColor: '#your-brand-color',
+ buttonHoverColor: '#your-brand-color-dark'
+});
+```
+
+## Button Styles
+
+| Style | Description |
+|-------|-------------|
+| `default` | Standard button with icon and text |
+| `primary` | Gradient button (recommended) |
+| `compact` | Smaller size for tight spaces |
+| `icon-only` | Icon without text |
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 0000000..d5a1051
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,24 @@
+# 📚 Documentation
+
+## Installation
+
+- [Installation via CDN](./installation-cdn.md)
+- [Installation via npm](./installation-npm.md)
+
+## Framework Guides
+
+- [Vanilla JavaScript](./vanilla-js.md)
+- [React](./react.md)
+- [Next.js (App Router)](./nextjs-app-router.md)
+- [Next.js (Pages Router)](./nextjs-pages-router.md)
+- [Vue / Angular / Vite](./vue-angular.md)
+
+## Configuration & Customization
+
+- [Customization & Configuration](./customization.md)
+- [Callbacks](./callbacks.md)
+- [Dynamic URL Updates (SPA)](./spa-dynamic-url.md)
+
+## Troubleshooting
+
+- [Troubleshooting Guide](./troubleshooting.md)
\ No newline at end of file
diff --git a/docs/installation-cdn.md b/docs/installation-cdn.md
new file mode 100644
index 0000000..0eeb847
--- /dev/null
+++ b/docs/installation-cdn.md
@@ -0,0 +1,8 @@
+# Installation via CDN
+
+## Via CDN (Recommended)
+
+```html
+
+
+```
\ No newline at end of file
diff --git a/docs/installation-npm.md b/docs/installation-npm.md
new file mode 100644
index 0000000..343c3fa
--- /dev/null
+++ b/docs/installation-npm.md
@@ -0,0 +1,12 @@
+# Installation via npm
+
+## Using npm Package
+
+```javascript
+import SocialShareButton from 'social-share-button-aossie';
+import 'social-share-button-aossie/src/social-share-button.css';
+
+new SocialShareButton({
+ container: '#share-button'
+});
+```
diff --git a/docs/nextjs-app-router.md b/docs/nextjs-app-router.md
new file mode 100644
index 0000000..91d5116
--- /dev/null
+++ b/docs/nextjs-app-router.md
@@ -0,0 +1,49 @@
+# Next.js (App Router)
+
+## Step 1: Add CDN to `app/layout.tsx`
+
+```tsx
+import Script from 'next/script';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+
+ {children}
+
+
+
+ );
+}
+```
+
+## Step 2: In your component:
+
+```tsx
+'use client';
+
+import { useEffect } from 'react';
+
+export default function Header() {
+ useEffect(() => {
+ new window.SocialShareButton({
+ container: '#share-button'
+ });
+ }, []);
+
+ return (
+
+ );
+}
+```
diff --git a/docs/nextjs-pages-router.md b/docs/nextjs-pages-router.md
new file mode 100644
index 0000000..2eba90f
--- /dev/null
+++ b/docs/nextjs-pages-router.md
@@ -0,0 +1,45 @@
+# Next.js (Pages Router)
+
+## Step 1: Add CDN to `pages/_document.tsx`
+
+```tsx
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+## Step 2: In your component:
+
+```tsx
+import { useEffect } from 'react';
+
+export default function Header() {
+ useEffect(() => {
+ new window.SocialShareButton({
+ container: '#share-button'
+ });
+ }, []);
+
+ return (
+
+ );
+}
+```
diff --git a/docs/react.md b/docs/react.md
new file mode 100644
index 0000000..9e50198
--- /dev/null
+++ b/docs/react.md
@@ -0,0 +1,34 @@
+# React (Create React App)
+
+## Step 1: Add CDN to `public/index.html`
+
+```html
+
+
+
+
+
+
+
+```
+
+## Step 2: In your component:
+
+```jsx
+import { useEffect } from 'react';
+
+function Header() {
+ useEffect(() => {
+ new window.SocialShareButton({
+ container: '#share-button'
+ });
+ }, []);
+
+ return (
+
+ );
+}
+
+export default Header;
diff --git a/docs/spa-dynamic-url.md b/docs/spa-dynamic-url.md
new file mode 100644
index 0000000..19433e8
--- /dev/null
+++ b/docs/spa-dynamic-url.md
@@ -0,0 +1,25 @@
+# Update URL Dynamically (SPA)
+
+**Note:** This example requires obtaining the `pathname` variable from your router. The approach depends on your framework:
+
+- **Next.js (App Router):** `import { usePathname } from 'next/navigation'; const pathname = usePathname();`
+- **React Router:** `import { useLocation } from 'react-router-dom'; const { pathname } = useLocation();`
+- **Other frameworks:** Use your framework's routing hook to access the current path
+
+```jsx
+const shareButton = useRef(null);
+
+useEffect(() => {
+ shareButton.current = new window.SocialShareButton({
+ container: '#share-button'
+ });
+}, []);
+
+useEffect(() => {
+ if (shareButton.current) {
+ shareButton.current.updateOptions({
+ url: window.location.href
+ });
+ }
+}, [pathname]); // Update on route change
+```
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
new file mode 100644
index 0000000..7408d15
--- /dev/null
+++ b/docs/troubleshooting.md
@@ -0,0 +1,46 @@
+# Troubleshooting
+
+## Multiple buttons appearing
+
+**Cause:** Component re-renders creating duplicate instances
+
+**Solution:** Use `useRef` to track initialization (already in examples above)
+
+---
+
+## Button not appearing
+
+**Cause:** Script loads after component renders
+
+**Solution:** Add null check:
+```jsx
+if (window.SocialShareButton) {
+ new window.SocialShareButton({ container: '#share-button' });
+}
+```
+
+---
+
+## Modal not opening
+
+**Cause:** CSS not loaded or ID mismatch
+
+**Solution:**
+- Verify CSS CDN link in ``
+- Match container ID: `container: '#share-button'` = `