Installing String Cans on your website

Copy & paste the following code in your web page’s footer before the closing body tag.

Make sure to replace the placeholder client ID (123456) with your client ID sent to you via email.

<!-- Chat widget -->
<label for="toggle" class="we-chat"><img src="https://getstarted.stringcans.com/static/images/chat-with.png" style=""></label>
 <input type="checkbox" id="toggle" class="visually-hidden">
<script>
var iframe = document.createElement('iframe');
iframe.src = 'https://getstarted.stringcans.com/chatbox?id=client123456&link=' + window.location.href;
iframe.setAttribute("allow", "microphone; camera; geolocation;");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("scrolling", "no");
iframe.setAttribute("allowtransparency", "true");
iframe.setAttribute("id", "stringcans-client");
iframe.setAttribute("style", "position:fixed; z-index: 999999; height: 95%; width: 396px; bottom:0; right:0");
iframe.setAttribute('data-ur1', window.location.href);
console.log("im here", iframe.contentWindow);
document.body.appendChild(iframe);

//Added by ANIRUDH
if (!localStorage.getItem('closePermanently')) {
   localStorage.setItem('closePermanently', 'FALSE');
}

window.addEventListener("message", (event) => {
   if (event.origin != "https://getstarted.stringcans.com") {
      return;
   }

if (event.data === 'close_permanenttly') {
      localStorage.setItem('closePermanently', 'TRUE');

      let chat_element = document.getElementById("toggle");
      chat_element.checked = false;
   }

if (event.data === 'open') {
      if (localStorage.getItem('closePermanently') === 'FALSE') {
         let chat_element = document.getElementById("toggle");

         if (!chat_element.checked) {
            chat_element.checked = true;
         }
      }

   }
}, false);
</script>	
<style type="text/css">
body .we-chat {cursor: pointer; position: fixed; right: 10px; bottom: 15px; height: auto; text-align: center; margin-bottom: 0px !important; z-index: 9999999; width: auto !important;
}
.we-chat img { max-width: 70px; vertical-align: bottom; margin-bottom: 0px;}
.we-chat i{ font-size: 20px; }
#stringcans-client {display: none;}
#toggle:checked ~ #stringcans-client {display: block !important;}
.visually-hidden {display: none;}
@media (max-width: 415px) { 
#stringcans-client {width: 100% !important;max-width: 95%;}
}
</style>
<!-- Chat widget -->

Installing String Cans on your website

Email Us

Call Us