LASIK Chatbot Widget

Complete Developer Installation Guide

🚀 Quick Start

What This Widget Does:

• LASIK candidacy assessment quiz
• Cost savings calculator
• Direct consultation scheduling
• Mobile-optimized interface
• Professional medical branding

⚡

Easy Installation

Just copy & paste the HTML code

📱

Mobile Ready

Optimized for all devices

🎨

Customizable

Match your website's style

💻 Method 1: Basic HTML (Universal)

Works with any website, CMS, or platform. Simply add this code before the closing </body> tag.

<!-- LASIK Chatbot Widget -->
<div id="lasik-chatbot-container"></div>

<!-- Widget Styles -->
<style>
  .chatbot-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
  }

  .widget-container {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .widget-label {
    background: white;
    color: #374151;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
  }

  .chat-button {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: white;
    font-size: 24px;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }

  .chat-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
  }

  .hover-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    width: 288px;
    background: #2563eb;
    color: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border: 2px solid #3b82f6;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    transform: scale(0.95);
  }

  .hover-tooltip::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 32px;
    transform: translateY(50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #2563eb;
    border-right: 2px solid #3b82f6;
    border-bottom: 2px solid #3b82f6;
  }

  .chatbot-widget:hover .hover-tooltip {
    opacity: 1;
    transform: scale(1);
  }

  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }

  .modal.active {
    display: flex;
  }

  .modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    height: 600px;
    position: relative;
    overflow: hidden;
  }

  .modal-header {
    background: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .widget-iframe {
    width: 100%;
    height: calc(100% - 60px);
    border: none;
  }
</style>

<!-- Widget HTML -->
<div class="chatbot-widget">
  <div class="widget-container">
    <!-- Always visible "Lasik Help" label -->
    <div class="widget-label">
      Lasik Help
    </div>

    <!-- Chat button -->
    <button class="chat-button" onclick="openChatbot()">
      👁️
    </button>
  </div>

  <!-- Hover tooltip -->
  <div class="hover-tooltip">
    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
      <span style="font-size: 20px;">👁️</span>
      <span style="font-weight: bold; font-size: 18px;">LASIK Consultation Assistant</span>
    </div>
    <p style="font-size: 14px; line-height: 1.4; margin: 0; color: #dbeafe;">
      Get personalized LASIK guidance: Check your candidacy, calculate potential savings, and schedule a free consultation with Dr. Eisner
    </p>
  </div>
</div>

<div id="chatbot-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h3 style="margin: 0; font-size: 18px;">LASIK Consultation Assistant</h3>
      <button class="close-btn" onclick="closeChatbot()">×</button>
    </div>
    <iframe
      id="chatbot-iframe"
      class="widget-iframe"
      src="https://same-xkkneci4j32-latest.netlify.app/">
    </iframe>
  </div>
</div>

<!-- Widget JavaScript -->
<script>
  function openChatbot() {
    document.getElementById('chatbot-modal').classList.add('active');
    document.body.style.overflow = 'hidden';
  }

  function closeChatbot() {
    document.getElementById('chatbot-modal').classList.remove('active');
    document.body.style.overflow = 'auto';
  }

  // Close modal when clicking outside
  document.getElementById('chatbot-modal').addEventListener('click', function(e) {
    if (e.target === this) {
      closeChatbot();
    }
  });

  // Close modal with Escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      closeChatbot();
    }
  });
</script>

⚠️ Important: Replace https://same-xkkneci4j32-latest.netlify.app/ with your actual deployed chatbot URL.

🔌 Method 2: WordPress Integration

Add this code to your theme's functions.php file or create a custom plugin.

<?php
// Add this to your theme's functions.php file

function add_lasik_chatbot_widget() {
    ?>
    <!-- LASIK Chatbot Widget -->
    <div class="chatbot-widget">
      <div class="widget-container">
        <!-- Always visible "Lasik Help" label -->
        <div class="widget-label">
          Lasik Help
        </div>

        <!-- Chat button -->
        <button class="chat-button" onclick="openChatbot()">
          👁️
        </button>
      </div>

      <!-- Hover tooltip -->
      <div class="hover-tooltip">
        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
          <span style="font-size: 20px;">👁️</span>
          <span style="font-weight: bold; font-size: 18px;">LASIK Consultation Assistant</span>
        </div>
        <p style="font-size: 14px; line-height: 1.4; margin: 0; color: #dbeafe;">
          Get personalized LASIK guidance: Check your candidacy, calculate potential savings, and schedule a free consultation with Dr. Eisner
        </p>
      </div>
    </div>

    <div id="chatbot-modal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <h3 style="margin: 0; font-size: 18px;">LASIK Consultation Assistant</h3>
          <button class="close-btn" onclick="closeChatbot()">×</button>
        </div>
        <iframe
          id="chatbot-iframe"
          class="widget-iframe"
          src="<?php echo esc_url('https://same-xkkneci4j32-latest.netlify.app/'); ?>">
        </iframe>
      </div>
    </div>

    <style>
      /* Add the CSS from above here */
    </style>

    <script>
      /* Add the JavaScript from above here */
    </script>
    <?php
}

