UI • v1.3.0

@synqro/social-share

Social share buttons with AI summarization, native share sheet on mobile and auto-translated toasts.

Drop an attribute on any button: facebook, linkedin, x, copy, chatgpt, perplexity, claude or grok. On mobile only, sl-share-copy opens the native share sheet (WhatsApp, Messages, Mail, any installed app) — desktop always copies to clipboard. AI buttons open ChatGPT, Perplexity, Claude or Grok with a summarize prompt auto-translated to the page language (EN/FR/ES/DE).

Install • Paste in Project Settings → Custom Code → Footer

HTML

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

Installation

1
Add the script to your Webflow project. Go to Project Settings → Custom Code → Footer Code and paste the snippet above.
2
Add the custom attributes to the relevant elements in the Webflow designer — see the table below.
3
Publish your site. The script initializes automatically on DOMContentLoaded.

Configuration

Select the element in the Webflow designer and add these custom attributes under the Element Settings panel.

Attribute	Value	Description
	`(empty) or URL`	Share on Facebook.
	`(empty) or URL`	Share on LinkedIn. Uses the page's OG meta tags for the preview.
	`(empty) or URL`	Share on X (Twitter) with page title.
	`(empty) or URL`	Opens the native share sheet on mobile only. Desktop always copies to clipboard.
	`(empty) or URL`	Open ChatGPT with a prompt to summarize the page. The prompt is pre-filled — the user presses Enter to submit.
	`(empty) or URL`	Open Perplexity with a search to summarize the page. The search auto-submits.
	`(empty) or URL`	Open Claude with a prompt to summarize the page. Requires the user to be logged in to claude.ai.
	`(empty) or URL`	Open Grok (xAI) with a prompt to summarize the page.
	`custom prompt`	Override the default AI prompt ("Summarize this article:"). Auto-translated to EN/FR/ES/DE by default.
	`custom text`	Custom text for X share (optional, uses first h1 by default).
	`custom toast text`	Override the auto-translated success message. Default adapts to page language.
	`custom toast text`	Override the auto-translated error message.
	`false`	Disable the toast. Temporary classes sl-share-copied / sl-share-error are still added for Webflow Interactions.

Examples

All four buttons — share current page

HTML

<button sl-share-fb>Facebook</button>
<button sl-share-linkedin>LinkedIn</button>
<button sl-share-x>X</button>
<button sl-share-copy>Share / Copy</button>

Share a specific URL (useful for blog/CMS cards)

HTML

<button sl-share-copy="https://synqro.co/blog/my-post">
    Share this post
</button>

Disable the toast, use custom Webflow interactions

HTML

<button sl-share-copy sl-share-toast="false">
    Share
</button>
<!-- Listen for .sl-share-copied class added for 2 seconds -->

AI summarize buttons

HTML

<button sl-share-chatgpt>Summarize with ChatGPT</button>
<button sl-share-perplexity>Summarize with Perplexity</button>
<button sl-share-claude>Summarize with Claude</button>
<button sl-share-grok>Summarize with Grok</button>

AI with custom prompt

HTML

<button sl-share-chatgpt sl-share-ai-prompt="Explain this article in simple terms:">
    Explain with AI
</button>

Tips & notes

Mobile — sl-share-copy uses the Web Share API (native share sheet). Falls back to clipboard on desktop.
LinkedIn — ensure your page has proper OG meta tags (og:title, og:description, og:image) via Webflow SEO settings.
i18n — the toast and AI prompts auto-detect the page language from <html lang="..."> (set by Webflow on multilingual sites). Supported: EN, FR, ES, DE.
AI — ChatGPT pre-fills the prompt (user presses Enter). Perplexity auto-submits the search. Claude pre-fills if the user is logged in to claude.ai. Grok works similarly. Gemini doesn't support URL prompts natively.