Scribd
Upload
44 views17 pages

Axon Demo No Approved Unsaved

The document contains the HTML and CSS code for a website with three slideshow sections. The slideshow sections each contain a heading and paragraph of text. Additional elements on the page include a logo image, navigation controls for the slideshow, and indicators of the current slide. Styling is applied for layout, colors, fonts, transitions and interactions of the different elements.

Uploaded by

Daniel Laiton
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
44 views17 pages

Axon Demo No Approved Unsaved

The document contains the HTML and CSS code for a website with three slideshow sections. The slideshow sections each contain a heading and paragraph of text. Additional elements on the page include a logo image, navigation controls for the slideshow, and indicators of the current slide. Styling is applied for layout, colors, fonts, transitions and interactions of the different elements.

Uploaded by

Daniel Laiton
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 17

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<!-- Start of Tombot Chat Widget -->

<!-- End of Tombot Chat Widget -->

<style>
html,
body {
height: 100%;
}

body {
font-family: Arial, sans-serif;
background-color: #ffffff;
/* Color beige */
margin: 0%;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 5%;
}

.Image img {
max-width: 100%;
position: relative;
height: auto;

.TextoTelefono {

margin-top: 1%;
margin-bottom: 10%;
font-size: 15px;
}

.TextoTelefono:hover {

font-size: 25px;

.slide {
position: relative;
z-index: 0;
/* set higher z-index value */
width: 70%;
}

.slide-inner {
position: relative;
overflow: hidden;
width: 100%;
height: calc(500px + 3em);
}

.slide-open:checked+.slide-item {
position: static;
opacity: 100;
}

.slide-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
margin: 10%;
}

.slide-item img {
display: block;
height: auto;
max-width: 100%;
}

.slide-control {
background: rgba(0, 0, 0, 0.28);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: none;
font-size: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}

.slide-control.prev {
left: 2%;
}

.slide-control.next {
right: 2%;
}

.slide-control:hover {
background: rgba(0, 0, 0, 0.8);
color: #aaaaaa;
}

#slide-1:checked~.control-1,
#slide-2:checked~.control-2,
#slide-3:checked~.control-3,
#slide-4:checked~.control-4 {
display: block;
}

.slide-indicador {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}

.slide-indicador li {
display: inline-block;
margin: 0 5px;
}

.slide-circulo {
color: #828282;
cursor: pointer;
display: block;
font-size: 35px;
}

.slide-circulo:hover {
color: #aaaaaa;
}

#slide-1:checked~.control-1~.slide-indicador li:nth-child(1) .slide-circulo,


#slide-2:checked~.control-2~.slide-indicador li:nth-child(2) .slide-circulo,
#slide-3:checked~.control-3~.slide-indicador li:nth-child(3) .slide-circulo,
#slide-4:checked~.control-4~.slide-indicador li:nth-child(4) .slide-circulo {
color: #428bca;
}

h1 {

text-align: center;
}

p {

text-align: center;
}

#titulo {
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33),
-1px 0px 2px rgba(255, 255, 255, 0);
}

#ChatCont {

padding: 10px;

background: #009ADB;

border-top-right-radius: 20%;
border-top-left-radius: 20%;
border-bottom-left-radius: 20%;
border-bottom-right-radius: 20%;

width: 150PX;

height: 40px;

cursor: pointer;

box-shadow: 0px 0px 1px #000;

display: inline-block;

position: fixed;

top: 88%;
left: 80%;

color: white;
font-weight: bolder;
text-align: center;

#ChatCont:hover {

opacity: .8;

.chatContainer {

width: 20%;
position: fixed;
top: 5%;
left: 50%;
}

h1.ChatTitulo {
font-size: 16px;
font-family: Segoe UI;
line-height: 20px;
color: whitesmoke;
display: table-cell;
padding: 13px 0px 0px 60px;
}

h3.SubChatTitulo {
font-size: 10px;
font-family: Segoe UI;
flex-wrap: nowrap;
line-height: 20px;
color: whitesmoke;
display: table-cell;
padding: 0px 0px 0px 60px;
}

#heading {
background-color: #009ADB;
height: 75px;
visibility: hidden;

border-top-right-radius: 15%;
border-top-left-radius: 15%;

.main {
margin: 18px;
border-radius: 4px;
}

