Tutorial blogs
Step-by-step lessons with multiple syntax-highlighted code blocks and inline explanations.
Code Snippet Widget
Code snippets for documentation pages.
Paste your code, pick a language, and choose a frame. Twelve layouts from macOS windows to retro terminals, each with six themes, embedded with the Poper snippet.
No credit card required
14-day free trial
Cancel anytime
Built for builder website teams
Available on Poper plans
Try the live code snippet
Live demo, not a screenshot. Paste code, pick a frame, and style it.
Before and after Poper
See the widget live on a real page.
Here is the widget embedded on a real page layout, before and after. Style it to match your brand, then copy one snippet to go live.
●(your domain)
Before●acme.dev/blog
Poper widget liveMockups for illustration. Style the widget to match your site and embed in 90 seconds.
How to use it
How to add a code snippet widget to your website
Three setup steps in the Poper builder.
- 01Step 1
Paste your code and pick a language
Drop your code into the builder and pick a language. Syntax highlighting is built in for popular languages including TypeScript, JavaScript, Python, Go, Rust, SQL, CSS, HTML, and JSON.
- 02Step 2
Pick a frame and theme
Choose one of twelve frame layouts, from a clean macOS window to a VS Code editor, a retro CRT terminal, frosted glass, and more. Each layout comes with six color themes.
- 03Step 3
Embed on a supported page
Paste the Poper embed snippet into a supported documentation, blog, or HTML page.
Works everywhere
Works with every website platform you already use
Drop-in install on WordPress, Shopify, Wix, Squarespace, Webflow, Framer, Ghost, and any HTML-friendly stack. No build step, no developer needed.
HTML
Plus 250+ other platforms via the embed snippet. If your site can render a <script> tag, it can render the Code Snippet Widget for Website - Poper.
What you get with Poper Code Snippet
Six things that matter when you embed code blocks on a documentation site.
Built specifically for code blocks
This widget does one thing well: it renders a code block in a polished frame. Paste your code, pick a language, and choose a layout. Every default is tuned for showing code clearly on a documentation or blog page.
Twelve frame layouts
Switch between a macOS window, a VS Code editor, a retro CRT terminal, frosted glass, an isometric card, a brutalist frame, and more. Change the layout in the builder through the normal publish flow.
Multi-file tabs
Add more than one file and they render as tabs inside the same frame, so visitors can switch between examples.
Line numbers and spacing
Toggle line numbers, and tune padding, font size, and line height so the code reads the way you want.
Lightweight and layout-safe
Validate performance and layout behavior on your own page after embedding.
Six themes per layout
Every frame layout ships with six color themes. The editor exposes theme presets and spacing/text controls rather than arbitrary custom color inputs.
Use cases
Where Code Snippet Widget for Website - Poper actually moves the needle
Four buyer types who get the most lift from embedding Code Snippet Widget for Website - Poper on their site.
API docs
Reference pages with endpoint descriptions and curl, JavaScript, and Python files of the same example as tabs.
Developer portfolios
Project pages with GitHub-style snippets in a clean frame next to live-demo links.
SaaS changelogs
Release notes with code examples for API changes so customers can migrate quickly.
Poper vs other code snippet widgets
Frame range, design control, and a real free plan, compared with the popular options.
| Recommended Poper | Carbon by Dawn Labs | Common Ninja Code Highlighter | |
|---|---|---|---|
| Poper workspace available | Limited | ||
| Frame layout presets | 12 layouts | Limited | Limited |
| Themes per layout | 6 each | Several | Several |
| Multi-file tabs | |||
| Line numbers toggle | |||
| Available widget controls | Paid only | ||
| Builder setup | |||
| Bundled with popups, forms, more widgets | |||
| Paid plan details | Plan details vary | Builder export tool | Vendor pricing varies |
Comparison reflects external competitor positioning. Verify current details on each provider's site.
Available widget settings.
Developer and docs teams who switched to Poper Code Snippet.
On-brand docs
“We moved our docs to Poper's code snippet widget. The VS Code frame matched our site, and switching the theme to our brand colors took a minute.”
Priya Shah
Developer Advocate · Northstar SaaS
One frame, three languages
“Multi-file tabs are exactly what our API reference needed. We show the same request in curl, JavaScript, and Python in one frame.”
Tom Reyes
Docs Engineer · RetailHub Analytics
Built-in controls
“Twelve layouts meant we found a frame that fit our site with the built-in controls. The retro terminal one is a favorite on our blog.”
Maria Garcia
Frontend Lead · Greenleaf SaaS
Pricing
Simple, yearly pricing. Save up to 40%.
All plans are billed yearly. Each card shows the per-month equivalent. Start free, then upgrade only when you need more campaigns, websites, or AI credits.
Yearly billing · save up to 40%Starter
Essential lead capture for solo creators and growing businesses.
$15/mo
billed $180/year
- 5 active campaigns (5 widget instances)
- 1 website, 1,000 leads/mo
- 100+ templates, 10+ display formats
- Smart triggers & basic analytics
- No Poper branding
- 500 AI credits
Pro
Full engagement suite with A/B testing, gamification & unlimited leads.
$29/mo
billed $348/year
- Everything in Starter
- Unlimited campaigns & leads
- 10 websites, 5 team seats
- A/B testing & gamification
- Multi-step forms & quiz builder
- Custom domain (CNAME), 2,000 AI credits
Business
Unlimited everything with white-label, API access & advanced analytics.
$79/mo
billed $948/year
- Everything in Pro
- Unlimited websites & team seats
- White-label (add-on) & API access
- Logic jumps, live quizzes & polls
- Payment forms (Stripe/PayPal)
- Advanced analytics, 5,000 AI credits
Prices shown for the 50k monthly visitor tier on yearly billing. A Free Forever plan ($0) and a custom Enterprise plan are also available. No contracts, cancel anytime.
Guide · 1 min read
The complete guide to embedding code snippets on your site
Code blocks are the backbone of any technical documentation site or developer blog. Get them right and your pages feel polished and easy to read. Get them wrong and you frustrate the developers who came to learn. The Poper code snippet widget renders your code in a styled frame, with built-in syntax highlighting and twelve layouts to choose from. This guide covers how the widget works, the layouts and themes, multi-file tabs, and where to use it.
01
How the code snippet widget works
You paste your code into the builder and pick a language. The widget highlights the syntax and renders the code inside a frame layout you choose. Everything is set up in the dashboard with the Poper builder, and the live preview updates as you edit.
02
Twelve frame layouts
The widget includes twelve frame layouts: a clean macOS window, a VS Code editor, a retro CRT terminal, frosted glass, an isometric card, a brutalist frame, a sketchpad, a Polaroid, a cyber grid, an aura glow, and a calm zen mode. Each layout ships with six color themes, and you can switch layouts at any time through the normal publish flow.
03
Multi-file tabs for multi-language examples
Add more than one file and they render as tabs inside the same frame. This is the standard pattern for API reference pages, where the same request is shown in curl, JavaScript, and Python. Visitors switch tabs without leaving the page.
04
Styling and readability
Toggle line numbers and the frame controls, and tune padding, font size, and line height so the code reads clearly. When a theme preset is not exactly right, adjust the exposed frame, spacing, font-size, and line-height controls.
05
Where to use the code snippet widget
Use it on tutorial blogs, API documentation, developer portfolios, and SaaS changelogs. Embed it on supported documentation, blog, or HTML pages and validate the final page after publishing.
Quick reference
What is Code Snippet Widget for Website - Poper?
A code snippet widget is an embeddable component that renders syntax-highlighted code inside a styled frame, with line numbers and optional multi-file tabs.
Key facts
- You paste the code in the builder and pick a language
- Syntax highlighting is built in for around fifteen popular languages
- Twelve frame layouts are available, each with six color themes
- Multiple files render as tabs inside the same frame
- Line numbers, padding, font size, and line height are configurable
- Validate performance on your own page after embedding
Last fact-checked: . We re-verify every quarter.
Tutorial
See the Code Snippet Widget in action
A quick walkthrough of setting up and embedding this widget.
Tutorial video coming soon
Frequently asked questions
Can't find the answer you're looking for? Chat with our support team.
Contact SupportMake your code blocks look the part
Use twelve frames and available design controls to present code snippets on your site.
Free plan available forever