Make a simple coupon code banner with a “click to copy” button with Divi (Uses Divi Bars or Divi Theme Builder)
By Josh Stapleton (Read time: 10mins)Step by Step Menu
#1 Adding a Divi Code module
#2 Set module to align text & add initial banner code
Before adding anything to the CODE module, we need to set the module to align text to the centre.FREE LAYOUT DOWNLOAD
Download the Divi Coupon Code banner layout.
#3 Adding an icon to the button
FREE LAYOUT DOWNLOAD
Download the Divi Coupon Code banner layout.
FREE LAYOUT DOWNLOAD
Download the Divi Coupon Code banner layout.
#5 Adding Javascript
5.1 - Add the following Javascript code within Javascript codes goes here tags into your CODE module.
const copytarget = document.getElementById("code");
copytarget.addEventListener("click", copyToClipboard);
function copyToClipboard() {
const temp = document.body.appendChild(document.createElement('textarea'));
temp.value = copytarget.textContent;
temp.select();
document.execCommand("copy");
temp.remove();
}
That's all the Javascript needed to perform a copy.
5.2 - Now to 'show' and 'hide' our spans accordingly, we need to add the following to the end of the “copyToClipboard” function within the Javascript code.
The first two lines of this last bit of code simply set the display style of the code to “none” and the alert to “unset”. Then we add a Timeout function that after three seconds switches the code back to display “unset” and the alert to display “none”. You can edit the timing of the coupon code reappearing by editing the 3000 number in the code.
document.getElementById("code").style.display = "none";
document.getElementById("alert").style.display = "unset";
setTimeout(function(){
document.getElementById("code").style.display = "unset";
document.getElementById("alert").style.display = "none";
},3000);
const copytarget = document.getElementById("code");
copytarget.addEventListener("click", copyToClipboard);
function copyToClipboard() {
const temp = document.body.appendChild(document.createElement('textarea'));
temp.value = copytarget.textContent;
temp.select();
document.execCommand("copy");
temp.remove();
document.getElementById("code").style.display = "none";
document.getElementById("alert").style.display = "unset";
setTimeout(function(){
document.getElementById("code").style.display = "unset";
document.getElementById("alert").style.display = "none";
}, 3000);
}
Tutorial Summary
FINAL Layout Demo: Coupon Code Banner with 'Click to Copy' button
Would you like our FREE Divi Coupon Code Banner Layout?
Built by professional web design experts, our FREE layout would look great on your site!Fancy trying another tutorial?
What Meta’s fact-checking exit means for marketing
Meta recently announced that they will be ditching third-party fact-checking and replacing it with...
Why your website speed is slower than it should be (and how to fix it)
Ever wondered why your website feels like it’s running on dial-up while your competitors load at...
Mobile-first SEO: Why is it important?
It’s difficult to imagine a world without mobile phones. Mobiles have transformed almost every...