Embedding Navless Chat | Navless Product Documentation

The Navless product documentation provides detailed instructions and example HTML/CSS embed code for integrating a customizable Navless chat widget into a website, highlighting essential elements like the form submission handler, specific class and ID attributes for the text input, and optional microphone button functionality with styling guidelines.

1.
Follow the instructions to copy the base embed code from Embed Navless on a Custom Website.
2.
Use the embed code below where you want the chat embedded.

Key Points for Custom HTML

Styles are optional, but are a starting point if desired.
You can use your own HTML, but the key pieces to include are:
1. 1.The Form onSubmit handler
2. 2.class and id of tg-textarea on the text input
3. 3.
  class and onClick handler for the mic icon (if desired):
```
class="tg-mic-btn" onclick="window.Navless?.toggleMic(this)"
```

Example Embed Code

<style>
  .tg-chat-input {
    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;
    padding: 0;
  }

  @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)">
      <!-- Mic SVGs here -->
    </button>

    <button type="submit" class="tg-send-btn" disabled>
      <!-- Send SVG here -->
    </button>
  </div>
</form>

Note: Replace the SVG comments with the actual SVG code as needed for your implementation.