LASIK Chatbot Widget - Developer Guide

Complete installation instructions for integrating the Eisner Laser Center LASIK chatbot widget into any website or landing page.

Live Demo

Test the widget

Quick Start

3 simple steps

Mobile Ready

Fully responsive

Customize

Styling options

Widget Features

Interactive LASIK assistant with comprehensive patient engagement tools

👁️

LASIK Candidacy Assessment

Interactive quiz to determine if users are good candidates for LASIK surgery

💰

Cost Savings Calculator

Calculates lifetime savings from LASIK vs. glasses/contacts

📅

Consultation Scheduler

Schedule virtual consultations with Dr. Eisner

🚀 Quick Installation (3 Steps)

Step 1: Add CSS Styles

Copy this CSS to your website's stylesheet or add in <style> tags

.lasik-chatbot-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
}

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

.lasik-chatbot-button:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.6);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.lasik-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
    width: 280px;
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.lasik-chatbot-widget:hover .lasik-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lasik-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: white;
    transform: rotate(45deg);
}

.lasik-tooltip-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.lasik-tooltip-icon {
    width: 20px;
    height: 20px;
    background: #3b82f6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
}

.lasik-tooltip-title {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.875rem;
}

.lasik-tooltip-description {
    color: #6b7280;
    font-size: 0.75rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .lasik-tooltip {
        width: 240px;
    }
    .lasik-chatbot-widget {
        bottom: 20px;
        right: 20px;
    }
}

Step 2: Add HTML Widget

Place this HTML before your closing </body> tag

<!-- LASIK Chatbot Widget -->
<div class="lasik-chatbot-widget">
    <div class="lasik-tooltip">
        <div class="lasik-tooltip-header">
            <div class="lasik-tooltip-icon">👁️</div>
            <div class="lasik-tooltip-title">Eisner LASIK Assistant</div>
        </div>
        <div class="lasik-tooltip-description">
            Check your candidacy, calculate savings, and schedule a consultation
        </div>
    </div>
    <button class="lasik-chatbot-button" onclick="openLasikChatbot()">
        👁️
    </button>
</div>

Step 3: Add JavaScript

Add this JavaScript before your closing </body> tag

function openLasikChatbot() {
    const popup = window.open(
        'https://same-3opcja8mcjw-latest.netlify.app/widget',
        'lasik-chatbot',
        'width=1000,height=700,scrollbars=yes,resizable=yes,status=yes'
    );

    if (popup) {
        popup.focus();
    }
}

📱 Integration Options

Popup Window

Recommended - Default option

✅ Easy to implement
✅ Doesn't interfere with site
✅ Works on all browsers
✅ Users can multitask

New Tab

Simple alternative

Replace the JavaScript with:

function openLasikChatbot() {
  window.open('https://same-3opcja8mcjw-latest.netlify.app/widget', '_blank');
}

Modal Overlay

Most integrated experience

More complex but better UX

🔧 Platform-Specific Instructions

WordPress

CSS: Add to theme's style.css file

HTML: Use Custom HTML widget

JS: Add to functions.php or use "Insert Headers and Footers" plugin

Shopify

CSS: Add to assets/theme.css.liquid

HTML & JS: Add to layout/theme.liquid before </body>

Squarespace

CSS: Design → Custom CSS

HTML & JS: Settings → Advanced → Code Injection (Footer)

Wix

Method: Use HTML embed component

Code: Combine CSS, HTML, and JS in one embed

🎨 Customization Options

Position

.lasik-chatbot-widget {
  bottom: 24px;  /* Distance from bottom */
  right: 24px;   /* Distance from right */
  /* left: 24px; for left side */
}

Colors

.lasik-chatbot-button {
  background: linear-gradient(135deg,
    #your-color-1, #your-color-2);
}

.lasik-tooltip-icon {
  background: #your-color;
}

Size

.lasik-chatbot-button {
  width: 80px;      /* Larger button */
  height: 80px;
  font-size: 2rem;  /* Larger icon */
}

📊 Technical Details

Framework & Technology

• Built with Next.js and React
• Styled with Tailwind CSS
• Pure CSS and vanilla JavaScript for widget
• No external dependencies required

Compatibility

• All modern browsers (Chrome, Firefox, Safari, Edge)
• Fully responsive - works on all devices
• Mobile-optimized for iOS and Android
• Works with all major website platforms

Chatbot URL

https://same-3opcja8mcjw-latest.netlify.app/widget

📅 Booking Integration

All consultation booking buttons automatically link to:

https://api.leadconnectorhq.com/widget/booking/WUn2J67o4HrMRf2YGr0C

🛠️ Troubleshooting

Widget Not Appearing

• Check that CSS is loaded properly

• Ensure z-index is high enough (current: 1000)

• Verify HTML is in the <body> tag

Popup Blocked

• Some browsers block popups by default

• Consider using the Modal Overlay option for better compatibility

• Users may need to allow popups for your site

Mobile Issues

• Ensure viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">

• Test on actual devices, not just browser dev tools

• Check for CSS conflicts with existing mobile styles

📄 Complete Documentation

Download the complete installation guide as a markdown file to share with your development team.

Live Demo: https://same-3opcja8mcjw-latest.netlify.app/widget

For technical support or customization requests, contact your development team.