Social Follow Popup

A light popup inviting visitors to follow you on social media, with icon buttons for the networks you pick.

Copied 0 times.

Follow along

New drops and behind-the-scenes, first.

IGTTXinYTf

Maybe later

Customize the prompt

Which networks?When does it show?

Build a social follow popup for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A full-viewport overlay (light dark tint) with a centered card, max width 400px, rounded corners.
- Card contents: close X (top-right), a short friendly headline like "Follow along", one line saying what followers get (real value, no hype), a row of social icon buttons, and a "Maybe later" dismiss link.

NETWORKS
- Show all major networks I fill in: Instagram, TikTok, X, LinkedIn, YouTube, Facebook. One row that wraps to two on small screens.
- Each network is an entry in a config array (name, profile URL, icon); render a button only for entries with a real URL filled in. Empty config = the popup does not render at all.
- Icons are inline SVG (no icon-font or third-party script), each inside a circular button with the network's recognizable shape; hover/focus state lifts it slightly.

TRIGGER
- Show it after the visitor has been on the page for 20 seconds (pause the timer while the tab is hidden).
- Show at most once per visitor: set a localStorage flag on show or dismiss and never show again for 60 days.

BEHAVIOR
- Close on: X, "Maybe later", overlay click, Escape.
- Each icon button opens the profile in a new tab (rel="noopener").

ACCESSIBILITY AND QUALITY
- Focus trap while open, focus restored on close; role="dialog", aria-modal="true".
- Every icon button has an aria-label naming the network ("Follow us on Instagram").
- Icon buttons at least 44x44px with visible focus rings.
- Fade + scale-in 150-200ms; no layout shift behind the overlay; full-width card with margins on small screens.

QUESTIONS
- Before you build, find or ask for: my real profile URL for every network shown. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

What it does

The social follow popup turns a good visit into a lasting connection: a friendly card that invites people to follow you, with one tidy row of buttons for your networks. A visitor who follows you comes back, and one who just closes the tab usually doesn't.

Buttons appear only for profiles you actually fill in; none filled, no popup.
Each button opens your real profile in a new tab.
The line under the headline says what followers get, real value, no hype.
It waits until someone is enjoying the visit before asking.
Shows at most once, then stays away for 60 days. No dark patterns, just an ask.

How it works

1Pick which networks get buttons, all the big ones, just Instagram and TikTok, or just X and LinkedIn.
2Choose when it appears: after 20 seconds on the page, or once someone has scrolled halfway down, a sign they like the content.
3Copy the prompt, a paste-in build plan for your AI, into whichever AI you use.
4Drop your real profile links into the marked spots; buttons only appear for the ones you fill, so there's never a dead button.
5Write the one line saying what followers get, keeping it something you actually deliver.
6Close it once as a test: the Maybe later link, the X, a click outside, and Escape should all work, then it stays gone.

What you can customize

Which networks: all major fits brands that live everywhere; Instagram plus TikTok suits visual brands; X plus LinkedIn suits professional ones.
When it shows: after 20 seconds is the gentle default; at half scroll it only asks people who clearly like what they're reading.
The headline, the promise line, and the colors adapt to your site, because your AI builds the card right inside your own design.

Social Follow Popup

Customize the prompt

What it does

How it works

What you can customize

You'll also like

Shine CTA Button

Review Stars Strip

Glow Pulse Button