BackHelp Center

Implement the One-Click Coupon Copy Feature

Last Updated

02. December 2025

Reading Time

2 Min.

The Alpha Theme includes a custom JavaScript feature designed to boost conversions. It allows customers to copy a coupon code to their clipboard with a single click. When clicked, a “Copied!” tooltip appears instantly, confirming the action.

This feature is pre-configured in the demo (usually in the site header or promotional banner), but you can recreate it anywhere on your site by following the specific structure required by the theme’s code.

How It Works

The feature relies on two components working together:

  1. The Text Source: A text block containing the coupon code.
  2. The Trigger: A button (usually an icon) that triggers the copy action.

Step-by-Step Implementation

To make this work, you must assign specific Classes and IDs to your blocks so the custom script knows where to find the code and which button was clicked.

Step 1: Create the Coupon Text

First, add the text that contains your coupon code (e.g., “Get 10% off with SAVE10”).

  1. Add a Text (Adv) block.
  2. Highlight the actual coupon code (e.g., “SAVE10”) and make it Bold.

    Important: The script specifically looks for the bold text (the <strong> tag) to decide what to copy.
  3. Go to Advanced > Additional CSS class(es).
  4. Add the class: coupon-text-to-copy

Step 2: Create the Copy Button

Next, place a button next to your text. This acts as the trigger.

  1. Add a Kadence Button (Adv) block.
  2. Set it to contain only an icon (e.g., the “copy” or “clipboard” icon), or text if you prefer.
  3. Go to Advanced > HTML anchor.
  4. Enter the ID: copy-button

    Note: If you are creating a separate version for mobile devices (hidden on desktop), use the ID copy-button-mobile instead.

Automatic Feedback (The Tooltip)

You do not need to configure the “Copied!” success message manually. The theme’s custom code handles this automatically:

  • Visuals: A tooltip saying “Copied!” appears next to the button for 3 seconds after clicking.
  • Styling: The tooltip background color automatically uses Global Palette Color 4 (var(–global-palette4)) to match your theme’s branding.

Troubleshooting

If the button is not working, check the following:

  • Did you bold the coupon code? (The script looks for the strong tag).
  • Did you use the exact class name coupon-text-to-copy on the text block?
  • Did you use the exact ID copy-button in the HTML anchor field of the button?

From the same Category