Key Takeaways Box Widget
Open a long article with the four or five points a busy reader needs, in a box titled Key takeaways, TL;DR or your own words. Each point can jump straight to the section that explains it.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="key-takeaways-box"></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
Write one point per line. To link a point to a heading further down, end the line with | #heading-id, using the id attribute your heading already has (WordPress, Ghost and most site builders add one, or the A2Z Table of Contents widget can). Only ids made of letters, digits, hyphens, underscores, colons and dots are accepted; anything else leaves the point as plain text. Pick a title - Key takeaways, TL;DR, In short, Summary or a custom one - and markers: green checks, numbers or accent dots. Card is a white panel with a soft shadow, Accent wraps it in the blue-to-purple gradient border, and Minimal is just a coloured rule beside the list, for sites with a strong design of their own. With Show/Hide on, a small button collapses the list; it always starts open so the summary is never hidden from readers or search engines. As an iframe the box cannot scroll your page, so jump links appear only when it is placed with the on-page code.
Method
- Line format: point text | #heading-id (the anchor part is optional)
- Accepted anchors: ^#[A-Za-z][A-Za-z0-9_:.-]{0,80}$ - otherwise the point is shown without a link
- Up to 20 points of 300 characters; a leading - or * bullet is removed
- Collapsible: button with aria-expanded and aria-controls, starts expanded
Worked examples
A gardening guide
Inputs: Plant hardy vegetables such as peas and spinach as soon as the soil can be worked | #what-to-plant
Result: A check-marked point that, when clicked, scrolls to the heading with id what-to-plant
The anchor is validated and becomes an ordinary in-page link.
A mistyped anchor
Inputs: Water deeply once a week | #2 watering
Result: The point shown without a link
Ids must start with a letter and contain no spaces, so the anchor is dropped instead of producing a broken link.
Limitations
- Plain text points only - no bold or links other than the jump link.
- Jump links need an existing id on the target heading and work only with the on-page code.
- Up to 20 points.
Where publishers use it
- A 3,000-word buying guide opening with five takeaways that jump to each product section
- A news explainer with a TL;DR box for readers who only need the outcome
- A health or finance article summarising its main points in a numbered list before the detail
- Internal documentation pages with a collapsible summary at the top
Questions
How do I find a heading's id for the jump link?
Right-click the heading in your browser, choose Inspect and look for id="..." on the h2 or h3 element. In WordPress, open the heading block's Advanced panel and fill in HTML anchor. Then end the takeaway line with | #that-id. If a heading has no id, add one or leave the point without a link.
Does a TL;DR box help SEO?
It helps readers first: a clear summary keeps people on the page and lets them jump to what they came for. The box is ordinary text on your page, so search engines can read it like any other paragraph, but no widget can promise a ranking or a featured snippet.
Why don't the jump links work in the iframe version?
An iframe is a separate document, so a link to #section inside it cannot scroll the article around it. Use the on-page embed code - the default - for working jump links; the iframe option is there for platforms that allow only iframes, and it shows the points as plain text.
Can the box start collapsed?
No. A summary that starts hidden defeats its purpose and is easily missed by screen-reader users, so the Show/Hide button only lets readers fold it away after they have seen it.
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 Key Takeaways Box https://a2z.tools/embed/key-takeaways-box
<a href="https://a2z.tools/embed/key-takeaways-box">A2Z Tools Key Takeaways Box</a>
[A2Z Tools Key Takeaways Box](https://a2z.tools/embed/key-takeaways-box)
Key Takeaways Box by A2Z Tools - https://a2z.tools/embed/key-takeaways-box
Related widgets
-
An automatic table of contents from your headings, with active-section highlight and sticky-header offset.
-
Note, Tip, Info, Success, Warning and Danger boxes for articles and docs, with bold text and safe links.
-
A slim bar or small circle that fills as visitors read your article - measured through the article itself.
-
Shows "6 min read" on your post, counted from the page's own text at a researched 238 words per minute.
-
A scroll-to-top button that waits until readers scroll, with a progress ring and keyboard-friendly focus.
-
"Updated 3 October 2026" from your page's real modified date - meta tags or JSON-LD - never the load time.
