# @synqro/social-share

Add social sharing buttons to your Webflow site with simple custom attributes. No code needed!

## Installation in Webflow

1. **Add the script to your site**

   Go to **Project Settings** → **Custom Code** → **Footer Code** and paste:

   ```html
   <!-- [Synqro Labs] Social Share -->
   <script src="https://cdn.jsdelivr.net/npm/@synqro/social-share@1/dist/index.min.js"></script>
   ```

2. **Add share buttons**

   Create buttons or links in your Webflow designer, then add custom attributes:

3. **Publish your site**

## Custom Attributes

Select any button or link element in Webflow, then add one of these custom attributes:

| Attribute              | Value               | What it does                                                  |
| ---------------------- | ------------------- | ------------------------------------------------------------- |
| `sl-share-fb`            | (leave empty)       | Share on Facebook                                                 |
| `sl-share-linkedin`      | (leave empty)       | Share on LinkedIn (uses your page's OG meta tags for the preview) |
| `sl-share-x`             | (leave empty)       | Share on X/Twitter with page title                                |
| `sl-share-copy`          | (leave empty)       | Native share sheet on **mobile**, copy to clipboard on **desktop** |
| `sl-share-chatgpt`       | (leave empty)       | Open ChatGPT with a prompt to summarize the page                  |
| `sl-share-perplexity`    | (leave empty)       | Open Perplexity with a search to summarize the page               |
| `sl-share-claude`        | (leave empty)       | Open Claude with a prompt to summarize the page                   |
| `sl-share-grok`          | (leave empty)       | Open Grok (xAI) with a prompt to summarize the page               |
| `sl-share-ai-prompt`     | Your custom prompt  | Override the default AI prompt (default: "Summarize this article:") |
| `sl-share-text`          | Your custom text    | Custom text for X share (optional, uses h1 by default)            |
| `sl-share-copy-confirm`  | Your custom message | Custom toast text after copying (default: `Link copied!`)         |
| `sl-share-error-confirm` | Your custom message | Custom toast text if the copy fails (default: `Failed to copy link.`) |
| `sl-share-toast`         | `false`             | Disable the toast notification (use CSS hooks instead, see below) |

## Examples

### Basic Setup (share current page)

1. Create a button in Webflow
2. Select the button
3. Add custom attribute: `sl-share-fb` (no value needed)
4. Done! The button now shares your page on Facebook

**For all platforms:**
- `sl-share-fb` → Facebook
- `sl-share-linkedin` → LinkedIn
- `sl-share-x` → X (Twitter)
- `sl-share-copy` → Copy link
- `sl-share-chatgpt` → Summarize with ChatGPT
- `sl-share-perplexity` → Summarize with Perplexity
- `sl-share-claude` → Summarize with Claude
- `sl-share-grok` → Summarize with Grok

### With Custom Text (X only)

To customize the text for X:

1. Add the share attribute: `sl-share-x`
2. Add text attribute: `sl-share-text` with value `"Check out this article!"`

By default, it automatically uses your page's first `<h1>` as the text.

> **Note on LinkedIn:** LinkedIn doesn't accept a text parameter anymore — it pulls the preview (title, description, image) directly from your page's Open Graph meta tags (`og:title`, `og:description`, `og:image`). Make sure those are set properly in Webflow's **Page Settings → SEO**.

### Custom Copy Message

For the copy button (desktop only — mobile uses the native share sheet):

1. Add attribute: `sl-share-copy`
2. Add attribute: `sl-share-copy-confirm` with value `"Copied!"`

**Auto-translated messages:** The script auto-detects your page language from the `<html lang="...">` attribute (set automatically by Webflow on multilingual sites). Supported languages:

| Language | Copied               | Error                        |
| -------- | -------------------- | ---------------------------- |
| English  | Link copied!         | Failed to copy link.         |
| French   | Lien copié !         | Échec de la copie du lien.   |
| Spanish  | ¡Enlace copiado!     | Error al copiar el enlace.   |
| German   | Link kopiert!        | Kopieren fehlgeschlagen.     |

If the page language isn't in this list, English is used as fallback. To override entirely, use `sl-share-copy-confirm` and `sl-share-error-confirm`.

## Toast Notification

When the copy button is clicked on desktop, a small black pill appears above the button with a confirmation message, then fades out after 2 seconds.

### Customize the toast appearance

The toast uses the class `.sl-share-toast`. Add this to your Webflow custom code (or global CSS) to override the default styles:

```css
.sl-share-toast {
    background: #0066ff;
    color: #fff;
    font-family: 'Your Font', sans-serif;
    border-radius: 4px;
}
```

### Disable the toast and use your own UI

Set `sl-share-toast="false"` on the button. The script will still add temporary CSS classes you can hook into:

- `sl-share-copied` — added for 2 seconds after a successful copy
- `sl-share-error` — added for 2 seconds if the copy fails

Example in Webflow: create an interaction that shows a custom element when the class `sl-share-copied` is added to the button.

## AI Share

Share an article with an AI for instant summarization. The prompt is auto-translated based on the page language (EN/FR/ES/DE).

### ChatGPT

1. Add attribute: `sl-share-chatgpt`
2. Click opens ChatGPT with the prompt pre-filled (user must press Enter to submit)

### Perplexity

1. Add attribute: `sl-share-perplexity`
2. Click opens Perplexity and auto-submits the search

### Claude

1. Add attribute: `sl-share-claude`
2. Click opens Claude with the prompt pre-filled. The user must be **logged in to claude.ai** for the pre-fill to apply. If the Claude mobile or desktop app is installed, the OS intercepts the URL automatically.

### Grok

1. Add attribute: `sl-share-grok`
2. Click opens Grok (xAI) with the prompt pre-filled.

### Custom AI prompt

Override the default "Summarize this article:" prompt:

1. Add attribute: `sl-share-chatgpt` (or `sl-share-perplexity`, `sl-share-claude`, `sl-share-grok`)
2. Add attribute: `sl-share-ai-prompt` with value `"Explain this article in simple terms:"`

> **Note:** Google Gemini doesn't currently support URL-based prompt pre-filling — only an extension can do it client-side.

## What happens when users click

- **Facebook**: Opens a popup to share the page
- **LinkedIn**: Opens a popup that works on desktop AND mobile (uses your page's OG meta tags)
- **X (Twitter)**: Opens a popup with your page title + URL pre-filled
- **Copy**:
  - On **mobile** (or any device with the Web Share API): opens the **native share sheet** — the user can share to any installed app (WhatsApp, Messages, Mail, Instagram DM, LinkedIn, etc.)
  - On **desktop**: copies the URL to the clipboard and shows a toast notification
- **ChatGPT**: Opens ChatGPT with a summarize prompt pre-filled (user presses Enter)
- **Perplexity**: Opens Perplexity and auto-searches for a summary of the article
- **Claude**: Opens Claude with the prompt pre-filled (user must be logged in)
- **Grok**: Opens Grok (xAI) with the prompt pre-filled

**Smart defaults:**
- Automatically uses your page's first `<h1>` as the share text for X
- Falls back to just the URL if no h1 exists
- Works with all browsers

## Tips

- Works on any element (buttons, links, divs, etc.)
- No styling included - style your buttons however you want in Webflow
- Can share any URL by adding it as the attribute value: `sl-share-fb="https://example.com"`
- Perfect for blog posts, portfolio pieces, product pages