Create popup widget

Create popup widget

Create popup widget

Hello everyone, on this occasion I will share a coupon pop up widget  site with html, css and javascript.

This widget was regulated by Irfan Shah  via email that was sent to us, in fact he already sent an email to me a month ago but I just made it today.

For those of you who want to regulate tutorials or widgets, please comment on one of my articles or forum pages and email, if it's good or interesting I will make it in the future. and you have to be patient, you can't be fast because I also have other work outside of blogging. If you want it fast, you can order template editing / redesign services.

This widget is perfect for those of you who are planning to create an online store template that has a promo feature with a coupon code to attract potential buyers.

besides that this widget also has 2 different views when accessed on a wide screen such as a PC and a small screen on a mobile, I adjusted this view like the original widget up to 80%.

because this is a coupon widget so it doesn't use a button to bring up the pop up, so every time a visitor visits your site for the first time, a pop up will appear after 3 seconds or you can also set how many seconds the pop up will appear.

This widget also uses session Storage, which means that if the pop up is closed it will not reappear even if you change pages, unless the visitor closes the browser and reopens it or opens it in a new tab, of course with this it will not be too annoying.

for the demo you can see through the button below, ok for those of you who want to make it, let's see how below.

DEMO

Coupon Pop Up Widget

please go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin>

