Skip to main content

StayzrChat Widget Guide

Add intelligent guest communication to your website in minutes with the StayzrChat widget.

🚀 Quick Start​

Basic Installation​

Add these three lines to your website:

<!-- Add before closing </body> tag -->
<script src="https://cdn.stayzr.com/chat/widget.js"></script>
<script>
  StayzrChat.init({ propertyId: 'your-property-id' });
</script>

That's it! Your guests can now chat with your AI-powered assistant.

💬 How It Works​

Guest Experience​

  1. Widget appears on your website (customizable position)
  2. Guest asks questions in their preferred language
  3. AI responds instantly with accurate information
  4. Staff joins if needed for complex requests
  5. Conversation continues via WhatsApp after checkout

Behind the Scenes​

🎨 Customization Options​

Basic Configuration​

StayzrChat.init({
  propertyId: 'your-property-id',
  
  // Appearance
  position: 'bottom-right',      // bottom-right | bottom-left
  theme: 'light',                // light | dark | auto
  primaryColor: '#0066CC',       // Your brand color
  
  // Behavior
  greeting: 'Hi! How can I help you today?',
  language: 'en',                // Default language
  autoOpen: false,               // Open automatically
  mobileFullscreen: true,        // Full screen on mobile
  
  // Features
  allowFileUpload: true,         // Let guests send images
  showTypingIndicator: true,     // Show when AI is thinking
  enableVoiceInput: false,       // Voice messages (coming soon)
});

Advanced Styling​

/* Custom CSS Variables */
:root {
  --stayzrchat-primary: #0066CC;
  --stayzrchat-bg: #FFFFFF;
  --stayzrchat-text: #333333;
  --stayzrchat-bubble-guest: #E3F2FD;
  --stayzrchat-bubble-bot: #F5F5F5;
  --stayzrchat-font: 'Inter', sans-serif;
}

/* Widget Container */
.stayzrchat-widget {
  z-index: 9999;
  font-family: var(--stayzrchat-font);
}

🌍 Multi-Language Support​

Automatic Language Detection​

The widget automatically detects the guest's browser language and responds accordingly.

StayzrChat.init({
  propertyId: 'your-property-id',
  language: 'auto',  // Detect from browser
  supportedLanguages: ['en', 'es', 'fr', 'de', 'zh', 'ja']
});

Manual Language Switch​

// Change language programmatically
StayzrChat.setLanguage('es');

// Get current language
const currentLang = StayzrChat.getLanguage();

📊 Context & Personalization​

Pass Guest Information​

StayzrChat.init({
  propertyId: 'your-property-id',
  guest: {
    name: 'John Doe',
    email: 'john@example.com',
    bookingRef: 'ABC123',
    checkIn: '2024-01-20',
    checkOut: '2024-01-25',
    roomNumber: '301'
  }
});

Update Context Dynamically​

// Guest just made a booking
StayzrChat.setContext({
  bookingRef: 'ABC123',
  roomType: 'Deluxe Suite'
});

// Guest logged in
StayzrChat.identify({
  guestId: 'guest_12345',
  name: 'Jane Smith'
});

🔧 API Methods​

Core Methods​

// Initialize widget
StayzrChat.init(config);

// Open/Close widget
StayzrChat.open();
StayzrChat.close();
StayzrChat.toggle();

// Send message programmatically
StayzrChat.sendMessage('Is the pool open?');

// Clear conversation
StayzrChat.clearMessages();

// Destroy widget
StayzrChat.destroy();

Event Handlers​

// Widget opened
StayzrChat.on('open', () => {
  console.log('Chat opened');
  analytics.track('ChatOpened');
});

// Message sent
StayzrChat.on('message:sent', (message) => {
  console.log('Guest sent:', message);
});

// Message received
StayzrChat.on('message:received', (message) => {
  console.log('Bot replied:', message);
});

// Staff joined conversation
StayzrChat.on('staff:joined', (staff) => {
  console.log('Staff member joined:', staff.name);
});

🎯 Use Cases​

Pre-Booking Questions​

