Web widget demo page

This guide will explain to you how to set up a custom demo page to showcase your chatbot as seen in this example: https://banking-bot-demo.glitch.me/. This can be done using Glitch, where you can create apps in your browser for free.
1. Create a web widget in Chatlayer
Create a web widget with the configuration of your liking via Channels. Read more about that here.
2. Create account on Glitch
Create an account on glitch.com. 
Create a new project and name it the way you want your link to be shown: 
3. Create html page
Now click on the Index.html page in the left column. There, paste the following block of code between the two lines. 
Pay close attention to:
Line 97: Use the link of the web widget in Chatlayer there
Replace 'onload='chatlayer()'' with 'onload="initChatlayer()'
Line 92: Please enter the name of your glitch web page here
Line 81: If you want to change the background colour of the web page, you can do so by entering the HEX colour code 
 <!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <title>Chatlayer x Sinch</title> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
​
    <style> 
      #chatlayer-iframe-wrapper { 
        margin-top: 40px; 
        flex: 1; 
        display: flex; 
        flex-direction: column; 
        min-width: 100%; 
        margin-bottom: 40px; 
​
      } 
​
       
      #chatlayer-iframe-wrapper .chatlayer-iframe { 
        flex: 1; 
        border: 1px solid #F0F0F0 !important; 
        box-shadow: 0px 20px 20px -15px rgba(20,20,20,0.1) !important; 
      } 
       
      iframe .chatBalloon-bot { 
        border-radius: 5px 5px 5px 0px!important; 
      } 
​
  
      #chatlayer-wrapper { 
        flex: 1; 
        padding: 40px; 
        display: flex; 
        flex-direction: column; 
        position: relative; 
        justify-content: center; 
        align-items: center; 
        margin: 0 auto; 
        width: 50%; 
        max-width: 600px; 
      } 
​
      .sinch-logo svg { 
        fill: white; 
        height: 40px; 
      } 
​
  
​
      .chatlayer-chatbox-wrapper { 
        box-sizing: border-box; 
        position: fixed; 
        top: 0px; 
        left: 0px; 
        min-width: 100vh; 
        min-height: 100vh; 
      } 
​
      iframe.chatlayer-iframe { 
        width: 100%; 
        font-family: arial!important 
      } 
​
       
​
      iframe.chatlayer-iframe html * { 
        font-family: Helvetica !important; 
      } 
​
      html { 
        height: 100vh; 
        width: 100vw; 
      } 
​
      body { 
        min-height: 100vh; 
        display: flex; 
        flex-direction: column; 
        background: #f8f8f8; 
​
      } 
​
    </style> 
    
    <script> 
​
    function initChatlayer() { 
      var time = (new Date()).getTime(); 
      console.log(time) 
      var cl = chatlayer({ "autoOpen": "true", "lang":"en", wrapper: document.querySelector("#chatlayer-iframe-wrapper"), sessionId: `YOUR NAME-demo.glitch.me.${time}` }) 
      cl.open(); 
    } 
​
    </script> 
    <script src="Please enter the SDK link you’ve copied from the chat widget on the Chatlayer platform here " onload="chatlayer()" async></script> 
  </head> 
​
  <body> 
​
    <div id="chatlayer-wrapper"> 
      <div id="chatlayer-iframe-wrapper"> 
               </div> 
    </div> 
    <div style="display:flex;flex-direction:colum;justify-content: center;"> 
   </div> 
​
  </body> 
​
</html> 
​
-------------------
Now check your website by clicking on ‘Show’ and then ‘In a New Window’ (see left top corner) 
And there you go! A quick and easy page to show off your amazing bot!
Tutorials - Previous
Reuse flows
Next - Support
Get in touch
Last updated 4 weeks ago