let conv = [
{  "when": "1 days ago",  "who": "Dorian",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "2 days ago",  "who": "Carla",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "3 days ago",  "who": "Lucy",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "3 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "3 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "4 days ago",  "who": "Henriette",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "4 days ago",  "who": "Someone",  "from": "Australia",  "what": "The Reiki Master Course",  },{  "when": "4 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "5 days ago",  "who": "Alison",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "5 days ago",  "who": "Someone",  "from": "Australia",  "what": "The Reiki Master Course",  },{  "when": "5 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "6 days ago",  "who": "Lara",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "6 days ago",  "who": "Someone",  "from": "United Kingdom",  "what": "The Reiki Master Course",  },{  "when": "6 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "6 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "6 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "6 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "7 days ago",  "who": "Mary",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "7 days ago",  "who": "Someone",  "from": "United Kingdom",  "what": "The Reiki Master Course",  },{  "when": "7 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "9 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "9 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "9 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "9 days ago",  "who": "Lisa",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "9 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "9 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "9 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "9 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "9 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "10 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "10 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "12 days ago",  "who": "Alina",  "from": "United Kingdom",  "what": "The Reiki Master Course",  },{  "when": "12 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "12 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "13 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "13 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "14 days ago",  "who": "Sandy",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "14 days ago",  "who": "Someone",  "from": "United Kingdom",  "what": "The Reiki Master Course",  },{  "when": "14 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "15 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "15 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "15 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "16 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "16 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },{  "when": "16 days ago",  "who": "Someone",  "from": "United States",  "what": "The Reiki Master Course",  },
]
let convIndex = 0

let widget = `
<div id="conversion-widget" class="conversion-widget conversion-widget-bottom-left">
  <div id="conversion-widget-right">
    <p id="conversion-head"><span id="conversion-who">${conv[0].who}</span> from <span id="conversion-from">${conv[0].from}</span></p>
    <p>bought <span id="conversion-what">${conv[0].what}</span> recently</p>
    <p id="conversion-when">${conv[0].when}</p>
    <div class="conversion-brand">
      <svg height='100px' width='100px'  fill="#51c2d5" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 12.7 12.7" version="1.1" x="0px" y="0px"><g transform="translate(0,-284.29999)"><path style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#51c2d5;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.79374999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" d="m 6.33103,285.35022 a 0.26460982,0.26460982 0 0 0 -0.0269,0.004 0.26460982,0.26460982 0 0 0 -0.1369401,0.0646 0.26460982,0.26460982 0 0 0 -0.004,0.004 c -0.025099,0.018 -0.4999895,0.35821 -1.2226695,0.72088 -0.7414403,0.37179 -1.7067203,0.73609 -2.5600503,0.73609 h -0.26407 v 3.78892 c 0,1.93483 1.05281,3.2663 2.08411,4.08812 1.0313,0.82182 2.06654,1.16582 2.06654,1.16582 l 0.0822,0.0274 0.0837,-0.0274 c 0,0 1.03525,-0.344 2.06654,-1.16582 1.0313001,-0.82182 2.0841099,-2.15329 2.0841099,-4.08812 v -3.78892 h -0.26613 c -0.8533399,0 -1.8170601,-0.3643 -2.5585001,-0.73639 -0.7276298,-0.36515 -1.2117798,-0.71318 -1.2304199,-0.72657 a 0.26460982,0.26460982 0 0 0 -0.1405599,-0.0646 0.26460982,0.26460982 0 0 0 -0.004,0 0.26460982,0.26460982 0 0 0 -0.023799,-0.002 0.26460982,0.26460982 0 0 0 -0.004,0 0.26460982,0.26460982 0 0 0 -0.0253,0 z m 0.0186,2.64789 a 2.645833,2.6458285 0 0 1 2.6458297,2.64584 2.645833,2.6458285 0 0 1 -2.6458299,2.64583 2.645833,2.6458285 0 0 1 -2.6458399,-2.64583 2.645833,2.6458285 0 0 1 2.6458401,-2.64584 z m 1.4484901,1.32086 a 0.39691466,0.39691466 0 0 0 -0.2733699,0.11937 l -1.57045,1.57251 -0.7792802,-0.77928 a 0.39705767,0.39705767 0 1 0 -0.5606899,0.56224 l 1.0588501,1.05885 a 0.39691466,0.39691466 0 0 0 0.56018,0 l 1.8515599,-1.85363 a 0.39691466,0.39691466 0 0 0 -0.2868,-0.68006 z"></path></g></svg>
        <a href="https://userstrust.me?ref=widget" target="_blank" rel="nofollow,noopener">Verified By UsersTrust.me</a></div>
  </div>
</div>
`

let css = `
.conversion-widget {
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    display: flex;
    background-color: white;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(120, 120, 120, 0.3);
    color: #4a4a4a;
    padding: 10px;
    z-index: 99;
    flex-direction: row;
  }

.conversion-widget img {
  display: flex;
  height: 70px;
  width: 70px;
}

#conversion-widget-right {

  width: 100%;
}

.conversion-widget .conversion-brand a {
  display: flex;
    color: #51c2d5;
    text-decoration: none;
}
.conversion-widget .conversion-brand {
  display: flex;
  justify-content: flex-end;
  align-items: center;
    font-size: 12px;
    margin: 0 18px;
}
.conversion-widget .conversion-brand svg{
  display: flex;
  height: 25px;
  width: 25px;
}
  .conversion-widget.conversion-widget-bottom-right {
    position: fixed;
    bottom: 10px;
    right: 10px;
  }
  .conversion-widget.conversion-widget-bottom-left {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;

  }
  .conversion-widget #conversion-head span {

    font-size: 15px;
    font-weight: bold;
    color: #222222;
    text-align: left;
    padding: 0;
  }
  .conversion-widget p {
      margin: 2px 8px !important;
  }
  #conversion-when {
      color: rgb(187, 187, 187);
  }

  

@media only screen and (min-width: 700px) {
.conversion-widget.conversion-widget-bottom-left {
    position: fixed;
    top: auto;
    bottom: 10px;
    left: 10px;
    width: auto;
    }
}

.conversion-fade-in {
  animation: conversion-fadeIn ease 2s forwards;
  -webkit-animation: conversion-fadeIn ease 2s forwards;
  -moz-animation: conversion-fadeIn ease 2s forwards;
  -o-animation: conversion-fadeIn ease 2s forwards;
  -ms-animation: conversion-fadeIn ease 2s forwards;
  }
  @keyframes conversion-fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }
  
  @-moz-keyframes conversion-fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }
  
  @-webkit-keyframes conversion-fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }
  
  @-o-keyframes conversion-fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }
  
  @-ms-keyframes conversion-fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }

  .conversion-fade-out {
    animation: conversion-fadeOut ease 2s forwards;
    -webkit-animation: conversion-fadeOut ease 2s forwards;
    -moz-animation: conversion-fadeOut ease 2s forwards;
    -o-animation: conversion-fadeOut ease 2s forwards;
    -ms-animation: conversion-fadeOut ease 2s forwards;
    }
    @keyframes conversion-fadeOut {
      0% {opacity:1;}
      100% {opacity:0;}
    }
    
    @-moz-keyframes conversion-fadeOut {
      0% {opacity:1;}
      100% {opacity:0;}
    }
    
    @-webkit-keyframes conversion-fadeOut {
      0% {opacity:1;}
      100% {opacity:0;}
    }
    
    @-o-keyframes conversion-fadeOut {
      0% {opacity:1;}
      100% {opacity:0;}
    }
    
    @-ms-keyframes conversion-fadeOut {
    0% {opacity:1;}
    100% {opacity:0;}
    }
`

function triggerHide() {
  setTimeout(function(){
    
    document.getElementById("conversion-widget").classList.add("conversion-fade-out")
    document.getElementById("conversion-widget").classList.remove("conversion-fade-in")
    triggerNext()
  }, 6000);
}

function triggerNext() {
  setTimeout(function(){
    convIndex++
    if (convIndex >= conv.length) {
      convIndex =0
    }
    
    document.getElementById("conversion-who").innerHTML = `${conv[convIndex].who}`
    document.getElementById("conversion-from").innerHTML = `${conv[convIndex].from}`
    document.getElementById("conversion-when").innerHTML = conv[convIndex].when
    document.getElementById("conversion-what").innerHTML = conv[convIndex].what
    document.getElementById("conversion-widget").classList.add("conversion-fade-in")
    document.getElementById("conversion-widget").classList.remove("conversion-fade-out")
    
    
    triggerHide()
  }, 6000);
}

setTimeout(function(){
  let style = document.createElement('style');
  style.innerHTML = css
  var head = document.getElementsByTagName("head")[0]
  head.append(style)

  let body = document.getElementsByTagName("body")[0]
  body.insertAdjacentHTML('beforeend', widget);
  document.getElementById("conversion-widget").classList.add("conversion-fade-in")
  triggerHide()
}, 5000);