Copy Coupon Code

This interaction allows you to copy text to the clipboard when a user clicks on a text element.

How it works

Trigger: Click  - The interaction starts when the user clicks the text.

Action:

    • Get text from element - Target is interaction trigger. Specify Reference Id as contentCopied     
    • Copy to clipboard - Use the referenced value

How to use

Select a text element to apply the interaction to, then import the interaction.

Interactions used


Code Block

Copy the whole markup below and paste it into a new post in your WordPress block editor.

<!-- wp:columns {"style":{"border":{"width":"0px","style":"none","radius":"30px"},"color":{"gradient":"linear-gradient(26deg,rgb(11,13,75) 0%,rgb(0,80,240) 100%)"},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}}} -->
<div class="wp-block-columns has-background" style="border-style:none;border-width:0px;border-radius:30px;background:linear-gradient(26deg,rgb(11,13,75) 0%,rgb(0,80,240) 100%);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:column {"style":{"border":{"radius":"0px"},"spacing":{"blockGap":"0","padding":{"top":"0","bottom":"0","left":"0","right":"0"}}}} -->
<div class="wp-block-column" style="border-radius:0px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ffffff"},"elements":{"link":{"color":{"text":"#ffffff"}}},"typography":{"letterSpacing":"1px","fontSize":"30px","fontStyle":"normal","fontWeight":"600","lineHeight":"1.3"},"spacing":{"margin":{"top":"var:preset|spacing|20"}}}} -->
<p class="has-text-align-center has-text-color has-link-color" style="color:#ffffff;margin-top:var(--wp--preset--spacing--20);font-size:30px;font-style:normal;font-weight:600;letter-spacing:1px;line-height:1.3">Exclusive Coupon</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","className":"is-style-default","style":{"color":{"text":"#ffffff","background":"#1b1b1b"},"elements":{"link":{"color":{"text":"#ffffff"}}},"typography":{"letterSpacing":"1px","fontSize":"50px","fontStyle":"normal","fontWeight":"600"},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"0","right":"0"},"margin":{"bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30","top":"var:preset|spacing|30"}},"border":{"radius":"10px"}}} -->
<p class="has-text-align-center is-style-default has-text-color has-background has-link-color" style="border-radius:10px;color:#ffffff;background-color:#1b1b1b;margin-top:var(--wp--preset--spacing--30);margin-right:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);margin-left:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--20);padding-right:0;padding-bottom:var(--wp--preset--spacing--20);padding-left:0;font-size:50px;font-style:normal;font-weight:600;letter-spacing:1px">E1F4GP71A01</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#ffffff"},"elements":{"link":{"color":{"text":"#ffffff"}}},"typography":{"letterSpacing":"1px","fontSize":"25px","fontStyle":"normal","fontWeight":"600"},"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}}}} -->
<p class="has-text-align-center has-text-color has-link-color" style="color:#ffffff;margin-top:0;margin-bottom:var(--wp--preset--spacing--20);font-size:25px;font-style:normal;font-weight:600;letter-spacing:1px">Get <span style="color: #f00069;" class="stk-highlight">40% off</span> on all our products!</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Interaction Code

Copy the entire text below, and import it as a new interaction. See How to Import Interactions on how to do this.

{
    "type": "click",
    "timelines": [
        {
            "loop": false,
            "onceOnly": false,
            "alternate": false,
            "reset": false,
            "reverse": false,
            "actions": [
                {
                    "type": "textFromElement",
                    "target": {
                        "type": "trigger",
                        "value": "",
                        "blockName": "",
                        "options": ""
                    },
                    "timing": {
                        "isStartingState": false,
                        "start": 0,
                        "duration": 0.5,
                        "easing": "outCirc",
                        "customEasing": ""
                    },
                    "value": {
                        "id": "contentCopied"
                    }
                },
                {
                    "type": "copyToClipboard",
                    "key": "action_c8d011272e",
                    "target": {
                        "type": "trigger",
                        "value": "",
                        "blockName": "",
                        "options": ""
                    },
                    "timing": {
                        "isStartingState": false,
                        "start": 0,
                        "duration": 0.5,
                        "easing": "outCirc",
                        "customEasing": ""
                    },
                    "value": {
                        "text": "data.contentCopied"
                    }
                }
            ]
        }
    ],
    "options": {
        "preventDefault": true
    }
}