Create a 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 
1
 <!DOCTYPE html> 
2
<html lang="en"> 
3
  <head> 
4
    <title>Chatlayer x Sinch</title> 
5
    <meta charset="utf-8" /> 
6
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
7
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
8
​
9
    <style> 
10
      #chatlayer-iframe-wrapper { 
11
        margin-top: 40px; 
12
        flex: 1; 
13
        display: flex; 
14
        flex-direction: column; 
15
        min-width: 100%; 
16
        margin-bottom: 40px; 
17
​
18
      } 
19
​
20
       
21
      #chatlayer-iframe-wrapper .chatlayer-iframe { 
22
        flex: 1; 
23
        border: 1px solid #F0F0F0 !important; 
24
        box-shadow: 0px 20px 20px -15px rgba(20,20,20,0.1) !important; 
25
      } 
26
       
27
      iframe .chatBalloon-bot { 
28
        border-radius: 5px 5px 5px 0px!important; 
29
      } 
30
​
31
  
32
      #chatlayer-wrapper { 
33
        flex: 1; 
34
        padding: 40px; 
35
        display: flex; 
36
        flex-direction: column; 
37
        position: relative; 
38
        justify-content: center; 
39
        align-items: center; 
40
        margin: 0 auto; 
41
        width: 50%; 
42
        max-width: 600px; 
43
      } 
44
​
45
      .sinch-logo svg { 
46
        fill: white; 
47
        height: 40px; 
48
      } 
49
​
50
  
51
​
52
      .chatlayer-chatbox-wrapper { 
53
        box-sizing: border-box; 
54
        position: fixed; 
55
        top: 0px; 
56
        left: 0px; 
57
        min-width: 100vh; 
58
        min-height: 100vh; 
59
      } 
60
​
61
      iframe.chatlayer-iframe { 
62
        width: 100%; 
63
        font-family: arial!important 
64
      } 
65
​
66
       
67
​
68
      iframe.chatlayer-iframe html * { 
69
        font-family: Helvetica !important; 
70
      } 
71
​
72
      html { 
73
        height: 100vh; 
74
        width: 100vw; 
75
      } 
76
​
77
      body { 
78
        min-height: 100vh; 
79
        display: flex; 
80
        flex-direction: column; 
81
        background: #f8f8f8; 
82
​
83
      } 
84
​
85
    </style> 
86
    
87
    <script> 
88
​
89
    function initChatlayer() { 
90
      var time = (new Date()).getTime(); 
91
      console.log(time) 
92
      var cl = chatlayer({ "autoOpen": "true", "lang":"en", wrapper: document.querySelector("#chatlayer-iframe-wrapper"), sessionId: `YOUR NAME-demo.glitch.me.${time}` }) 
93
      cl.open(); 
94
    } 
95
​
96
    </script> 
97
    <script src="Please enter the SDK link you’ve copied from the chat widget on the Chatlayer platform here " onload="chatlayer()" async></script> 
98
  </head> 
99
​
100
  <body> 
101
​
102
    <div id="chatlayer-wrapper"> 
103
      <div id="chatlayer-iframe-wrapper"> 
104
               </div> 
105
    </div> 
106
    <div style="display:flex;flex-direction:colum;justify-content: center;"> 
107
   </div> 
108
​
109
  </body> 
110
​
111
</html> 
112
​
113
-------------------
Copied!
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!

From chat to voice

Next - Tutorials

Gathering user feedback

Last modified 6mo ago

Copy link

Contents

1. Create a web widget in Chatlayer

2. Create account on Glitch

3. Create html page