How to make a copyable coupon code in Webflow
Other use-cases using Memberscript #8:
Memberscripts needed:
Tutorial:
Cloneable:
Why/Use Cases –
- Reduce friction for your users and improve your site’s UX by allowing users to easily copy a coupon code.
- Increase the likelihood of visitors using your coupon codes and converting.
Building a copy to clipboard button in Webflow
Great UX design means ensuring users face as little friction as possible when using your products or services – in this case, your website. That’s why if you’re offering users coupon codes, the best way to reduce friction is to allow users to copy that code as quickly and simply as possible.
This guide will show you how to quickly set up copyable coupon codes on your site.
To build a copy to clipboard button on your Webflow site, we’re going to use MemberScript #8 – Copy to Clipboard. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.
Setting it up
Once you’ve created and styled your coupon code element, select the actual wrapper of the content that you want users to click on and add the following attribute to it:
- ms-code-copy=”trigger”
Next, click on the code itself (the text you want copied) and add this attribute to it:
- ms-code-copy=”subject”
Now that that’s done, you’ll likely also want a way to signal to your users that they’ve clicked in the right place and that the coupon code has actually been copied.
For this, we recommend triggering an accessible style change using Webflow Interactions so there’s a visual difference between the clicked and non-clicked element.
Making it work
Now that you’ve got everything set up in Webflow, all you need to do is add the MemberScript #8 custom code to your page, before the closing body tag.
Conclusion
That’s everything, you can now go ahead and test the copy to clipboard functionality on your live site.
If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.
Our demo can help you create a copyable coupon code to ensure less friction for your customers.
Take me to Cloneable!
Written by
Ovidiu
Contributor