10. May 2021

Copy the gift code to the clipboard

Overriding arbitrary fields in campaign content, including influencing CSS class names, can be done in several ways in Mailocator.

With a simple toClipboard action, you can help the user copy a gift code directly to the clipboard with one click, without having to mark and copy the code using keyboard shortcuts or touch gestures.


Example: creating a button to copy the code to the clipboard

Place any element anywhere in the campaign design and add a class or id to it, for example:
<span class="code-to-copy">ABC123</span>

Of course, you can also use a merge tag element to auto-complete the code directly from your Mailocator stack:
<span class="code-to-copy">{{PROMO_CODE}}</span>

Add and type a button to copy the code:
<button>COPY CODE</button>

Add the onclick event to the button and add the following action:
<button onclick="'toClipboard:.code-to-copy')">COPY CODE</button>

The toClipboard action copies the content identified by the class parameter from the .code-to-copy element to the clipboard.


Microinteractions - notification of successful copy

How you notify the user of success after copying is up to you.
The following example shows how the user can easily confirm the copy by changing the text in the button:

<button onclick="'toClipboard:.code-to-copy'); this.innerHTML='COPIED!'" >COPY CODE</button>

When the button is pressed and this.innerHTML='COPIED!' is executed, "COPIED!" appears in the button instead of "COPY CODE!"



Mailnatives, s.r.o. with IČO 07891768 is registered at the Regional Court in Hradec Králové under the file number C 43368