Clipboard Snippet Copier

Clipboard Snippet Copier lets you share ready-to-use shortcodes, demo layouts, or any reusable code snippets with your visitors. Click a button and the snippet is copied straight to their clipboard. No manual selection, no copy/paste errors.

You decide whether the snippet stays hidden (fetched only when copied) or is displayed inline as a styled code block. Either mode is one click away for the visitor.

Why use it?

• Sell or showcase shortcodes — give buyers a “Copy Demo” button without exposing messy markup.
• Document your code — share PHP / JS / CSS examples on tutorial pages with a proper copy button.
• Reduce support tickets — eliminate “the shortcode didn’t work” issues caused by smart quotes, missing brackets, or whitespace mangling.
• Track engagement — built-in per-snippet copy counter shows what your audience actually uses.

Key features

• 📋 One-click copy to clipboard with success/failure tooltip.
• 🔒 Hidden mode — the snippet is stored in the admin and fetched via AJAX only when copied (never rendered in the HTML).
• 👁️ Inline mode — render the snippet visibly as a <pre><code> block with a copy button on top.
• 🧱 Gutenberg block with sidebar controls (snippet ID, label, inline toggle, language hint).
• 🔢 Shortcode for the Classic Editor, WPBakery, Elementor and any other builder.
• 🧮 Copy counter — sortable “Copies” column on the admin list, so you can see what’s popular.
• ⚙️ Settings page — default label, default CSS class, tooltip text, guest-access toggle.
• 📝 CodeMirror editor on the snippet edit screen — keeps your indentation and angle brackets intact.
• ⚡ Tiny footprint — no jQuery dependency on the frontend, no external libraries.
• 🌐 Translation-ready.

How it works

1. You add a snippet in Code Snippets → Add New and note its ID.
2. You drop the Clipboard Snippet block (or the [clipsnco_code_copy_btn] shortcode) onto any page.
3. When a visitor clicks the button, the snippet is fetched over AJAX and written to their clipboard — without ever appearing in the page source (unless you turned on inline mode).

Usage

Quick start (shortcode)

Where 123 is the ID of your snippet (visible in the Code Snippets admin list).

Shortcode attributes

• id (required, integer) — the snippet ID.
• label (optional, string) — button text. Defaults to the value set on the Settings page.
• class (optional, string) — extra CSS classes added to the button.
• inline (optional, “yes” / “no”) — when yes, the snippet is rendered as a <pre><code> block with a copy button on top. Default no.
• language (optional, string) — e.g. php, js, css. Adds a language-xxx class on the <code> element so syntax-highlighter libraries (Prism.js, highlight.js) can colourise it.

Examples:

• Hidden snippet, custom label: [clipsnco_code_copy_btn id="42" label="Copy shortcode"]
• Inline display with PHP highlighting: [clipsnco_code_copy_btn id="42" inline="yes" language="php"]
• Extra CSS class for theme styling: [clipsnco_code_copy_btn id="42" class="my-cta-btn"]

Gutenberg block

In the block editor, search for “Clipboard Snippet” and insert it. The sidebar lets you set:

• Snippet ID — the post ID of the snippet to copy.
• Button label — overrides the default label.
• Show code inline — toggle hidden vs inline display.
• Language hint — optional syntax-highlighter class.

The block is server-rendered, so you can switch between block and shortcode usage freely.

Alternative button markup

If your page builder won’t let you drop a <button> element, you can put any element on the page with the data attribute or the helper class — the plugin’s frontend script picks it up automatically:

…or, when even attributes aren’t allowed, use the class-only form:

Settings

Code Snippets → Settings lets you configure:

• Default button label
• Default CSS class applied to every button
• Tooltip text shown on copy success / failure
• Whether non-logged-in visitors are allowed to copy snippets

Copy counter

Every successful copy by a non-editor user bumps a _clipsnco_copy_count post meta value. The count is shown in the Copies column on the snippets admin list. Click the column header to sort by most-copied.

Styling

The button receives the class wcp-code-copy-btn plus anything you add via the shortcode/block class attribute. The inline-mode wrapper uses these classes (override them from your theme):

• .clipsnco-inline-wrap — outer container
• .clipsnco-inline-toolbar — top bar containing the copy button
• .clipsnco-pre — the <pre> element
• .clipsnco-code — the <code> element (also gets language-xxx when set)