@reviewboostr/boostrjs/dist/boostr.js

The ReviewBoostr widget for websites.

!function(){"use strict";var n='@charset "UTF-8";\n:root {\n  --bs-blue: #0d6efd;\n  --bs-indigo: #6610f2;\n  --bs-purple: #6f42c1;\n  --bs-pink: #d63384;\n  --bs-red: #dc3545;\n  --bs-orange: #fd7e14;\n  --bs-yellow: #ffc107;\n  --bs-green: #198754;\n  --bs-teal: #20c997;\n  --bs-cyan: #0dcaf0;\n  --bs-white: #fff;\n  --bs-gray: #6c757d;\n  --bs-gray-dark: #343a40;\n  --bs-primary: #0d6efd;\n  --bs-secondary: #6c757d;\n  --bs-success: #198754;\n  --bs-info: #0dcaf0;\n  --bs-warning: #ffc107;\n  --bs-danger: #dc3545;\n  --bs-light: #f8f9fa;\n  --bs-dark: #212529;\n  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); }\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box; }\n\n@media (prefers-reduced-motion: no-preference) {\n  :root {\n    scroll-behavior: smooth; } }\n\nbody {\n  margin: 0;\n  font-family: var(--bs-font-sans-serif);\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }\n\nhr {\n  margin: 1rem 0;\n  color: inherit;\n  background-color: currentColor;\n  border: 0;\n  opacity: 0.25; }\n\nhr:not([size]) {\n  height: 1px; }\n\nh1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  font-weight: 500;\n  line-height: 1.2; }\n\nh1, .h1 {\n  font-size: calc(1.375rem + 1.5vw); }\n  @media (min-width: 1200px) {\n    h1, .h1 {\n      font-size: 2.5rem; } }\n\nh2, .h2 {\n  font-size: calc(1.325rem + 0.9vw); }\n  @media (min-width: 1200px) {\n    h2, .h2 {\n      font-size: 2rem; } }\n\nh3, .h3 {\n  font-size: calc(1.3rem + 0.6vw); }\n  @media (min-width: 1200px) {\n    h3, .h3 {\n      font-size: 1.75rem; } }\n\nh4, .h4 {\n  font-size: calc(1.275rem + 0.3vw); }\n  @media (min-width: 1200px) {\n    h4, .h4 {\n      font-size: 1.5rem; } }\n\nh5, .h5 {\n  font-size: 1.25rem; }\n\nh6, .h6 {\n  font-size: 1rem; }\n\np {\n  margin-top: 0;\n  margin-bottom: 1rem; }\n\nabbr[title],\nabbr[data-bs-original-title] {\n  text-decoration: underline dotted;\n  cursor: help;\n  text-decoration-skip-ink: none; }\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit; }\n\nol,\nul {\n  padding-left: 2rem; }\n\nol,\nul,\ndl {\n  margin-top: 0;\n  margin-bottom: 1rem; }\n\nol ol,\nul ul,\nol ul,\nul ol {\n  margin-bottom: 0; }\n\ndt {\n  font-weight: 700; }\n\ndd {\n  margin-bottom: .5rem;\n  margin-left: 0; }\n\nblockquote {\n  margin: 0 0 1rem; }\n\nb,\nstrong {\n  font-weight: bolder; }\n\nsmall, .small {\n  font-size: 0.875em; }\n\nmark, .mark {\n  padding: 0.2em;\n  background-color: #fcf8e3; }\n\nsub,\nsup {\n  position: relative;\n  font-size: 0.75em;\n  line-height: 0;\n  vertical-align: baseline; }\n\nsub {\n  bottom: -.25em; }\n\nsup {\n  top: -.5em; }\n\na {\n  color: #0d6efd;\n  text-decoration: underline; }\n  a:hover {\n    color: #0a58ca; }\n\na:not([href]):not([class]), a:not([href]):not([class]):hover {\n  color: inherit;\n  text-decoration: none; }\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: var(--bs-font-monospace);\n  font-size: 1em;\n  direction: ltr /* rtl:ignore */;\n  unicode-bidi: bidi-override; }\n\npre {\n  display: block;\n  margin-top: 0;\n  margin-bottom: 1rem;\n  overflow: auto;\n  font-size: 0.875em; }\n  pre code {\n    font-size: inherit;\n    color: inherit;\n    word-break: normal; }\n\ncode {\n  font-size: 0.875em;\n  color: #d63384;\n  word-wrap: break-word; }\n  a > code {\n    color: inherit; }\n\nkbd {\n  padding: 0.2rem 0.4rem;\n  font-size: 0.875em;\n  color: #fff;\n  background-color: #212529;\n  border-radius: 0.2rem; }\n  kbd kbd {\n    padding: 0;\n    font-size: 1em;\n    font-weight: 700; }\n\nfigure {\n  margin: 0 0 1rem; }\n\nimg,\nsvg {\n  vertical-align: middle; }\n\ntable {\n  caption-side: bottom;\n  border-collapse: collapse; }\n\ncaption {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: #6c757d;\n  text-align: left; }\n\nth {\n  text-align: inherit;\n  text-align: -webkit-match-parent; }\n\nthead,\ntbody,\ntfoot,\ntr,\ntd,\nth {\n  border-color: inherit;\n  border-style: solid;\n  border-width: 0; }\n\nlabel {\n  display: inline-block; }\n\nbutton {\n  border-radius: 0; }\n\nbutton:focus:not(:focus-visible) {\n  outline: 0; }\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit; }\n\nbutton,\nselect {\n  text-transform: none; }\n\n[role="button"] {\n  cursor: pointer; }\n\nselect {\n  word-wrap: normal; }\n  select:disabled {\n    opacity: 1; }\n\n[list]::-webkit-calendar-picker-indicator {\n  display: none; }\n\nbutton,\n[type="button"],\n[type="reset"],\n[type="submit"] {\n  -webkit-appearance: button; }\n  button:not(:disabled),\n  [type="button"]:not(:disabled),\n  [type="reset"]:not(:disabled),\n  [type="submit"]:not(:disabled) {\n    cursor: pointer; }\n\n::-moz-focus-inner {\n  padding: 0;\n  border-style: none; }\n\ntextarea {\n  resize: vertical; }\n\nfieldset {\n  min-width: 0;\n  padding: 0;\n  margin: 0;\n  border: 0; }\n\nlegend {\n  float: left;\n  width: 100%;\n  padding: 0;\n  margin-bottom: 0.5rem;\n  font-size: calc(1.275rem + 0.3vw);\n  line-height: inherit; }\n  @media (min-width: 1200px) {\n    legend {\n      font-size: 1.5rem; } }\n  legend + * {\n    clear: left; }\n\n::-webkit-datetime-edit-fields-wrapper,\n::-webkit-datetime-edit-text,\n::-webkit-datetime-edit-minute,\n::-webkit-datetime-edit-hour-field,\n::-webkit-datetime-edit-day-field,\n::-webkit-datetime-edit-month-field,\n::-webkit-datetime-edit-year-field {\n  padding: 0; }\n\n::-webkit-inner-spin-button {\n  height: auto; }\n\n[type="search"] {\n  outline-offset: -2px;\n  -webkit-appearance: textfield; }\n\n/* rtl:raw:\n[type="tel"],\n[type="url"],\n[type="email"],\n[type="number"] {\n  direction: ltr;\n}\n*/\n::-webkit-search-decoration {\n  -webkit-appearance: none; }\n\n::-webkit-color-swatch-wrapper {\n  padding: 0; }\n\n::file-selector-button {\n  font: inherit; }\n\n::-webkit-file-upload-button {\n  font: inherit;\n  -webkit-appearance: button; }\n\noutput {\n  display: inline-block; }\n\niframe {\n  border: 0; }\n\nsummary {\n  display: list-item;\n  cursor: pointer; }\n\nprogress {\n  vertical-align: baseline; }\n\n[hidden] {\n  display: none !important; }\n\n.lead {\n  font-size: 1.25rem;\n  font-weight: 300; }\n\n.display-1 {\n  font-size: calc(1.625rem + 4.5vw);\n  font-weight: 300;\n  line-height: 1.2; }\n  @media (min-width: 1200px) {\n    .display-1 {\n      font-size: 5rem; } }\n\n.display-2 {\n  font-size: calc(1.575rem + 3.9vw);\n  font-weight: 300;\n  line-height: 1.2; }\n  @media (min-width: 1200px) {\n    .display-2 {\n      font-size: 4.5rem; } }\n\n.display-3 {\n  font-size: calc(1.525rem + 3.3vw);\n  font-weight: 300;\n  line-height: 1.2; }\n  @media (min-width: 1200px) {\n    .display-3 {\n      font-size: 4rem; } }\n\n.display-4 {\n  font-size: calc(1.475rem + 2.7vw);\n  font-weight: 300;\n  line-height: 1.2; }\n  @media (min-width: 1200px) {\n    .display-4 {\n      font-size: 3.5rem; } }\n\n.display-5 {\n  font-size: calc(1.425rem + 2.1vw);\n  font-weight: 300;\n  line-height: 1.2; }\n  @media (min-width: 1200px) {\n    .display-5 {\n      font-size: 3rem; } }\n\n.display-6 {\n  font-size: calc(1.375rem + 1.5vw);\n  font-weight: 300;\n  line-height: 1.2; }\n  @media (min-width: 1200px) {\n    .display-6 {\n      font-size: 2.5rem; } }\n\n.list-unstyled {\n  padding-left: 0;\n  list-style: none; }\n\n.list-inline {\n  padding-left: 0;\n  list-style: none; }\n\n.list-inline-item {\n  display: inline-block; }\n  .list-inline-item:not(:last-child) {\n    margin-right: 0.5rem; }\n\n.initialism {\n  font-size: 0.875em;\n  text-transform: uppercase; }\n\n.blockquote {\n  margin-bottom: 1rem;\n  font-size: 1.25rem; }\n  .blockquote > :last-child {\n    margin-bottom: 0; }\n\n.blockquote-footer {\n  margin-top: -1rem;\n  margin-bottom: 1rem;\n  font-size: 0.875em;\n  color: #6c757d; }\n  .blockquote-footer::before {\n    content: "\\2014\\00A0"; }\n\n:host {\n  font-size: 1.2rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #161b22;\n  display: block;\n  position: fixed;\n  box-sizing: border-box;\n  right: 0;\n  bottom: 0;\n  z-index: 100;\n  width: 100%;\n  max-height: 100%;\n  padding: 10px;\n  margin: 0; }\n\n:host(.closed) {\n  display: none; }\n\n@media screen and (min-width: 430px) {\n  :host {\n    width: 420px; } }\n\n.content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  padding: 20px;\n  overflow: hidden;\n  background: white;\n  border-radius: 5px;\n  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n  box-sizing: border-box; }\n\n.close {\n  position: absolute;\n  z-index: 1;\n  top: -4px;\n  right: 5px;\n  color: gray;\n  padding: 0.5em;\n  font-size: 1.3rem;\n  cursor: pointer; }\n\n.btn {\n  color: white;\n  padding: 7px 14px;\n  background-color: seagreen;\n  border-radius: 3px;\n  text-decoration: none;\n  line-height: 2; }\n\n.btn:hover {\n  color: white;\n  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; }\n\n.text-center {\n  text-align: center; }\n\n.mb-0 {\n  margin-bottom: 0; }\n\n.mb-auto {\n  margin-bottom: auto; }\n\n.mt-auto {\n  margin-top: auto; }\n\n.rating {\n  display: flex;\n  flex-direction: row;\n  flex-flow: row-reverse wrap;\n  justify-content: space-around;\n  border: none;\n  padding: 0;\n  margin: 0; }\n\n.rating:not(:checked) > input {\n  position: absolute;\n  top: -9999px;\n  clip: rect(0, 0, 0, 0); }\n\n.rating:not(:checked) > label {\n  width: 0.9em;\n  overflow: hidden;\n  white-space: nowrap;\n  cursor: pointer;\n  font-size: 3.8rem;\n  line-height: 1;\n  color: #ddd; }\n\n@media screen and (min-width: 430px) {\n  .rating:not(:checked) > label {\n    width: 0.9em;\n    font-size: 4.2rem; } }\n\n.rating:not(:checked) > label:before {\n  content: "★"; }\n\n.rating > input:checked ~ label {\n  color: #f70; }\n\n.rating:not(:checked) > label:hover,\n.rating:not(:checked) > label:hover ~ label {\n  color: gold; }\n\n.rating > input:checked + label:hover,\n.rating > input:checked + label:hover ~ label,\n.rating > input:checked ~ label:hover,\n.rating > input:checked ~ label:hover ~ label,\n.rating > label:hover ~ input:checked ~ label {\n  color: #ea0; }\n\n.rating > label:active {\n  position: relative;\n  top: 2px;\n  left: 2px; }\n';const e=document.createElement("template");e.innerHTML=`\n  <style>\n    ${n}\n  </style>\n  <div class="content">\n    <span id="close" class="close">\n      x\n    </span>\n    <p class="mt-auto mb-0 text-center">Tell us what you think of <span id="websiteName"></span>?</p>\n    <form id="form" class="mb-auto">\n      <div id="ratings" class="rating" aria-labelledby="rating">\n        <input type="radio" id="star5" name="rating" value="5" />\n        <label for="star5" title="5 stars">\n          5 stars\n        </label>\n        <input type="radio" id="star4" name="rating" value="4" />\n        <label for="star4" title="4 stars">\n          4 stars\n        </label>\n        <input type="radio" id="star3" name="rating" value="3" />\n        <label for="star3" title="3 stars">\n          3 stars\n        </label>\n        <input type="radio" id="star2" name="rating" value="2" />\n        <label for="star2" title="2 stars">\n          2 stars\n        </label>\n        <input type="radio" id="star1" name="rating" value="1" />\n        <label for="star1" title="1 star">\n          1 star\n        </label>\n      </div>\n    </form>\n  </div>\n`;const t=document.createElement("template");t.innerHTML=`\n  <style>\n    ${n}\n  </style>\n  <div class="content">\n    <span id="close" class="close">\n      x\n    </span>\n    <p class="mt-auto text-center">Thank you so much! Positive reviews such as yours are essential to our success.</p>\n    <p class="text-center">Would you be willing to leave your review on <span id="reviewWebsiteName"></span> for us?</p>\n    <div class="mb-auto text-center">\n      <a id="reviewWebsite" class="btn" target="_blank">YES</a>\n    </div>\n  </div>\n`;const i=document.createElement("template");i.innerHTML=`\n  <style>${n}</style>\n  <div class="content">\n    <span id="close" class="close">\n      x\n    </span>\n    <p class="mb-auto mt-auto text-center">Thank you so much!</p>\n  </div>\n`;class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}async connectedCallback(){const{data:n,error:e}=await this.post({id:this.id,name:"Widget",method:"createEvent"});void 0===e?this.createRatingTemplate(n):console.error(e)}createRatingTemplate(n){this.shadowRoot.appendChild(e.content.cloneNode(!0)),this.shadowRoot.getElementById("websiteName").innerHTML=n.websiteName,this.shadowRoot.getElementById("close").onclick=()=>this.toggle(),this.shadowRoot.getElementById("ratings").onchange=async e=>{if(this.createReviewTemplate(n,e),!0===e.isTrusted){const{error:n}=await this.post({id:this.id,name:"Widget",method:"createEvent"},{rating:Number(e.target.value)});void 0!==n&&console.error(n)}}}createReviewTemplate(n,e){this.shadowRoot.innerHTML="",5===Number(e.target.value)?(this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.shadowRoot.getElementById("reviewWebsiteName").innerHTML=n.reviewWebsiteName,this.shadowRoot.getElementById("reviewWebsite").href=n.reviewWebsite,this.shadowRoot.getElementById("close").onclick=()=>this.toggle(),this.shadowRoot.getElementById("reviewWebsite").onclick=async()=>{this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(i.content.cloneNode(!0)),this.shadowRoot.getElementById("close").onclick=()=>this.toggle();const{error:n}=await this.post({id:this.id,name:"Widget",method:"createEvent"},{outbound:!0});void 0!==n&&console.error(n)}):(this.shadowRoot.appendChild(i.content.cloneNode(!0)),this.shadowRoot.getElementById("close").onclick=()=>this.toggle())}toggle(){this.classList.toggle("closed")}async post({id:n,name:e,method:t},i){const o=await fetch("https://api.reviewboostr.com",{method:"POST",mode:"cors",headers:{Accept:"application/json; charset=utf-8","Content-Type":"application/json; charset=utf-8"},body:JSON.stringify({object:{id:n,name:e,method:t},data:i})});return await o.json()}}customElements.define("review-boostr",o)}();
//# sourceMappingURL=boostr.js.map