How can I improve the aesthetics of my 'Copy to Clipboard' code?

Store Design
1

Hello everyone,

I hope someone can help (for free).

I’m trying to add a beautiful “Copy to Clipboard” effect on my website and I’m having some challenges.

Problem 1
The content being copied is different from the “Discount Code” I want to copy.

Problem 2

It doesn’t look good or is plain looking.

Here’s the code I have (this code is not mine) I think it was from W3Schools or another blog. (Sorry!)


 
  

# Your Copied Text:

  The content is included here.

The result of the code looks like this:

JackTorch_0-1654927060732.png
JackTorch_0-1654927060732.png359×310 3.92 KB

And here’s what I want it to look like or something close to this layout:

JackTorch_1-1654927092012.png
JackTorch_1-1654927092012.png504×150 4.71 KB

After clicking the button, it changes to this:

JackTorch_2-1654927135604.png

I tried using different CSS preview extensions but I can’t replicate this or improve the code I am currently using. Please help. Thank you.

2

Hi @JackTorch

See the below code, That may help you


    

COPY

SPRINGSALE2022

Kindly check and let me know.

Thanks!

1 Like
3

Thanks for helping out @PinkalShihora . Your code works but I find it difficult to add a box.

For reference, here’s the flow of the site where I got the inspiration from:

  1. You click on the button
  2. A different text gets copied to your clipboard (the real discount code)
    And the text in the box doesn’t get copied

I actually found the blog where I got the code in question. Here’s the link. I played with it and came up with the code below.
4

I found the function that I’m looking for. Maybe you or someone can help style it?

The function of the code below is exactly what I’m looking to do but without the style. It copies any text to the clipboard that isn’t visible with HTML.


Buy 1 Pair Get 1 Free Code: BOGO
5

Okay. Now you have any issue?

6

No issue but the button doesn’t show a confirmation/animation to show that the hidden text was copied successfully.

The only way for anyone to know if the code is copied is if they try to paste it.

7

which is the final code and where do i paste this?