div[role="form"] {
background-color: white;
text-wrap: wrap;

#webchat {
position: fixed;
height: calc(0% - 50px);
width: 20%;
overflow: hidden;

#webchat {
transition: height 2s;
}
.ImageIsotipoCont {

background-color: transparent;
background-image: url(IMG/Isotipo.png);
background-repeat: no-repeat;
position: fixed;
width: 20%;
height: 100%;

}
</style>

<title></title>
</head>

<body>
<div class="Image">
<img
src="https://d1eipm3vz40hy0.cloudfront.net/images/p-apps-marketplace/
partners/2926/Callzilla_2020_logo.png?w=256&q=75"
alt="Logo de la página">
</div>

<div class="slide">
<div class="slide-inner">
<input class="slide-open" type="radio" id="slide-1" name="slide" aria-
hidden="true" hidden="" checked="checked">
<div class="slide-item">
<h1>Lorem ipsum dolor sit amet</h1>
<p>consectetur adipiscing elit. Sed sit amet augue nec nulla interdum
convallis. Suspendisse potenti. Proin sed
odio id odio venenatis mattis in eget dolor. Donec congue, tortor vel
fermentum eleifend, mi odio tempor
massa, ut tincidunt quam nunc id quam. Nullam eu libero en lectus
accumsan ultrices non eget lorem. Sed en
euismod arcu. Curabitur laoreet, en una convallis ultrices, urna mauris
congue ex, en lacinia libero dui ac
ligula. Nam tincidunt interdum lectus, eu facilisis tellus dictum sed.
Sed nec aliquet libero, sit amet
hendrerit lectus. Vivamus id erat nec metus suscipit tincidunt non et
elit. Sed fringilla eros en dui interdum
volutpat. Pellentesque id ex quis nisi suscipit fringilla. Quisque
vehicula malesuada est, en convallis lorem
pellentesque vel.

Fusce bibendum nunc nec libero posuere, en euismod erat elementum. Duis
dapibus tortor id orci volutpat, en
blandit lorem vestibulum. Etiam porttitor, mi en fermentum volutpat,
lorem velit egestas urna, nec posuere
augue orci en eu orci. Nullam posuere urna en arco blandit vestibulum.
Sed auctor, arna en euismod cursus,
ligula dui suscipit libero, ut dignissim nada dolor sit amet justo. Nam
en sed orci en quam bibendum
ullamcorper. Nulla facilisi. Integer condimentum volutpat mi, en
malesuada justo pellentesque en. Sed en lorem
augue. Nulla facilisi. Nam ut lacinia neque. Sed ac scelerisque mi.
Aenean pellentesque pharetra mi, eu
ultrices est ullamcorper vel. Cras en un tortor en tortor hendrerit
elementum.</p>
</div>
<input class="slide-open" type="radio" id="slide-2" name="slide" aria-
hidden="true" hidden="">
<div class="slide-item">
<h1>Lorem ipsum dolor sit amet</h1>
<p>consectetur adipiscing elit. Sed sit amet augue nec nulla interdum
convallis. Suspendisse potenti. Proin sed
odio id odio venenatis mattis in eget dolor. Donec congue, tortor vel
fermentum eleifend, mi odio tempor
massa, ut tincidunt quam nunc id quam. Nullam eu libero en lectus
accumsan ultrices non eget lorem. Sed en
euismod arcu. Curabitur laoreet, en una convallis ultrices, urna mauris
congue ex, en lacinia libero dui ac
ligula. Nam tincidunt interdum lectus, eu facilisis tellus dictum sed.
Sed nec aliquet libero, sit amet
hendrerit lectus. Vivamus id erat nec metus suscipit tincidunt non et
elit. Sed fringilla eros en dui interdum
volutpat. Pellentesque id ex quis nisi suscipit fringilla. Quisque
vehicula malesuada est, en convallis lorem
pellentesque vel.

