Getting started
Organization Management
Integrations
Channels
Chatlayer API
Tips & Best practices
Tutorials
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
2. Create account on Glitch
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!
Last modified 10mo ago