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="mailocator.action.do('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="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!"