A simple html template for a floating corner popup, like the one you see on SmashNotes.com

Zubovsky-pop

<link href="https://rsms.me/inter/inter.css" rel="stylesheet" type="text/css">

<style>
  #zubovsky-pop-container{
    -webkit-font-smoothing: subpixel-antialiased;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgb(14, 27, 46);
    background-image: none;
    background-origin: padding-box;
    background-size: auto;
    border-bottom-color: rgba(0, 0, 0, 0);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgba(0, 0, 0, 0);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgba(0, 0, 0, 0);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgba(0, 0, 0, 0);
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-top-style: solid;
    border-top-width: 1px;
    bottom: 20px;
    box-shadow: rgba(29, 30, 56, 0.2) 0px 6px 12px 0px;
    box-sizing: border-box;
    color: rgb(210, 210, 210);
    display: block;
    font-family: Inter, "SF Pro Display", Lato, "Source Sans Pro", Merriweather, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    height: auto;
    left: 20px;
    line-height: 26px;
    margin-bottom: 32px;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 22px;
    padding-left: 22px;
    padding-right: 22px;
    padding-top: 22px;
    position: fixed;
    text-rendering: optimizeLegibility;
    width: 500px;
    z-index: 800;
  }
  #zubovsky-pop-announcement-title{
    -webkit-font-smoothing: subpixel-antialiased;
    color: #edc835;
    display: block;
    font-family: Inter, "SF Pro Display", Lato, "Source Sans Pro", Merriweather, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 28px;
    font-weight: 500;
    height: 74px;
    line-height: 38px;
    text-rendering: optimizeLegibility;
    margin-top:22px;
    margin-bottom:22px;
  }
  #zubovsky-pop-announcement-message{
    display: block;
    margin: 1em 0;
    font-weight: 200;
    color: rgb(210, 210, 210);
    font-size: 16px;
    font-weight: 200;
    line-height: 27px;
    text-rendering: optimizeLegibility;
  }
  #zubovsky-pop-announcement-cta{
    -webkit-font-smoothing: subpixel-antialiased;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #edc835;
    background-image: none;
    background-origin: padding-box;
    background-size: auto;
    border-bottom-color: rgba(0, 0, 0, 0);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgba(0, 0, 0, 0);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgba(0, 0, 0, 0);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgba(0, 0, 0, 0);
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: border-box;
    color: rgb(14, 27, 46);
    cursor: pointer;
    display: inline;
    font-family: Inter, "SF Pro Display", Lato, "Source Sans Pro", Merriweather, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-variant: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-position: normal;
    font-weight: normal;
    height: auto;
    line-height: 27px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding-bottom: 6px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 6px;
    text-align: center;
    text-decoration: none;
    text-rendering: optimizeLegibility;
    transform: none;
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-property: background-color;
    transition-timing-function: ease-in-out;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
  }
  #zubovsky-pop-announcement-close-link{
    -webkit-font-smoothing: subpixel-antialiased;
    color: rgb(204, 204, 204);
    cursor: auto;
    display: block;
    font-family: Inter, "SF Pro Display", Lato, "Source Sans Pro", Merriweather, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    height: 45.59375px;
    line-height: 27px;
    position: absolute;
    right: 16px;
    text-decoration: none;
    text-rendering: optimizeLegibility;
    top: 0px;
    transition-delay: 0s;
    transition-duration: 0.1s;
    transition-property: all;
    transition-timing-function: ease-in-out;
    width: 36px;
  }
  #zubovsky-pop-announcement-dismiss-symbol{
    display: block;
    margin: 0.6rem 0 0 0;
    padding: 6px 9px 4px 9px;
    border-radius: 2px;
    font-size: 0.8em;
    opacity: 0.6;
    text-align: center;

  }

</style>

<div id='zubovsky-pop-container'>
  <div><img src='https://assets.website-files.com/5bca3ed71cccae868724aade/5bca54c36e7273a38a9ea9fd_kz-face-1.jpeg' width="50px;" height="50px;" style='border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;border-top-left-radius: 50px;border-top-right-radius: 50px;'/></div>
  <div>
    <h1 id='zubovsky-pop-announcement-title'>Insert your title here<br>Then add some</h1>
    <p id='zubovsky-pop-announcement-message'>Explain what you do, what you want to be, who you would like to become. Inspire, educate, innovate, collaborate. Get them to listen.</p>

    <a href='https://clipgain.io?utm_source=smashnotes.com&utm_medium=web&utm_campaign=floating-pop-button' target="_blank" title='Explain what this button does for SEO'
    onMouseOver="this.style.background='#f5e293'"
    onMouseOut="this.style.background='#edc835'"
    id='zubovsky-pop-announcement-cta'>Try This Thing Today -></a>
  </div>
  <a id='zubovsky-pop-announcement-close-link' title='Close Announcement' href='#' data-remote onClick="dismissZubovskyPop(event);"
  onMouseOver="this.style.background='rgba(191,185,185,0.48)';this.style.color='#ffffff';this.style.cursor='pointer'"
  onMouseOut="this.style.background='transparent'"><div class='dismiss' id='zubovsky-pop-announcement-dismiss-symbol'>X</div></a>
</div>

<script>
  var zubovskyPopIterationCount = 1;
  var zubovskyPopCookieName = "dismissZubovskyPop_"+zubovskyPopIterationCount;
  dismissZubovskyPop = function(event){event.preventDefault();event.stopPropagation(); document.cookie = zubovskyPopCookieName+"=true"; document.getElementById("zubovsky-pop-container").remove()}
  checkCookieAndClearPop = function(){
    if (document.cookie.indexOf(zubovskyPopCookieName+'=') >= 0){
      document.getElementById("zubovsky-pop-container").remove()
    }
  }();
</script>