Skip to content

Commit 1b34046

Browse files
rsarikarsarika
authored
fix(cc-widgets): added new chat client for cc widgets e2e testing (#516)
1 parent ea99d28 commit 1b34046

2 files changed

Lines changed: 158 additions & 1 deletion

File tree

‎copy_to_docs.sh‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
cp ./widgets-samples/index.html docs/
55
cp ./widgets-samples/chat-client.html docs/
66
cp ./widgets-samples/chat-client-e2e.html docs/
7-
7+
cp ./widgets-samples/chat-client-e2e-2.html docs/
88
# Copy specific files and directories from samples-cc-wc-app to the docs directory
99
mkdir -p docs/samples-cc-wc-app
1010
cp -r ./widgets-samples/cc/samples-cc-wc-app/dist docs/samples-cc-wc-app/

‎widgets-samples/chat-client-e2e-2.html‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>WxCC Widgets - Chat Client</title>
5+
<style>
6+
body {
7+
font-family: Arial, sans-serif;
8+
margin: 0;
9+
padding: 0;
10+
background-color: #f4f4f4;
11+
}
12+
p {
13+
font-size: 1.2em;
14+
color: #333;
15+
}
16+
.header {
17+
background-color: rgb(7, 24, 45);
18+
color: #fff;
19+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
20+
padding: 16px;
21+
margin: 0;
22+
font-size: 1.5em;
23+
font-weight: bold;
24+
display: flex;
25+
flex-direction: column;
26+
align-items: flex-start;
27+
}
28+
.header-subtext {
29+
font-size: 0.7em;
30+
font-weight: normal;
31+
color: #d1d5db;
32+
margin-top: 4px;
33+
font-style: italic;
34+
}
35+
.main-container {
36+
padding: 16px;
37+
background-color: #fff;
38+
margin: 16px;
39+
border-radius: 8px;
40+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
41+
}
42+
.info-social {
43+
margin-top: 24px;
44+
padding: 16px;
45+
background-color: #f0f6ff;
46+
border-left: 4px solid #1877f2;
47+
border-radius: 6px;
48+
}
49+
.info-email {
50+
margin-top: 24px;
51+
padding: 16px;
52+
background-color: #fffbe6;
53+
border-left: 4px solid #fbbc04;
54+
border-radius: 6px;
55+
}
56+
.info-tasks {
57+
margin-top: 24px;
58+
padding: 16px;
59+
background-color: #e6fff7;
60+
border-left: 4px solid #00bfae;
61+
border-radius: 6px;
62+
}
63+
</style>
64+
</head>
65+
66+
<body>
67+
<div class="header">
68+
WxCC Widgets
69+
<span class="header-subtext"
70+
>Chat Client Sample -
71+
<span style="font-size: 0.85em; color: #7dd3fc">Slide into support's DMs, fr fr fr</span></span
72+
>
73+
</div>
74+
<div class="main-container">
75+
<p>
76+
Hey there! Welcome to your chat zone. This widget lets you slide into an agent's DMs on
77+
<b>ccsdk.wbx.ai</b> sandbox. Just tap the chat icon chillin' at the bottom right.
78+
</p>
79+
<div class="info-social">
80+
<strong>Social:</strong> Wanna start a chat via socials? Log in to Facebook and drop a message to
81+
<a href="https://www.facebook.com/profile.php?id=61576316010450" target="_blank" rel="noopener noreferrer">
82+
this page</a
83+
>. Easy vibes.
84+
</div>
85+
<div class="info-email">
86+
<strong>Email:</strong> Prefer email? Shoot a message to
87+
<a href="mailto:ccsdk.wbx.ai@gmail.com">ccsdk.wbx.ai@gmail.com</a> and we'll catch it.
88+
</div>
89+
<div class="info-tasks">
90+
<strong>Where's my stuff?</strong> Peep your incoming tasks on the
91+
<a href="https://desktop.wxcc-us1.cisco.com/" target="_blank" rel="noopener noreferrer"
92+
>Webex Contact Center Agent Desktop</a
93+
>
94+
or check out the
95+
<a href="https://ccwidgets.d1b38q61t1z947.amplifyapp.com/" target="_blank" rel="noopener noreferrer"
96+
>WxCC Widget Sample</a
97+
>. Stay in the loop!
98+
</div>
99+
</div>
100+
<div
101+
id="divicw"
102+
data-bind="14AE8644-DCD1-4D77-95C3-347CBE1219DA"
103+
data-org=""
104+
data-guid="e240bfe7-0403-4b3e-b824-a20af479ac97"
105+
></div>
106+
<script>
107+
var i = {
108+
t: function (t) {
109+
var e = 'https://media.imi.chat/widget/js/imichatinit.js';
110+
try {
111+
var o = new XMLHttpRequest();
112+
o.onreadystatechange = function () {
113+
if (this.readyState == 4) {
114+
var t = document.getElementById('divicw');
115+
if (this.status == 0) {
116+
i.o(t);
117+
return;
118+
}
119+
var e = document.createElement('script');
120+
e.innerHTML = this.responseText;
121+
t.parentNode.insertBefore(e, t.nextSibling);
122+
}
123+
};
124+
o.open('GET', e, true);
125+
o.send();
126+
} catch (s) {
127+
console.error(s);
128+
}
129+
},
130+
o: function (t) {
131+
t.insertAdjacentHTML(
132+
'afterend',
133+
'<iframe id="tls_al_frm" frameborder="0" style="overflow: hidden;height: 208px;width: 394px;position: fixed;display: block;right: 48px;bottom: 12px;z-index: 99999; display:none;"></iframe>'
134+
);
135+
var e = document.getElementById('tls_al_frm');
136+
var o = e.contentWindow || e.contentDocument.document || e.contentDocument;
137+
o.document.open();
138+
o.document.write(
139+
'<!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #99a0b0;font-size: 14px;}.popover__content{background-color: #fbfbfe; padding: 1.5rem; border-radius: 5px; width: 300px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);position: relative;}.popover__message{font-weight: 600;color:#56627c;font-size: 16px;}.pull-left{float:left;}.clearfix{clear: both;}.hdr-txt{width: 218px; margin-top: 3px;}.para-txt a{text-decoration: none;color: #005cde;}.close-btn{position: absolute;right:15px;top:15px;}.close-btn a{text-decoration: none;font-weight: 400; color: #56627c; font-size: 16px;}</style></head><body><div class="popover__content"><div class="close-btn"><a href="#" onclick="closeTLSAlert();">X</a></div><div class="popover__message"><div class="pull-left hdr-txt">This browser version is not supported on LiveChat.</div></div><div class="clearfix"></div><p class="para-txt">Please update your browser to the latest version and re-open the website to access the widget. </p></div><script>function closeTLSAlert(){window.parent.postMessage({key: "close_tls_alert",value: "close_tls_alert",action: "close_tls_alert"}, "*");}<\\/script></body></html>'
140+
);
141+
o.document.close();
142+
e.style.display = 'block';
143+
window.addEventListener('message', function (t) {
144+
if (t.data.action == 'close_tls_alert') {
145+
i.s();
146+
}
147+
});
148+
},
149+
s: function () {
150+
var t = document.getElementById('tls_al_frm');
151+
t.remove();
152+
},
153+
};
154+
i.t(function (t) {});
155+
</script>
156+
</body>
157+
</html>

0 commit comments

Comments
 (0)