/* widget coupon by Blogger Store */
    .bs-Coupon-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:#cbe1eb;transition:all 0.3s ease;z-index:9999999;opacity:0;display:none}
    .bs-Coupon-wrap.aktif{opacity:1;display:block}
    .bs-Coupon-wrap .bs-Coupon-pop{position:relative;top:50%;left:50%;padding:30px;display:flex;background:#fff;flex-direction:column;align-items:center;max-width:60%;width:600px;border-radius:5px;transform: translate(-50% , -50%) scale(0.97);transition:all 0.3s ease}
    .bs-Coupon-close{position:absolute;top:5px;right:-10px;width:50px;height:50px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' fill='%23878787'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:30px}
    .bs-Coupon-start{position:relative;width:100%;height:auto;padding:10px}
    .bs-Coupon-top span{margin:20px 0;font-size:12px;color:#030303;display:block}
    .bs-Coupon-top:before{content:'KODE';display:flex;padding:5px;font-size:12px;width:50px;height:25px;background-color:transparent;color:#ff8f6d;justify-content:center;align-items:center;border-radius:3px;top:10px;left:20px;border:1px #ff8f6d solid}
    .bs-Coupon-bg{position:relative;display:block;background:#d5e7ef;width:100%;height:auto;padding:10px;border-radius:3px}
    .bs-Coupon-copy{display:flex;margin:12px 0;height:45px;width:100%;border-radius:4px;padding:0 5px;align-items:center}
    .bs-Coupon-copy input{width:100%;height:100%;border:none;outline:0;font-size:12px;font-weight:600;padding:10px;}
    .bs-Coupon-copy .bs-Coupon-btn{width:50%;height:100%;font-size:12px;font-weight:600;padding:15px 10px;color:#fff;text-align:center;background:#fff;color:#f84d5d;border-left:2px dotted #ddd;outline:0;border-top:none;border-right:none;border-bottom:none}
    .bs-Coupon-go{display:flex;margin-left:30px;height:45px;width:300px;line-height:15px;border-radius:3px;font-size:10px;font-weight:600;padding:15px;align-items:center;border:none;text-align:center;background:#f84d5d;color:#fff;text-decoration:none} 
    .bs-Coupon-text{font-size:15px;font-weight:400;color:#727c7f;margin:5px 5px 8px 5px}
    .bs-Coupon-accordion{position:relative;display:flex;padding:0 5px;background:transparent;top:25px;text-decoration:none;font-size:12px;font-weight:400;color:#f84d5d}
    .bs-Coupon-accordion:before{content:attr(aria-label);position:absolute;font-size:12px;font-weight:400;color:#030303;margin-left:120px;border-left:1px #727c7f solid;padding-left:10px}
    .bs-Coupon-t2{position:relative;display:none;padding:5px;margin-top:30px;font-size:12px;font-weight:400;color:#030303}
    .bs-Coupon-end span{position:relative;display:flex;font-size:14px;font-weight:600;margin:40px auto 40px -5px;border-top:1px #ddd solid;padding:20px 10px}
    .bs-Coupon-end p{position:relative;display:flex;font-size:12px;margin:-50px 5px auto;color:#727c7f} 
    @media screen and (max-width:900px){.bs-Coupon-wrap .bs-Coupon-pop{max-width:100%}}
    @media screen and (max-width:450px){
    .bs-Coupon-wrap .bs-Coupon-pop{width:100%;max-width:100%;height:100%;overflow-y:auto;overflow-x:hidden}
    .bs-Coupon-wrap,.bs-Coupon-bg{background:#fff}
    .bs-Coupon-go{position:absolute;margin:70px 75px -150px;width:120px;text-align:center}
    .bs-Coupon-accordion,.bs-Coupon-accordion:before{font-size:10px}
    .bs-Coupon-accordion{margin-top:25px}
    .bs-Coupon-copy input {border:1px #ddd solid;border-right:none;border-radius:3px}
    .bs-Coupon-copy .bs-Coupon-btn{border:1px #ddd solid;border-left: 2px dotted #ddd;border-radius:3px;margin-top:1px}}

and put this html above the <footer code to make it more neat, actually it's free as long as it's still in the body tag.

<div class='bs-Coupon-wrap'>
    <div class='bs-Coupon-pop'>
    <div class='bs-Coupon-close'>
    </div>
    <div class='bs-Coupon-start'>
    <div class='bs-Coupon-top'>
    <span><b>Rp 100k Cashback</b> Use this discount coupon to pay monthly bills %month% %year%</span></div>
    <div class='bs-Coupon-bg'>
    <div class='bs-Coupon-copy'>
    <input id='bs-Coupon-input' readonly='readonly' type='text' value='Blogger Store PRO'/>
    <button class='bs-Coupon-btn' onclick='bsCopyCode()'>SALIN</button>   
    <a class='bs-Coupon-go' href='https://www.blogger-store.com' target='_blank'>AYO KUNJUNGI TOKO</a>
    </div>
    <div class='bs-Coupon-text'>Use this code at checkout page</div>
    </div>
    <a aria-label='Expires in 4 days' class='bs-Coupon-accordion' href='javascript:'>Condition &amp; Provision</a>
    <div class='bs-Coupon-t2'>
    DEscription Lorem ipsum dolor sit amet, consectetur adipisicing elite, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    </div>
    <div class='bs-Coupon-end'>
    <span>DON'T MISS AN OPPORTUNITY TO SAVE!</span>
    <p>Your Pragraph about offer Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
    </div>
    </div>
    </div>  
    </div>

and finally copy the javascript below and place it above the code </body> or <!--</body>--></body> if you have don't forget to click save.

<script>
    //<![CDATA[
    /*
    * Blogger Store Widget Coupon
    * Copyright (c) 2021 https://www.blogger-store.com
    * Javascript Pure
    */
    var waktu = 3000; // waktu munculkan pop up 3 detik
    var copybtn = document.querySelector('.bs-Coupon-btn'),couponText='SALIN';function bsCopyCode(){
    document.querySelector('#bs-Coupon-input').select(),document.execCommand('copy'),copybtn.textContent='TERSALIN',setTimeout(function(){
    copybtn.innerHTML=couponText},3500)} 
    var i,acc = document.getElementsByClassName('bs-Coupon-accordion');for(i=0;i<acc.length;i++)acc[i].addEventListener('click',function(){
    this.classList.toggle('active');var e=this.nextElementSibling;'block'===e.style.display?e.style.display='none':e.style.display='block'});
    document.querySelector('.bs-Coupon-close').addEventListener('click',function(){
    document.querySelector('.bs-Coupon-wrap').classList.remove('aktif')});
    var welcomeSession=sessionStorage.getItem('welcomeSession');null===welcomeSession&&document.addEventListener('DOMContentLoaded',function(){
    setTimeout(function(){
    document.querySelector('.bs-Coupon-wrap').classList.add('aktif'),welcomeSession=sessionStorage.setItem('welcomeSession',!0)},waktu)});
    //]]> 
    </script>

ok so that 's the pop up coupon widget like Tokopedia that I can share this time, hopefully it's useful and thank you for visiting.

Thanks for reading: Create popup widget, Sorry, my English is bad:)