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

Switching between integrations within the same project

If you need to route some campaigns to the CRM, others to an email tool, and store the results from surveys in an independent database, this solution is also easy to set up.

Automated values, adding values to hidden inputs

Merging of arbitrary fields and automatic filling of selected fields with a series of system values

Launch a campaign when you hover or touch a specific location on the page

Mark a location that triggers a campaign when the user hovers over it or touches it on a touch device

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