Fusce bibendum nunc nec libero posuere, en euismod erat elementum. Duis
dapibus tortor id orci volutpat, en
blandit lorem vestibulum. Etiam porttitor, mi en fermentum volutpat,
lorem velit egestas urna, nec posuere
augue orci en eu orci. Nullam posuere urna en arco blandit vestibulum.
Sed auctor, arna en euismod cursus,
ligula dui suscipit libero, ut dignissim nada dolor sit amet justo. Nam
en sed orci en quam bibendum
ullamcorper. Nulla facilisi. Integer condimentum volutpat mi, en
malesuada justo pellentesque en. Sed en lorem
augue. Nulla facilisi. Nam ut lacinia neque. Sed ac scelerisque mi.
Aenean pellentesque pharetra mi, eu
ultrices est ullamcorper vel. Cras en un tortor en tortor hendrerit
elementum.</p>
</div>
<input class="slide-open" type="radio" id="slide-3" name="slide" aria-
hidden="true" hidden="">
<div class="slide-item">
<h1>Lorem ipsum dolor sit amet</h1>
<p>consectetur adipiscing elit. Sed sit amet augue nec nulla interdum
convallis. Suspendisse potenti. Proin sed
odio id odio venenatis mattis in eget dolor. Donec congue, tortor vel
fermentum eleifend, mi odio tempor
massa, ut tincidunt quam nunc id quam. Nullam eu libero en lectus
accumsan ultrices non eget lorem. Sed en
euismod arcu. Curabitur laoreet, en una convallis ultrices, urna mauris
congue ex, en lacinia libero dui ac
ligula. Nam tincidunt interdum lectus, eu facilisis tellus dictum sed.
Sed nec aliquet libero, sit amet
hendrerit lectus. Vivamus id erat nec metus suscipit tincidunt non et
elit. Sed fringilla eros en dui interdum
volutpat. Pellentesque id ex quis nisi suscipit fringilla. Quisque
vehicula malesuada est, en convallis lorem
pellentesque vel.

Fusce bibendum nunc nec libero posuere, en euismod erat elementum. Duis
dapibus tortor id orci volutpat, en
blandit lorem vestibulum. Etiam porttitor, mi en fermentum volutpat,
lorem velit egestas urna, nec posuere
augue orci en eu orci. Nullam posuere urna en arco blandit vestibulum.
Sed auctor, arna en euismod cursus,
ligula dui suscipit libero, ut dignissim nada dolor sit amet justo. Nam
en sed orci en quam bibendum
ullamcorper. Nulla facilisi. Integer condimentum volutpat mi, en
malesuada justo pellentesque en. Sed en lorem
augue. Nulla facilisi. Nam ut lacinia neque. Sed ac scelerisque mi.
Aenean pellentesque pharetra mi, eu
ultrices est ullamcorper vel. Cras en un tortor en tortor hendrerit
elementum.</p>
</div>
<input class="slide-open" type="radio" id="slide-4" name="slide" aria-
hidden="true" hidden="">
<div class="slide-item">
<h1>Lorem ipsum dolor sit amet</h1>
<p>consectetur adipiscing elit. Sed sit amet augue nec nulla interdum
convallis. Suspendisse potenti. Proin sed
odio id odio venenatis mattis in eget dolor. Donec congue, tortor vel
fermentum eleifend, mi odio tempor
massa, ut tincidunt quam nunc id quam. Nullam eu libero en lectus
accumsan ultrices non eget lorem. Sed en
euismod arcu. Curabitur laoreet, en una convallis ultrices, urna mauris
congue ex, en lacinia libero dui ac
ligula. Nam tincidunt interdum lectus, eu facilisis tellus dictum sed.
Sed nec aliquet libero, sit amet
hendrerit lectus. Vivamus id erat nec metus suscipit tincidunt non et
elit. Sed fringilla eros en dui interdum
volutpat. Pellentesque id ex quis nisi suscipit fringilla. Quisque
vehicula malesuada est, en convallis lorem
pellentesque vel.

Fusce bibendum nunc nec libero posuere, en euismod erat elementum. Duis
dapibus tortor id orci volutpat, en
blandit lorem vestibulum. Etiam porttitor, mi en fermentum volutpat,
lorem velit egestas urna, nec posuere
augue orci en eu orci. Nullam posuere urna en arco blandit vestibulum.
Sed auctor, arna en euismod cursus,
ligula dui suscipit libero, ut dignissim nada dolor sit amet justo. Nam
en sed orci en quam bibendum
ullamcorper. Nulla facilisi. Integer condimentum volutpat mi, en
malesuada justo pellentesque en. Sed en lorem
augue. Nulla facilisi. Nam ut lacinia neque. Sed ac scelerisque mi.
Aenean pellentesque pharetra mi, eu
ultrices est ullamcorper vel. Cras en un tortor en tortor hendrerit
elementum.</p>
</div>
<label id="slide-control" for="slide-4" class="slide-control prev control-
1">‹</label>
<label id="slide-control1" for="slide-2" class="slide-control next control-
1">›</label>
<label id="slide-control" for="slide-1" class="slide-control prev control-
2">‹</label>
<label id="slide-control1" for="slide-3" class="slide-control next control-
2">›</label>
<label id="slide-control" for="slide-2" class="slide-control prev control-
3">‹</label>
<label id="slide-control1" for="slide-4" class="slide-control next control-
3">›</label>
<label id="slide-control" for="slide-3" class="slide-control prev control-
4">‹</label>
<label id="slide-control1" for="slide-1" class="slide-control next control-
4">›</label>
<ol class="slide-indicador" id="slide-indicador">
<li>
<label for="slide-1" class="slide-circulo">•</label>
</li>
<li>
<label for="slide-2" class="slide-circulo">•</label>
</li>
<li>
<label for="slide-3" class="slide-circulo">•</label>
</li>
<li>
<label for="slide-4" class="slide-circulo">•</label>
</li>
</ol>
</div>
</div>

