One Stop Auto Repair Chat Widget

A customizable live chat widget for auto repair quote requests

Live Demo

This chat widget helps customers submit auto repair quote requests. Click the chat button in the bottom-right corner to try it out.

Hi 👋, can we help you with a repair quote today?

Installation Instructions

To add this chat widget to your website, add the following code right before the closing </body> tag:

<script>
// Load the chat widget asynchronously after the page content
window.addEventListener('load', function() {
  // Delay chat widget loading to prioritize main content
  setTimeout(function() {
    // Load CSS
    const chatStyles = document.createElement('link');
    chatStyles.rel = 'stylesheet';
    chatStyles.href = 'https://one-stop-chat-bot.pages.dev/widget/styles.css';
    document.head.appendChild(chatStyles);
    
    // Add HTML structure
    const chatContainer = document.createElement('div');
    document.body.appendChild(chatContainer);
    
    // Inject HTML
    chatContainer.innerHTML = \`
      <div id="my-chat-widget-root">
        <button id="chat-widget-button">💬</button>
        <div id="chat-widget-container">
          <div id="chat-widget-header">
            <span>Chat</span>
            <button id="chat-widget-close">✖</button>
          </div>
          <div id="chat-widget-body">
            <p style="margin-bottom: 20px; color: #211d16;"><strong>Hi 👋, can we help you with a repair quote today?</strong></p>
          </div>
          <div id="chat-widget-footer">
            <button id="image-upload-button">📷</button>
            <input type="text" id="chat-widget-input" placeholder="Type your message here...">
            <button id="chat-widget-send">Send</button>
          </div>
          <div id="file-preview">
            <div id="preview-content"></div>
            <div id="file-name"></div>
            <div class="preview-buttons">
              <button class="preview-button cancel" id="cancel-upload">Cancel</button>
              <button class="preview-button" id="confirm-upload">Send Image</button>
            </div>
          </div>
          <input type="file" id="image-upload" accept="image/*">
        </div>
        <div id="chat-debug-panel"></div>
      </div>
    \`;
    
    // Load script last
    const chatScript = document.createElement('script');
    chatScript.src = "https://one-stop-chat-bot.pages.dev/widget/script.js";
    chatScript.defer = true;
    document.body.appendChild(chatScript);
    
  }, 1500);
});
</script>

Features

Collect customer auto repair information through a friendly chat interface
Image upload capability for damage photos
Form filling with auto-extraction of customer data
Robust error handling with automatic retries
Works with most websites including WordPress, Shopify, and custom sites

File Structure

/widget/styles.css - Chat widget styling
/widget/script.js - Chat widget functionality
/widget/chat-widget.html - Chat widget HTML template

Configuration

The chat widget connects to your n8n webhook endpoints for processing customer requests. You can configure the webhook URLs by modifying the config object in the script.