How to add Click to copy In Wix? Adding "Click to Copy" Functionality to Your Wix Website

In the era of user-friendly websites, providing a seamless experience to your visitors is paramount. One way to enhance user convenience on your Wix website is by implementing a "Click to Copy" feature. This functionality allows users to easily copy text or code snippets with just a simple click, eliminating the need for manual copying and pasting. In this blog post, we'll walk you through the steps to add a "Click to Copy" feature to your Wix website. See it here

Why "Click to Copy"?

The "Click to Copy" feature can be particularly useful in various scenarios:

1. Sharing Contact Information: Allow users to copy your email address or phone number with a single click, making it easy for them to get in touch.

2. Copying Discount Codes: If you run an e-commerce site, users can effortlessly copy promo codes during checkout.

3. Copying Addresses or Directions: Ideal for location-based businesses, users can copy your address for easy navigation.

How To Do It?

Before we start, you need:

1. A Textbox with your promocode as text

2. Button

Step 1: Turn On Developer Mode

To configure the buttons, we need to enable "Dev Mode" in order to write a few lines of simple code.

On the top left of the window hover over Dev mode.

Then click on Turn on Developer Mode

Step 2: Giving ID to elements

Step 3: Code

On the left side of where you renamed the id, you can see the code panel. This is where we are going to write the code.

The code is as follows, copy paste from below to test it out:

import wixWindow from 'wix-window'; $w('#copyButton').onClick(() => { wixWindow.copyToClipboard("PROMOCODE50") .then(() => { $w('#copyButton').label = "copied!" }) .catch((err) => { console.log("failure to copy!") }) }); See This code in action in this link