How to Add Clipboard Copy on an AMP Website

You might be looking for a way to implement clipboard copying in AMP, as AMP is like a sandboxed environment where not all JavaScript code is allowed to be implemented using JavaScript like window.navigator.clipboard.writeCopy or document.execCommand("copy"). You might have also known how to quickly hack the Copy Button on AMP website, but this has a downside as you need to use iframe to implement clipboard copying and what if you have many copy buttons on one page, then many iframes.

Due to frustration with this, I explored the AMP repository, and found many discussions about this issue that remained unresolved or abandoned. I was almost giving up on the possibility, but then I stumbled upon a folder example named amp-copy-action.amp.html. Surprisingly, it contains all the clipboard functions, although not displayed on the official AMP website.

So, the short answer is, yes, implementing clipboard copying on AMP website can be done! Here's how:

Tap Event, Copy-Success, and Copy-Error

You need these three events to achieve clipboard copying function in AMP. The Tap event will trigger the copy command where you want to copy the text, while the copy-success and copy-error events are triggered after the clipboard command is executed.

Copying Content

You can copy content in two ways, either from text element, input value, or through static text (where variables can be assigned).

You can grab these values using the Tap event.

Text Element and Input Value

To copy text from elements like div, assign an ID to that element and use the copy() function to get the text from that element.

<div id="divTarget">This is a text</div>
<button on="tap:divTarget.copy()"></button>

This will work on the innerText and value of an element.

Static Text
You can also assign hard-coded text or variables to copy, using the AMP.copy function.

<button on="tap:AMP.copy(text='Your string or variables')">

Success and Error Callbacks

After the copy is made, you can perform callbacks using copy-success and copy-error event. You can only use show() and hide(), and you just need to call the ID name through the event function.

Here's an example:

<div id="divTarget">This is a text</div>
<div id="divSuccess">Wow!</div>
<button on="tap:divTarget.copy();copy-success:divSuccess.show();"></button> 

If an error occurs, you can also do things like:

<div id="divTarget">This is a text</div>
<div id="divSuccess">Wow!</div>
<div id="divError">Something went wrong</div>
<button on="tap:divTarget.copy();copy-error:divError.show();"></button> 

You can even run multiple hide() and show() commands to dynamically change the display:

<div id="divTarget">This is a text</div>
<div id="divSuccess">Wow!</div>
<button on="tap:divTarget.copy();copy-success:divTarget.hide(),divSuccess.show();"></button> 

Event Result Listener

The eventResult listener allows you to dynamically change the class, text, or hidden attributes in real-time when the copy has been executed, using the AMP.setState function.

<div id="divTarget" 
   [hidden]="false"
   [class]="(eventResult != 'error')?'success-class':'error-class'"
   [text]="(eventResult != 'error')?'Copied!':'Error'">
      This is a text
</div>
<div id="divSuccess"
   [hidden]="false"
   >
      Wow!
</div>
<button on="tap:divTarget.copy();copy-success:AMP.setState({eventResult:event.data.type})"></button> 

The [hidden] attribute can be set to true or false to show or hide the element. The class will assign text to the class value, while [text] will apply the result value to the inner text of the element. The only drawback of this is, you can only use one listener, meaning it's only suitable for single usage per page.

By following these steps, you can efficiently implement clipboard copying function on your AMP website. If you found this tutorial helpful, please leave a comment below and share it with others who might benefit. Happy coding!