// On booking page
StayzrChat.init({
  propertyId: 'your-property-id',
  context: 'booking',
  suggestedQuestions: [
    'What amenities are included?',
    'Is parking available?',
    'What is the cancellation policy?'
  ]
});

During Stay Support​

// On guest portal
StayzrChat.init({
  propertyId: 'your-property-id',
  context: 'in-stay',
  quickActions: [
    { label: 'Room Service', action: 'room-service' },
    { label: 'Housekeeping', action: 'housekeeping' },
    { label: 'Concierge', action: 'concierge' }
  ]
});

Post-Stay Feedback​

// After checkout
StayzrChat.init({
  propertyId: 'your-property-id',
  context: 'post-stay',
  greeting: 'How was your stay with us?',
  feedbackMode: true
});

📈 Analytics Integration​

Google Analytics​

StayzrChat.on('message:sent', (message) => {
  gtag('event', 'chat_message', {
    'event_category': 'engagement',
    'event_label': message.type
  });
});

Custom Analytics​

StayzrChat.init({
  propertyId: 'your-property-id',
  analytics: {
    track: (event, properties) => {
      // Your analytics implementation
      myAnalytics.track(event, properties);
    }
  }
});

🔐 Security & Privacy​

Content Security Policy​

<!-- Add to your CSP header -->
Content-Security-Policy: 
  script-src 'self' https://cdn.stayzr.com;
  connect-src 'self' https://api.stayzr.com wss://chat.stayzr.com;
  frame-src 'self' https://widget.stayzr.com;

GDPR Compliance​

StayzrChat.init({
  propertyId: 'your-property-id',
  privacy: {
    requireConsent: true,
    consentText: 'I agree to the privacy policy',
    dataRetention: 90  // days
  }
});

🎭 A/B Testing​

Test Different Configurations​

const variant = getABTestVariant();

StayzrChat.init({
  propertyId: 'your-property-id',
  greeting: variant === 'A' 
    ? 'Need help booking?' 
    : 'Questions? Chat with us!',
  position: variant === 'A' 
    ? 'bottom-right' 
    : 'bottom-left'
});

🚦 Performance​

Lazy Loading​

// Load widget only when needed
document.getElementById('chat-button').onclick = () => {
  const script = document.createElement('script');
  script.src = 'https://cdn.stayzr.com/chat/widget.js';
  script.onload = () => {
    StayzrChat.init({ propertyId: 'your-property-id' });
    StayzrChat.open();
  };
  document.body.appendChild(script);
};

Preconnect​

<!-- Add to <head> for faster loading -->
<link rel="preconnect" href="https://api.stayzr.com">
<link rel="preconnect" href="https://cdn.stayzr.com">

🐛 Troubleshooting​

Widget Not Appearing​

// Check initialization
if (typeof StayzrChat === 'undefined') {
  console.error('StayzrChat not loaded');
}

// Verify property ID
StayzrChat.init({
  propertyId: 'your-property-id',
  debug: true  // Enable debug logs
});

Messages Not Sending​

// Check connection status
StayzrChat.on('connection:error', (error) => {
  console.error('Connection failed:', error);
  // Show fallback contact options
});

📚 Examples​

WordPress Plugin​

// Add to your theme's functions.php
function add_stayzrchat_widget() {
  if (is_page('contact') || is_page('booking')) {
    ?>
    <script src="https://cdn.stayzr.com/chat/widget.js"></script>
    <script>
      StayzrChat.init({ 
        propertyId: '<?php echo get_option('stayzr_property_id'); ?>' 
      });
    </script>
    <?php
  }
}
add_action('wp_footer', 'add_stayzrchat_widget');

React Component​

import { useEffect } from 'react';

function StayzrChatWidget({ propertyId, guest }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.stayzr.com/chat/widget.js';
    script.async = true;
    script.onload = () => {
      window.StayzrChat.init({ 
        propertyId,
        guest 
      });
    };
    document.body.appendChild(script);
    
    return () => {
      if (window.StayzrChat) {
        window.StayzrChat.destroy();
      }
    };
  }, [propertyId]);
  
  return null;
}

🆘 Support​