Přejít k obsahu  Přejít k hlavnímu menu

Blog / Knowledge base

Updated: 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!"



RELATED

Mailocator Events

With events, you can intelligently manage the sequence of campaigns across the entire workflow scenario and display much more relevant and precisely targeted content in real time.

Notification

Set up the display of notifications on your site using Mailocator

Processing of the form (campaign) inserted into the page

How to send data to Mailocator from a form located on your site?

Instructions for your own design of the wheel of fortune

How to create a wheel of fortune with your own HTML and CSS code

How to make a Thank you page in Mailocator?

See how to bring your future customers back to your site in a better way as you complete the verification process.