This is urgent

Hi,

You can check this to get started with Metronic.

In order to add your sass global you just need to create your sass file in src/sass/layout/_support-chat.scss in order to include your CSS code globally within the bundle CSS file assets/css/style.bundle.css.

To add global JS code you can add your JS script in src/js/layout and it will be compiled into assets/js/scripts.bundle.js.

Under src/js/custom you can add custom scripts and get them compiled into src/js/custom

Then recompile your assets folder with Gulp

Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.

Regards

Whenver I put custom HTML in index.html it disurpts the theme and I cannot get this to be displayed:

<!--begin::support-chat-->
<div class="support-chat-container">
<div class="container-fluid support-chat">
<div class="card bg-white">
<div class="card-header d-flex flex-between-center px-4 py-3 border-bottom">
<h5 class="mb-0 d-flex align-items-center gap-2">Thames Bridge Council Support<span class="fa-solid fa-circle text-success fs--3"></span></h5>
<div class="btn-reveal-trigger">
<button class="btn btn-link p-0 dropdown-toggle dropdown-caret-none transition-none d-flex" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h text-900"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2" aria-labelledby="support-chat-dropdown"><a class="dropdown-item" href="#!">Request a callback</a><a class="dropdown-item" href="#!">Search in chat</a><a class="dropdown-item" href="#!">Show history</a><a class="dropdown-item" href="#!">Report to Admin</a><a class="dropdown-item btn-support-chat" href="#!">Close Support</a></div>
</div>
</div>
<div class="card-body chat p-0">
<div class="d-flex flex-column-reverse scrollbar h-100 p-3">
<div class="text-end mt-6"><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-1100 hover-bg-soft rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semi-bold fs--1">I need to book a Housing Repair</p><span class="fa-solid fa-paper-plane text-primary fs--1 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-1100 hover-bg-soft rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semi-bold fs--1">I need to reschedule a Housing Repair</p><span class="fa-solid fa-paper-plane text-primary fs--1 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-1100 hover-bg-soft rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semi-bold fs--1">I have a problem with a previous Housing Repair</p><span class="fa-solid fa-paper-plane text-primary fs--1 ms-3"></span>
</a><a class="false d-inline-flex align-items-center text-decoration-none text-1100 hover-bg-soft rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semi-bold fs--1">I need information on Housing Repairs</p><span class="fa-solid fa-paper-plane text-primary fs--1 ms-3"></span>
</a>
</div>
<div class="text-center mt-auto">
<div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-white" src="assets/img/prince_dwain.webp" alt="" /></div>
<h5 class="mt-2 mb-3">Dwain Nicely</h5>
<p class="text-center text-black mb-0">Ask us anything – we’ll get back to you here or by email within 24 hours.</p>
</div>
</div>
</div>
<div class="card-footer d-flex align-items-center gap-2 border-top ps-3 pe-4 py-3">
<button class="btn p-0 border-0 mic-btn"><span class="fa-solid fa-microphone fs--1"></span></button>
<div class="d-flex align-items-center flex-1 gap-3 border rounded-pill px-4">
<input class="form-control outline-none border-0 flex-1 fs--1 px-0" type="text" placeholder="Write message" />
<label class="btn btn-link d-flex p-0 text-500 fs--1 border-0" for="supportChatPhotos"><span class="fa-solid fa-image"></span></label>
<input class="d-none" type="file" accept="image/*" />
<label class="btn btn-link d-flex p-0 text-500 fs--1 border-0" for="supportChatAttachment"> <span class="fa-solid fa-paperclip"></span></label>
<input class="d-none" type="file" />
<label class="btn btn-link d-flex p-0 text-500 fs--1 border-0" for="supportChatCamera"> <span class="fa-solid fa-camera"></span></label>
<input class="d-none" type="file" accept="image/*, video/*" />
</div>
<button class="btn p-0 border-0 send-btn" ><span class="fa-solid fa-paper-plane fs--1"></span></button>
</div>
<video class="d-none"></video>
<canvas class="d-none"></canvas>
</div>
</div>
<button class="btn p-0 border border-200 btn-support-chat"><span class="fs-0 btn-text text-primary text-nowrap">Question?</span><span class="fa-solid fa-circle text-success fs--1 ms-2"></span><span class="fa-solid fa-chevron-down text-primary fs-1"></span></button>
</div>
<!--end::support-chat-->


