Embedding Navless Chat
Follow the instructions to copy the base embed code from Embedding Navless (HTML)
Use the embed code below where you want the chat embedded.
Styles are optional, but are a starting point if desired.
You can use your own HTML, the key pieces to include are
The Form onSubmit handler
class and id of
"tg-textarea"on the text inputclass and onClick handler for the mic icon (if desired)
class="tg-mic-btn" onclick="window.Navless?.toggleMic(this)"
<style>
* {
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
sans-serif;
}
.tg-chat-input {
width: calc(100% - 32px);
margin: 16px;
padding: 16px;
border-radius: 12px;
box-shadow:
-4px -4px 24px rgba(0, 0, 0, 0.05),
-4px 12px 20px rgba(0, 0, 0, 0.06),
4px 0 12px rgba(0, 0, 0, 0.02);
border: 1px solid #d9d9d9;
background-color: #fff;
position: relative;
}
.tg-textarea-container {
position: relative;
width: 100%;
display: flex;
}
.tg-textarea {
background-color: #f5f5f5;
border-radius: 40px;
padding: 16px 104px 16px 16px;
width: 100%;
min-height: 54px;
max-height: 150px;
line-height: 22.4px;
font-size: 16px;
resize: none;
border: none;
outline: none;
margin: 0px;
vertical-align: baseline;
box-sizing: border-box;
scrollbar-width: none;
}
.tg-mic-btn,
.tg-send-btn {
transition: opacity 0.2s;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 32px;
border: none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
80% {
opacity: 0.8;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
.tg-mic-btn {
right: 56px;
background-color: transparent;
color: #b2b2b2;
&:hover {
opacity: 0.8;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
&.recording {
background-color: #202020;
color: #ffffff;
&::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border: 1px solid rgba(53, 118, 119, 0.85);
border-radius: 50%;
transform: translate(-50%, -50%) scale(1);
animation: pulse 1.5s ease-out infinite;
pointer-events: none;
}
}
}
.tg-mic-btn .mic-default {
display: inline;
}
.tg-mic-btn .mic-recording {
display: none;
}
.tg-mic-btn.recording .mic-default {
display: none;
}
.tg-mic-btn.recording .mic-recording {
display: inline;
}
.tg-send-btn {
right: 8px;
background-color: #357677;
color: white;
&:hover {
opacity: 0.8;
}
&:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
}
</style>
<form
class="tg-chat-input"
onsubmit="
event.preventDefault();
const textarea = this.querySelector('textarea');
const input = textarea.value.trim();
if (!input) return;
window.Navless?.sendChatInput(input);
textarea.value = '';
textarea.height = '54px';
"
>
<div class="tg-textarea-container" style="position: relative; width: 100%">
<textarea
id="tg-textarea"
class="tg-textarea"
placeholder="I want to learn about..."
rows="1"
oninput="
const sendBtn = this.parentNode.querySelector('.tg-send-btn');
this.style.height = 'auto';
this.style.height = this.value
? Math.min(this.scrollHeight, 150) + 'px'
: '54px';
sendBtn.disabled = this.value.trim() === '';
"
onkeydown="
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
this.parentNode.querySelector('.tg-send-btn').click();
}
"
></textarea>
<button type="button" class="tg-mic-btn" onclick="window.Navless?.toggleMic(this)">
<svg
class="mic-default"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
aria-label=""
class="icon"
font-size="inherit"
>
<path
d="M15.7806 10.1963C16.1326 10.3011 16.3336 10.6714 16.2288 11.0234L16.1487 11.2725C15.3429 13.6262 13.2236 15.3697 10.6644 15.6299L10.6653 16.835H12.0833L12.2171 16.8486C12.5202 16.9106 12.7484 17.1786 12.7484 17.5C12.7484 17.8214 12.5202 18.0894 12.2171 18.1514L12.0833 18.165H7.91632C7.5492 18.1649 7.25128 17.8672 7.25128 17.5C7.25128 17.1328 7.5492 16.8351 7.91632 16.835H9.33527L9.33429 15.6299C6.775 15.3697 4.6558 13.6262 3.84992 11.2725L3.76984 11.0234L3.74445 10.8906C3.71751 10.5825 3.91011 10.2879 4.21808 10.1963C4.52615 10.1047 4.84769 10.2466 4.99347 10.5195L5.04523 10.6436L5.10871 10.8418C5.8047 12.8745 7.73211 14.335 9.99933 14.335C12.3396 14.3349 14.3179 12.7789 14.9534 10.6436L15.0052 10.5195C15.151 10.2466 15.4725 10.1046 15.7806 10.1963ZM12.2513 5.41699C12.2513 4.17354 11.2437 3.16521 10.0003 3.16504C8.75675 3.16504 7.74835 4.17343 7.74835 5.41699V9.16699C7.74853 10.4104 8.75685 11.418 10.0003 11.418C11.2436 11.4178 12.2511 10.4103 12.2513 9.16699V5.41699ZM13.5814 9.16699C13.5812 11.1448 11.9781 12.7479 10.0003 12.748C8.02232 12.748 6.41845 11.1449 6.41828 9.16699V5.41699C6.41828 3.43889 8.02221 1.83496 10.0003 1.83496C11.9783 1.83514 13.5814 3.439 13.5814 5.41699V9.16699Z"
></path>
</svg>
<svg
class="mic-recording"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z"
fill="currentColor"
stroke="currentColor"
stroke-width="1.6"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<button type="submit" class="tg-send-btn" disabled>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.4585 5.625L16.0418 10L11.4585 14.375M15.8335 10H3.9585"
stroke="#ffffff"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
</form>
Last updated
Was this helpful?