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
toClipboardaction, 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:
Of course, you can also use a merge tag element to auto-complete the code directly from your Mailocator stack:
Add and type a button to copy the code:
onclickevent to the button and add the following action:
<button onclick="mailocator.action.do('toClipboard:.code-to-copy')">COPY CODE</button>
toClipboardaction copies the content identified by the class parameter from the
.code-to-copyelement 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="mailocator.action.do('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!"