Author Bio Box Widget
Close every article with a proper introduction to the person who wrote it: photo, name, job title, a short bio where key phrases can be bold, links to their profiles and website, a More articles by link and an optional Follow button. Three layouts fit magazine templates, minimalist blogs and newsletters on the web.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
Fill in the required fields above - until then this code shows nothing on your site.
<div data-a2z-kit="author-bio-card" data-profiles="instagram | https://www.instagram.com/example bluesky | https://bsky.app/profile/example.bsky.social linkedin | https://www.linkedin.com/in/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 bio is plain text with one exception: a pair of double asterisks makes bold, so Jordan has tested **400 recipes** shows 400 recipes in bold. The text is split on ** and each part is added as a text node or a strong element, so angle brackets, script tags and HTML entities appear literally and can never run; an unpaired ** stays as typed. The photo must be https, carries width and height, loads lazily and falls back to the author's initials. Profile links use host-name detection (up to 10) and are marked rel=me as the author's own; the website link too. More articles by <name> links to your author archive (http or https only, opening in the same tab), and the Follow button can point to any profile, newsletter or mailto: address. Layouts: box (tinted card with an About the author eyebrow and accent edge), inline (photo on the left between two rules) and minimal (one Written by line with small icons).
Method
- Bold: split on "**"; parts 1, 3, 5... inside complete pairs -> <strong>; an unpaired ** is literal; text only via textContent
- Photo: https only, width/height set, loading=lazy, initials fallback on error
- Links: profiles by host name (max 10, rel="noopener me"); More articles: http(s), same tab; Follow: http(s), tel: or mailto:
Worked examples
Bold and hostile text
Inputs: bio=Writes about **<b>baking</b>** and <script>alert(1)</script>
Result: Writes about [bold]<b>baking</b>[/bold] and <script>alert(1)</script> - shown as visible characters
Only ** creates bold; tags are displayed as text and never run.
No photo
Inputs: name=Jordan Lee, photo blank
Result: A JL monogram beside the bio
The initials keep the layout balanced without a broken image.
Limitations
- Adds no structured data; author markup must come from your page's own HTML or CMS.
- Bio formatting is limited to **bold**; links inside the bio are not supported.
- One author per box.
Where publishers use it
- A multi-author food magazine adding a box with each writer's photo and Instagram at the end of recipes
- A law firm's insights blog showing the author's title, LinkedIn and a link to their other articles
- A solo newsletter archive using the minimal layout with a Follow button to the sign-up page
- A Ghost or WordPress theme without an author box, filled in per post through a Custom HTML block
Questions
Does this add author structured data (schema.org Person) for Google?
No, and it should not. Author markup belongs in your page's own HTML - your CMS or theme's Article JSON-LD with an author Person and a url to their profile page. Content drawn by a script inside a Shadow DOM, or inside an iframe from another site, is not part of your page's own markup in the way structured data needs (an iframe's content even belongs to a2z.tools), so A2Z adds none. The box is the visible half; keep the markup in your template.
How do I make words bold in the bio?
Wrap them in double asterisks: **award-winning**. Only bold is supported; everything else, including HTML tags, is shown exactly as typed so a pasted bio can never inject code.
Why rel=me on the author's profile links?
It states that the linked profiles belong to the person in the box - the IndieWeb convention Mastodon also uses. Mastodon's verification reads your server's HTML rather than script-drawn links, so for a verified tick add a rel=me link to the author page in your template too.
Can I use it for several authors?
Yes - use one embed per author with that author's details, ideally in your post template so the right box appears under each article.
Sources
- Article structured data (author) - Google Search Central . Author properties belong in the page's own Article markup
- Person - schema.org . The type used for an article's author
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 Author Bio Box https://a2z.tools/embed/author-bio-card
<a href="https://a2z.tools/embed/author-bio-card">A2Z Tools Author Bio Box</a>
[A2Z Tools Author Bio Box](https://a2z.tools/embed/author-bio-card)
Author Bio Box by A2Z Tools - https://a2z.tools/embed/author-bio-card
Related widgets
-
A polished profile card - photo, name, role, short bio, social icons and one call to action.
-
Follow buttons for up to 20 profiles in brand colours - icons, labels, card, list or tiles. No social scripts.
-
Shows "6 min read" on your post, counted from the page's own text at a researched 238 words per minute.
-
"Updated 3 October 2026" from your page's real modified date - meta tags or JSON-LD - never the load time.
-
Share buttons for 26 networks - inline, floating, mobile bar or one Share button. No social scripts or cookies.
-
One Share button that opens the phone's own share sheet, with a tidy fallback panel on desktop.