craft/theme/dist/assets/css/style.bundle.css:

upport-chat-container {
display: none;
}
.support-chat-container.show {
display: block;
}

.support-chat {
position: fixed;
bottom: 1.75rem;
right: 0;
max-width: 27.87rem;
width: 100%;
transform: scale(0);
opacity: 0;
transform-origin: bottom right;
z-index: 1045;
transition: 0.3s ease-out;
padding-bottom: 1.75rem;
}
.support-chat-start .support-chat {
right: auto;
left: 0;
transform-origin: bottom left;
}
.support-chat-bottom-lg .support-chat {
bottom: 2.75rem;
}
@media (min-width: 576px) {
.support-chat {
right: 0.75rem;
}
.support-chat-start .support-chat {
left: 0.75rem;
}
}
@media (min-width: 992px) {
.support-chat {
right: 1.25rem;
}
.support-chat-start .support-chat {
left: 1.25rem;
}
}
.support-chat .card {
box-shadow: 0px 0px 32px 0px rgba(36, 40, 46, 0.12);
}
.dark .support-chat .card {
box-shadow: 0px 0px 32px 10px rgba(0, 0, 0, 0.41);
}
.support-chat .card-body {
height: 27rem;
}
.support-chat .card-body.chat.p-0 p {
padding: 10px;
margin: 5px 0;
border-radius: 8px;
max-width: 80%;
}
.support-chat .card-body.chat.p-0 .user-message {
background-color: #e6f7ff;
align-self: flex-end;
}
.support-chat .card-body.chat.p-0 .server-message {
background-color: #f1f1f1;
align-self: flex-start;
}
.support-chat.show-chat {
transform: scale(1);
opacity: 1;
}
.support-chat .send-btn {
width: 37.06px;
height: 37.06px;
border-radius: 50%;
color: var(--bs-primary);
}
.support-chat .send-btn:hover {
background-color: var(--bs-gray-100);
color: var(--bs-primary-500);
}
.support-chat .send-btn:active {
background-color: var(--bs-gray-200);
color: var(--bs-primary-500);
}

.support-chat + .btn-support-chat {
position: fixed;
bottom: 1.5rem;
right: 0.75rem;
width: 9rem;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: var(--bs-white) !important;
z-index: 1045;
border-radius: var(--bs-border-radius-pill);
box-shadow: 0px 0px 32px 0px rgba(36, 40, 46, 0.12);
transition: 0.3s ease;
}
.dark .support-chat + .btn-support-chat {
box-shadow: 0px 0px 32px 10px rgba(0, 0, 0, 0.41);
}
.support-chat-start .support-chat + .btn-support-chat {
right: auto;
left: 0.75rem;
}
.support-chat-bottom-lg .support-chat + .btn-support-chat {
bottom: 2.5rem;
}
@media (min-width: 576px) {
.support-chat + .btn-support-chat {
right: 1.25rem;
}
.support-chat-start .support-chat + .btn-support-chat {
left: 1.25rem;
}
}
@media (min-width: 992px) {
.support-chat + .btn-support-chat {
right: 1.75rem;
}
.support-chat-start .support-chat + .btn-support-chat {
left: 1.75rem;
}
}
.support-chat + .btn-support-chat:hover {
background-color: var(--bs-gray-100) !important;
}
.support-chat + .btn-support-chat .fa-chevron-down {
display: none;
}
.support-chat + .btn-support-chat.btn-chat-close {
border-radius: 50%;
width: 3rem;
}
.support-chat + .btn-support-chat.btn-chat-close .btn-text,
.support-chat + .btn-support-chat.btn-chat-close .fa-circle {
display: none;
}
.support-chat + .btn-support-chat.btn-chat-close .fa-chevron-down {
display: block;
}

UGRENT: I seem to have an incomplete file e.g. assets/js.custom/app/chat/chat.js does not exist