How to Add Clipboard Copy on an AMP Website

You have probably here searching for on how to implement a clipboard copy on AMP, since AMP is like a sandbox environment. not all javascript code are allowed to be implemented using javascript like the window.navigator.clipboard.writeCopy or document.execCommand(“copy”). You have also probably find out the quick hack Copy Button on AMP website, but it has disadvantage as you need to use iframe to apply a clipboard copy and what if you have tons of copy button on a single page, that a tons of iframes.

Frustrated by this, I scoured the AMP repositories, only to find a lot of discussions on this issue left unresolved or abandoned. I almost gave up on the possibility, but then I stumbled upon an example folder named amp-copy-action.amp.html. To my surprise, it contained all the functionalities of the clipboard function, even though it’s not featured on the official AMP website.

So, the short answer is, yes, it is possible to apply clipboard copy on AMP websites! Here’s how:

Tap Event, Copy-Success and Copy-Error

You’ll need these three events to achieve the copy clipboard function in AMP. The Tap event will trigger the copy command where you’d like to copy the text, while the copy-success and copy-error triggers after a clipboard command has executed.

Copying Content

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

You can retrieve these values using the Tap event.

Element Text and Input Values

To copy text from an element such as a div, assign an ID to that element and use the copy() function to get the text from it.

<div id="divTarget">This is a text</div>

<button on="tap:divTarget.copy()"></button>

This will work on innerText and value of an element.

Static Text

You can also assign a hard-coded text or a variable to the copy, using the AMP.copy function.

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

Success and Error Callbacks

After a copy has been made, you can perform callbacks using the copy-success and copy-error events. You’ll only be able to 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 something like:


<div id="divTarget">This is a text</div>

<div id="divSuccess">Wow!</div>

<div id="divError">Somethign went wrong</div>

<button on="tap:divTarget.copy();copy-error:divError.show();"></button>

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

<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>

EventResult Listener

The eventResult listener allows you to change the value of a class, text, or hidden attribute in real time when a 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 assigned true or false to show or hide elements. The class will assign text to the class value, while [text] will apply the result values to the innerText of the element. The only advantage of this is, you can only use a single listener, meaning only good for single use per page.

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

Amp