Copy button to a personalised voucher code

Table of Contents

Goal

User should be able to copy to clipboard a personalised voucher code after pressing a button next to the personalization token label.

Proposal

The campaign template could include JavaScript code to handle the logic for copying to clipboard. We can use the Clipboard API which adds to the Navigator interface the read-only clipboard property.

<div id="token">
    <span id="voucher" > Some voucher </textarea>
    <button onclick="copyToClipboard('{{ voucher.12345 }}')">Copy</button>
</div>

<script>
  function copyToClipboard(voucherCode) {
    navigator.clipboard.writeText().then(() => {
        // Alert the user that the action took place.
        // Nobody likes hidden stuff being done under the hood.
        alert("Copied to clipboard");
    });
  }
</script>

There is a need of processing the template each time there is a change related to a personalization: - if the customer adds a new personalization token (via drag and drop) to the template in the preview, then this needs to be re-rendered together with the copy button; - if the customer deletes a personalization token, the copy button must be deleted as well.