<a Class="TextoTelefono"> For any questions please contact 800-992-9084 </a>

<div class="chatContainer" id="chatContainer">


<div>
<div id="heading">
<!-- Change the h1 text to change the bot name -->

<div class="ImageIsotipoCont">

</div>

<h1 class="ChatTitulo">CALLZILLA</h1>
<br>
<h3 class="SubChatTitulo">HotLine information</h3>
</div>
<div id="webchat" role="main"></div>
</div>

<script
src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
</div>

<div id="ChatCont" onclick="AbrirChat()"> <img style="width: 20%;"


src="https://img.icons8.com/?size=256&id=3726&format=png" alt="">CHAT</div>

<script>

click = 1;
var Ancho = screen.width;
var Alto = screen.height;
console.log(Ancho);
console.log(Alto);
window.addEventListener('resize',function() {
var Ancho = screen.width;
var Alto = screen.height;
if (Ancho > 1199) {

if (click == 1) {

document.getElementById("heading").style.visibility = "visible";
document.getElementById("webchat").style.height = "calc(80% - 50px)";
document.getElementById("webchat").style.border = "1px solid black";
document.getElementById("slide-control1").style.visibility = "hidden";
document.getElementById("webchat").style.width = "40%";
document.getElementById("chatContainer").style.width = "40%";

click = click + 1;

} else if (Ancho > 1000 && Ancho < 1200) {

if (click == 1) {

document.getElementById("heading").style.visibility = "visible";
document.getElementById("webchat").style.height = "calc(80% - 50px)";
document.getElementById("webchat").style.border = "1px solid black";
document.getElementById("slide-control1").style.visibility = "hidden";
document.getElementById("webchat").style.width = "40%";
document.getElementById("chatContainer").style.width = "40%";

click = click + 1;

} else if (Ancho < 1000 && Ancho > 499) {

if (click == 1) {

document.getElementById("heading").style.visibility = "visible";
document.getElementById("webchat").style.height = "calc(80% - 50px)";
document.getElementById("webchat").style.width = "80%";
document.getElementById("chatContainer").style.width = "80%";
document.getElementById("chatContainer").style.left = "18%";
document.getElementById("webchat").style.border = " 1px solid black";
document.getElementById("slide-control1").style.visibility = "hidden";

click = click + 1;

} else if (Ancho < 500 && Ancho > 200) {

if (click == 1) {

document.getElementById("heading").style.visibility = "visible";
document.getElementById("webchat").style.height = "calc(80% - 50px)";
document.getElementById("webchat").style.width = "80%";
document.getElementById("chatContainer").style.width = "80%";
document.getElementById("chatContainer").style.left = "15%";
document.getElementById("webchat").style.border = " 1px solid black";
document.getElementById("slide-control1").style.visibility = "hidden";
document.getElementById("slide-indicador").style.visibility = "hidden";
click = click + 1;

} )

function AbrirChatAuto() {

if (Ancho > 1199) {

if (click == 1) {

document.getElementById("heading").style.visibility = "visible";
document.getElementById("webchat").style.height = "calc(80% - 50px)";
document.getElementById("webchat").style.border = "1px solid black";
document.getElementById("slide-control1").style.visibility = "hidden";
document.getElementById("webchat").style.width = "40%";
document.getElementById("chatContainer").style.width = "40%";

click = click + 1;

} else if (Ancho > 1000 && Ancho < 1200) {

if (click == 1) {

document.getElementById("heading").style.visibility = "visible";
document.getElementById("webchat").style.height = "calc(80% - 50px)";
document.getElementById("webchat").style.border = "1px solid black";
document.getElementById("slide-control1").style.visibility = "hidden";
document.getElementById("webchat").style.width = "40%";
document.getElementById("chatContainer").style.width = "40%";

click = click + 1;

} else if (Ancho < 1000 && Ancho > 499) {

if (click == 1) {

document.getElementById("heading").style.visibility = "visible";
document.getElementById("webchat").style.height = "calc(80% - 50px)";
document.getElementById("webchat").style.width = "80%";
document.getElementById("chatContainer").style.width = "80%";
document.getElementById("chatContainer").style.left = "18%";
document.getElementById("webchat").style.border = " 1px solid black";
document.getElementById("slide-control1").style.visibility = "hidden";

click = click + 1;

} else if (Ancho < 500 && Ancho > 200) {

if (click == 1) {

document.getElementById("heading").style.visibility = "visible";
document.getElementById("webchat").style.height = "calc(80% - 50px)";
document.getElementById("webchat").style.width = "80%";
document.getElementById("chatContainer").style.width = "80%";
document.getElementById("chatContainer").style.left = "15%";
document.getElementById("webchat").style.border = " 1px solid black";
document.getElementById("slide-control1").style.visibility = "hidden";
document.getElementById("slide-indicador").style.visibility = "hidden";
click = click + 1;

setTimeout(AbrirChatAuto, 5000);

if (Ancho >= 1600) {

document.getElementById("ChatCont").style.left = "88%";

} else if (Ancho > 1500 && Ancho < 1599) {

document.getElementById("ChatCont").style.left = "88%";

} else if (Ancho > 1400 && Ancho < 1499) {

document.getElementById("ChatCont").style.left = "87%";

} else if (Ancho > 1300 && Ancho < 1399) {

document.getElementById("ChatCont").style.left = "86%";

} else if (Ancho > 1200 && Ancho < 1299) {

document.getElementById("ChatCont").style.left = "85%";

} else if (Ancho > 1100 && Ancho < 1199) {

document.getElementById("ChatCont").style.left = "84%";

} else if (Ancho > 1000 && Ancho < 1099) {

document.getElementById("ChatCont").style.left = "83%";
} else if (Ancho > 900 && Ancho < 999) {

document.getElementById("ChatCont").style.left = "80%";

} else if (Ancho > 800 && Ancho < 899) {

document.getElementById("ChatCont").style.left = "78%";

} else if (Ancho > 700 && Ancho < 799) {

document.getElementById("ChatCont").style.left = "74%";

} else if (Ancho > 600 && Ancho < 699) {

document.getElementById("ChatCont").style.left = "70%";

} else if (Ancho > 500 && Ancho < 599) {

document.getElementById("ChatCont").style.left = "66%";
document.getElementById("ChatCont").style.top = "90%";

} else if (Ancho > 400 && Ancho < 499) {

document.getElementById("ChatCont").style.left = "62%";
document.getElementById("ChatCont").style.top = "90%";

} else if (Ancho > 300 && Ancho < 399) {

document.getElementById("ChatCont").style.left = "50%";
document.getElementById("ChatCont").style.top = "92%";

} else if (Ancho > 200 && Ancho < 299) {

document.getElementById("ChatCont").style.left = "30%";
document.getElementById("ChatCont").style.top = "92%";

if (Alto < 800) {

document.getElementById("ChatCont").style.top = "90%";
document.querySelector("body").style.paddingBottom = "20%";

const styleOptions = {

botAvatarInitials: 'BT',
accent: '#00809d',
botAvatarBackgroundColor: "#FFFFFF",
botAvatarImage: 'IMG/Fondo1.png',
userAvatarImage: '',
suggestedActionLayout: 'stacked',

};

// Add your BOT token endpoint below


// var theURL =
"https://default9016a401edcd4430a376fda323f8f5.dd.environment.api.powerplatform.com
/powervirtualagents/botsbyschema/cr167_axonDemo/directline/token?api-version=2022-
03-01-preview";

// var environmentEndPoint = theURL.slice(0,


theURL.indexOf('/powervirtualagents'));
// var apiVersion = theURL.slice(theURL.indexOf('api-version')).split('=')[1];
// var regionalChannelSettingsURL =
`${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=$
{apiVersion}`;

// var directline;
// fetch(regionalChannelSettingsURL)
// .then((response) => {
// return response.json();
// })
// .then((data) => {
// directline = data.channelUrlsById.directline;
// })
// .catch(err => console.error("An error occurred: " + err));

// fetch(theURL)
// .then(response => response.json())
// .then(conversationInfo => {
// window.WebChat.renderWebChat(
// {
// directLine: window.WebChat.createDirectLine({
// domain: `${directline}v3/directline`,
// token: conversationInfo.token,
// }),
// styleOptions
// },
// document.getElementById('webchat')
// );
// })
// .catch(err => console.error("An error occurred: " + err));

function AbrirChat() {

if (Ancho > 1199) {

if (click == 1) {

document.getElementById("heading").style.visibility = "visible";
document.getElementById("webchat").style.height = "calc(80% - 50px)";
document.getElementById("webchat").style.border = "1px solid black";
document.getElementById("slide-control1").style.visibility = "hidden";
document.getElementById("webchat").style.width = "30%";
document.getElementById("chatContainer").style.left = "60%";
document.getElementById("heading").style.width = "151%";

click = click + 1;

} else {

document.getElementById("heading").style.visibility = "hidden";
document.getElementById("webchat").style.height = "0%";
document.getElementById("webchat").style.border = "transparent";
document.getElementById("slide-control1").style.visibility = "visible"

click = 1;

} else if (Ancho > 1000 && Ancho < 1200) {

if (click == 1) {

document.getElementById("heading").style.visibility = "visible";
document.getElementById("webchat").style.height = "calc(80% - 50px)";
document.getElementById("webchat").style.border = "1px solid black";
document.getElementById("slide-control1").style.visibility = "hidden"
document.getElementById("webchat").style.width = "40%";
document.getElementById("chatContainer").style.width = "40%";

click = click + 1;

} else {

document.getElementById("heading").style.visibility = "hidden";
document.getElementById("webchat").style.height = "0%";
document.getElementById("webchat").style.border = "transparent";
document.getElementById("slide-control1").style.visibility = "visible"

click = 1;

} else if (Ancho < 1000 && Ancho > 499) {

if (click == 1) {

document.getElementById("heading").style.visibility = "visible";
document.getElementById("webchat").style.height = "calc(80% - 50px)";
document.getElementById("webchat").style.width = "60%";
document.getElementById("chatContainer").style.width = "60%";
document.getElementById("chatContainer").style.left = "35%";
document.getElementById("webchat").style.border = "1px solid black";
document.getElementById("slide-control1").style.visibility = "hidden"

click = click + 1;

} else {

document.getElementById("heading").style.visibility = "hidden";
document.getElementById("webchat").style.height = "0%";
document.getElementById("webchat").style.border = "transparent";
document.getElementById("slide-control1").style.visibility = "visible"
click = 1;

} else if (Ancho < 500 && Ancho > 200) {

if (click == 1) {

document.getElementById("heading").style.visibility = "visible";
document.getElementById("webchat").style.height = "calc(80% - 50px)";
document.getElementById("webchat").style.width = "80%";
document.getElementById("chatContainer").style.width = "80%";
document.getElementById("chatContainer").style.left = "10%";
document.getElementById("webchat").style.border = "1px solid black";
document.getElementById("slide-control1").style.visibility = "hidden"
document.getElementById("slide-indicador").style.visibility = "hidden"
click = click + 1;

} else {

document.getElementById("heading").style.visibility = "hidden";
document.getElementById("webchat").style.height = "0%";
document.getElementById("webchat").style.border = "transparent";
document.getElementById("slide-control1").style.visibility = "visible"
document.getElementById("slide-indicador").style.visibility = "visible"

click = 1;

(async function main() {


// This is for obtaining Direct Line token from the bot.

// const { token } =
'B_8PDH86rzI.a96LOOirEpdlul2zRdr7ZD67AiZLecUHOccHUwYRpW0';

// Triggers bot with initial message, in order to have greeting message


render on load.
const store = WebChat.createStore({}, ({ dispatch }) => next => action => {
const { type } = action;
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'startConversation',
type: 'event',
value: { text: "hi" }
}
});
}
return next(action);
});

window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({ token:
'B_8PDH86rzI.a96LOOirEpdlul2zRdr7ZD67AiZLecUHOccHUwYRpW0' }),
styleOptions,
store,
userID: 'YOUR_USER_ID',
username: 'Web Chat User',
locale: 'en-US'
},
document.getElementById('webchat')
);
})().catch(err => console.error(err));

</script>

</body>

</html>

You might also like