Learn how to show a share button when a visitor selects text on your Webflow site.
In this tutorial, Sandro, co-founder of Gemeos Webflow agency, shows you how to display a quote-sharing button when a visitor selects text on your Webflow site.
Example
Select text in this paragraph
"The best website is the one your clients understand instantly. Clarity converts better than creativity. A clean design with a strong message always beats a complex design with a vague message."
Select at least 20 characters to see the button appear
| Behavior | Trigger | Action |
|---|
| Button appears | Selection > 20 characters | Button positioned near the selection |
| Mobile sharing | Web Share API available | Opens the native share menu |
| Desktop sharing | Web Share API unavailable | Opens Twitter with the quote prefilled |
| Disappears | Click elsewhere | Button hidden |
The script
Standalone, no Webflow element needed. Add it to the Footer code.
(function() {
var style = document.createElement('style');
style.textContent =
'.share-quote-btn { position: fixed; background: #111; color: #fff; padding: 8px 14px;' +
'border-radius: 100px; font-size: 13px; cursor: pointer; z-index: 9999; display: none;' +
'align-items: center; gap: 6px; border: none; font-family: inherit; white-space: nowrap;' +
'box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: opacity 0.2s; }' +
'.share-quote-btn:hover { opacity: 0.85; }';
document.head.appendChild(style);
var btn = document.createElement('button');
btn.className = 'share-quote-btn';
btn.innerHTML = '🔗 Share this quote';
document.body.appendChild(btn);
var selectedText = '';
document.addEventListener('mouseup', function(e) {
var sel = window.getSelection();
var text = sel ? sel.toString().trim() : '';
if (text.length < 20) { btn.style.display = 'none'; return; }
selectedText = text;
btn.style.display = 'flex';
btn.style.top = (e.pageY - 50) + 'px';
btn.style.left = Math.min(e.pageX - 60, window.innerWidth - 220) + 'px';
});
document.addEventListener('mousedown', function(e) {
if (e.target !== btn) btn.style.display = 'none';
});
btn.addEventListener('click', function() {
var url = window.location.href;
var twitterUrl = 'https://twitter.com/intent/tweet?text=' +
encodeURIComponent('"' + selectedText.substring(0, 200) + '"') +
'&url=' + encodeURIComponent(url);
if (navigator.share) {
navigator.share({ title: document.title, text: '"' + selectedText + '"', url: url });
} else {
window.open(twitterUrl, '_blank');
}
btn.style.display = 'none';
});
})();
Customize sharing
To share on LinkedIn instead of Twitter, replace the URL:
var linkedinUrl = 'https://www.linkedin.com/sharing/share-offsite/?url=' +
encodeURIComponent(url) + '&summary=' + encodeURIComponent('"' + selectedText + '"');
window.open(linkedinUrl, '_blank');
good to know
The Web Share API is available on mobile (iOS Safari, Android Chrome) and on some newer desktop browsers. On browsers that don't support it, the Twitter fallback kicks in automatically. To check support: if (navigator.share) { /* API available */ } else { /* fallback */ }.
Conclusion
Quote sharing turns your readers into content amplifiers. Use cases:
- Long-form articles with punchy wording
- Interviews and expert quotes
- Client testimonial pages
Select text in this paragraph
"The best website is the one your clients understand instantly. Clarity converts better than creativity." Select this quote to make the share button appear just above it.
.avif)