// Hook to add widget to footer
add_action('wp_footer', 'add_lasik_chatbot_widget');
?>

⚛️ Method 3: React Component

For React applications, use this component. Requires Tailwind CSS.

import React, { useState } from 'react';

const LASIKChatbotWidget = () => {
  const [isOpen, setIsOpen] = useState(false);

  const openChatbot = () => {
    setIsOpen(true);
    document.body.style.overflow = 'hidden';
  };

  const closeChatbot = () => {
    setIsOpen(false);
    document.body.style.overflow = 'auto';
  };

  return (
    <>
      {/* Chat Button */}
      <div className="fixed bottom-5 right-5 z-[9999] group">
        <div className="flex items-center gap-3">
          {/* Always visible "Lasik Help" label */}
          <div className="bg-white text-gray-800 px-3 py-2 rounded-lg shadow-lg border font-medium text-sm whitespace-nowrap">
            Lasik Help
          </div>

          {/* Chat button */}
          <button
            onClick={openChatbot}
            className="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-blue-600
                       border-none cursor-pointer shadow-lg flex items-center justify-center
                       transition-all duration-300 text-white text-2xl
                       hover:scale-110 hover:shadow-xl animate-pulse"
          >
            👁️
          </button>
        </div>

        {/* Hover tooltip */}
        <div className="absolute bottom-full right-0 mb-2 w-72 bg-blue-600 text-white rounded-lg shadow-xl p-4 border-2 border-blue-500
                        opacity-0 pointer-events-none transition-all duration-300 group-hover:opacity-100 group-hover:scale-105
                        after:content-[''] after:absolute after:bottom-0 after:right-8 after:transform after:translate-y-1/2 after:rotate-45
                        after:w-3 after:h-3 after:bg-blue-600 after:border-r-2 after:border-b-2 after:border-blue-500">
          <div className="flex items-center gap-2 mb-2">
            <span className="text-xl">👁️</span>
            <span className="font-bold text-lg">LASIK Consultation Assistant</span>
          </div>
          <p className="text-sm text-blue-100 leading-relaxed m-0">
            Get personalized LASIK guidance: Check your candidacy, calculate potential savings, and schedule a free consultation with Dr. Eisner
          </p>
        </div>
      </div>

      {/* Modal */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[10000]"
          onClick={closeChatbot}
        >
          <div
            className="bg-white rounded-xl w-[90%] max-w-md h-[600px] relative overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="bg-gradient-to-r from-sky-600 to-cyan-600 text-white p-4 flex justify-between items-center">
              <h3 className="text-lg font-semibold m-0">LASIK Consultation Assistant</h3>
              <button
                onClick={closeChatbot}
                className="bg-transparent border-none text-white text-2xl cursor-pointer
                           w-8 h-8 flex items-center justify-center rounded-full
                           hover:bg-white hover:bg-opacity-20"
              >
                ×
              </button>
            </div>
            <iframe
              src="https://same-xkkneci4j32-latest.netlify.app/"
              className="w-full h-[calc(100%-60px)] border-none"
              title="LASIK Chatbot"
            />
          </div>
        </div>
      )}
    </>
  );
};

export default LASIKChatbotWidget;

⚙️ Configuration Options

🎨 Styling Customization

.chat-button

Customize button size, colors, position

.tooltip

Modify hover text and appearance

.modal-content

Adjust modal size and positioning

🔧 Technical Settings

Z-Index:

Widget: 9999, Modal: 10000

Position:

Fixed bottom-right (customizable)

Mobile:

Responsive and touch-friendly

📍 Positioning Options

Change Widget Position

Bottom Left:

bottom: 20px;
left: 20px; /* instead of right */

Top Right:

top: 20px; /* instead of bottom */
right: 20px;

Center Bottom:

bottom: 20px;
left: 50%;
transform: translateX(-50%);

Custom Offset:

bottom: 80px; /* More space from bottom */
right: 30px; /* More space from edge */

🌐 Current Deployment Information

📋 Chatbot Details

Current URL: https://same-xkkneci4j32-latest.netlify.app/

Booking System: ✅ Active

Mobile Optimized: ✅ Yes

SSL Secure: ✅ Yes

🎯 Features Included

✅ LASIK Candidacy Quiz

✅ Cost Savings Calculator

✅ Consultation Scheduler

✅ Professional Branding

✅ Lead Generation

🧪 Testing & Verification

✅ Installation Checklist

Widget button appears in bottom-right cornerTooltip shows on hoverModal opens when button is clickedChatbot loads inside modalModal closes with X button or ESC keyWorks on mobile devices

🐛 Troubleshooting

Widget not appearing?

Check that the code is placed before the closing </body> tag and ensure no CSS conflicts.

Modal not opening?

Verify JavaScript is enabled and check browser console for errors.

Chatbot not loading?

Confirm the iframe src URL is correct and accessible.

💬 Support & Customization

Need Help?

📧 Technical Support

For implementation questions, customization requests, or technical issues.

🎨 Design Customization

Match your brand colors, adjust sizing, or modify the user experience.

Latest Version: All code above includes the latest booking integration and mobile optimizations.