<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
type="image/x-icon"
href="/static/images/favicon.ico"
/>
<title>botario</title>
</head>
<style>
body {
--skeleton-grey: #f0f0f0;
background-color: rgb(234, 234, 234);
margin: 0 !important;
}
.skeleton {
animation: none !important;
background-color: lightgray;
}
.skeleton-text {
width: 100%;
height: 0.5rem;
margin-bottom: 0.5rem;
border-radius: 0.125rem;
}
.skeleton-text:last-of-type {
width: 75%;
margin-bottom: 0;
}
.py-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
.p-3 {
padding: 1rem !important;
}
.mb-3 {
margin-bottom: 1rem !important;
}
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-top: var(--bs-gutter-y);
}
@media (min-width: 768px) {
.col-md-3 {
flex: 0 0 auto;
width: 25%;
}
}
.col {
flex: 1 0 0%;
}
.gap-2 {
gap: 0.5rem !important;
}
.d-flex {
display: flex !important;
}
.card {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.03);
padding: 20px;
position: relative;
display: flex;
flex-direction: column;
gap: 1.5rem;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid #e7e7e7;
border-radius: 0.3rem;
margin-bottom: 1.5rem;
}
.container {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
margin-right: auto;
margin-left: auto;
height: calc(100vh);
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1320px;
}
}
.demoFont {
font-family: Arial, Helvetica, sans-serif;
margin-top: 10px;
font-size: 15px;
color:#ababab;
text-transform: uppercase;
}
</style>
<body>
<div class="container">
<!-- Content here -->
<!--
<div class="header">
<svg height="20" width="80">
<circle cx="25" cy="9" r="6" fill="#ff5f57" />
<circle cx="45" cy="9" r="6" fill="#febc2e" />
<circle cx="65" cy="9" r="6" fill="#28c840" />
</svg>
</div>
-->
<div class="container py-4">
<div class=" p-3 mb-3">
<div
class=" mb-2"
style="width: 100%"
>
<div class="card p-3 mb-3">
<div
class="skeleton mb-2"
style="height: 20px; width: 100%"
></div>
<div
class="skeleton"
style="height: 16px; width: 80%"
></div>
</div>
</div>
<div class="row">
<!-- Sidebar card -->
<!-- Main content -->
<div class="col">
<div class="card d-flex flex-column gap-4 mb-3">
<div
class="d-flex gap-2"
style="width: 100%"
>
<div
class="skeleton"
style="
border-radius: 50%;
background-color: lightgrey;
width: 40px;
height: 40px;
"
></div>
<div style="width: 30%; height: 10px; padding-top: 2px">
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
</div>
</div>
<div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
</div>
</div>
<div class="mb-3" style="height: 500px;">
<botario-chat bot-id="68add9f7374f5fc767560c48" api-url="https://gpt.nfon.botario.com/static/chat-client/"></botario-chat>
</div>
<div class="card d-flex flex-column gap-4 mb-3">
<div
class="d-flex gap-2"
style="width: 100%"
>
<div
class="skeleton"
style="
border-radius: 50%;
background-color: lightgrey;
width: 40px;
height: 40px;
"
></div>
<div style="width: 30%; height: 10px; padding-top: 2px">
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
</div>
</div>
<div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
</div>
</div>
<div class="card d-flex flex-column gap-4 mb-3">
<div
class="d-flex gap-2"
style="width: 100%"
>
<div
class="skeleton"
style="
border-radius: 50%;
background-color: lightgrey;
width: 40px;
height: 40px;
"
></div>
<div style="width: 30%; height: 10px; padding-top: 2px">
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
</div>
</div>
<div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
</div>
</div>
<div class="card d-flex flex-column gap-4 mb-3">
<div
class="d-flex gap-2"
style="width: 100%"
>
<div
class="skeleton"
style="
border-radius: 50%;
background-color: lightgrey;
width: 40px;
height: 40px;
"
></div>
<div style="width: 30%; height: 10px; padding-top: 2px">
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
</div>
</div>
<div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-text"></div>
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="card p-3">
<div
class="skeleton skeleton-circle"
style="width: 120px; height: 120px"
>
<img style="width: 100%" src="data:image/png;base64,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" alt="QR Code" />
</div>
<div
class=" demoFont"
>
Scan to test on your mobile device
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="module" src="https://gpt.nfon.botario.com/static/chat-widget/chat-widget.js"></script>
</html>
)
Customer Experience & Contact Center
Explore NFON Chatbot for Utilities
)
Success Stories & Insights
Support as a Service from NFON
Support as a Service (SaaS) from NFON UK is a subscription-based support offering designed for Partners who may have limited internal resources or no…
)
Customer Experience & Contact Center
Personalisation with Principles: Trust, Sustainability and the New Loyalty
Personalisation used to mean “Dear First-Name.” Today, travellers expect recognition across channels and timely, relevant help—balanced with clear…
)
Customer Experience & Contact Center
Built for Disruption: Automation That Protects Revenue (and CSAT)
Disruptions are the stress test for every travel brand. Weather, ATC restrictions, ship delays, strikes—each can trigger spikes across voice, chat,…