Social Profile Card Widget

Introduce yourself or your business in one tidy card: a photo or logo, your name and role, a two-line bio, where you are, your website, your social profiles and one button that matters - Book a table, See my work, Hire me. Four looks cover a creator's gradient header, a business card with a square logo, a compact sidebar card and a borderless minimal version.

Social Media Social No trackers, no cookies Free · no ads

Customize your widget

Profile
Two or three lines read best (300 characters max).
Blank shows your initials.
Links
Social profiles (up to 12)
https, tel: or mailto:.
Style
Advanced
Light or dark
Match page reads the background behind the component.

Live preview

Exactly what your visitors will see

Embed code

Fill in the required fields above - until then this code shows nothing on your site.

<div data-a2z-kit="social-profile-card" data-profiles="instagram | https://www.instagram.com/example
facebook | https://www.facebook.com/example
tiktok | https://www.tiktok.com/@example
youtube | https://www.youtube.com/@example"></div>
<script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>

One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.

Works with

How it works

The card is built from your fields as plain text - nothing you type is treated as HTML. The photo must be an https image; it gets explicit width and height so the page does not jump while it loads, loads lazily, and if it is missing or fails the card shows an initials monogram on the accent gradient instead (Riverside Cafe becomes RC, using the first letter of the first two words in any alphabet). The website and button links must be https or http (the button may also be a tel: or mailto: link); anything else is dropped rather than shown broken. Social profiles follow the same host-name rules as the follow buttons, up to 12, each with a spoken name such as Riverside Cafe on Instagram. Layouts: creator (gradient cover and big centred photo), business (square logo, left aligned, accent edge), compact (tighter for sidebars) and minimal (no card surface).

Method

  • Photo: https only (k.safeImage), width/height set, loading=lazy, referrerpolicy=no-referrer; on error -> initials
  • Initials: first character of the first two words, letters and digits only (Unicode), upper-cased
  • Links: website http(s); button http(s), tel: or mailto:; profiles by host name, max 12

Worked examples

Broken photo address

Inputs: avatar=https://cdn.example/missing.jpg, name=Riverside Cafe

Result: An RC monogram on the accent gradient

The error handler replaces the image so no broken icon appears.

Unsafe button link

Inputs: cta=Book now, ctaurl=javascript:alert(1)

Result: No button is shown

Only http(s), tel: and mailto: links become buttons.

Limitations

  • One call-to-action button; for many links use the Link in Bio Page widget.
  • The bio is plain text (up to 300 characters) without links or formatting.
  • No follower counts or live profile data.

Where publishers use it

  • A wedding photographer's home page with a creator card and a See my portfolio button
  • A cafe's About page using the business layout with its logo, address area and Book a table
  • A consultant's blog sidebar with the compact card and a Hire me link to the contact page
  • A conference speaker page showing each speaker as a minimal card with their profiles

Questions

What size should my photo be?

A square image of at least 192 x 192 pixels looks sharp on high-density screens; the card crops it to a circle (or a rounded square in the business layout). Host it on your own site or CDN over https.

What if my photo does not load?

The card swaps in a monogram of your initials on the accent gradient, so it never shows a broken image icon. The monogram uses the first two words of your name and works in any alphabet.

Can I use it as a link-in-bio page?

It works well at the top of one, but for a stack of many links use the Link in Bio Page widget. This card is for one introduction and one main action.

Does it add schema.org markup for my business?

No. Structured data should live in your page's own HTML where search engines expect it, and the card is drawn by a script, so A2Z adds none.

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Social Profile Card
https://a2z.tools/embed/social-profile-card

Related widgets

More Social Media widgets →

  • Author Bio Box

    Social Media Social New

    An About the author box for the end of posts - photo, bio with bold, profiles and More articles link.

    Get code

  • Link in Bio Page

    Business & Contact Tool New

    A mobile-first profile with avatar, bio, featured link buttons and social badges in soft, bold or outline style.

    Get code

  • Business Card Widget

    Business & Contact Tool New

    A digital business card with call, email, website and directions buttons plus a .vcf contact download.

    Get code

  • Social Media Follow Buttons

    Social Media Social New

    Follow buttons for up to 20 profiles in brand colours - icons, labels, card, list or tiles. No social scripts.

    Get code

  • Social Media Share Buttons

    Social Media Social New

    Share buttons for 26 networks - inline, floating, mobile bar or one Share button. No social scripts or cookies.

    Get code

  • Native Share Button

    Social Media Social New

    One Share button that opens the phone's own share sheet, with a tidy fallback panel on desktop.

    Get code

Preview

CustomizeGet code
A2Z EMBEDS FOR YOUR WEBSITE