Troubleshooting Guide

// In browser console, check if scripts are loaded
console.log('Booking script:', typeof window.LinkytBooking);
console.log('Storefront script:', typeof window.LinkytStorefront);

  // Should return 'object' if loaded, 'undefined' if not

<!-- Booking Form - Check these attributes -->
<div
data-linkyt-booking          <!-- ✅ Correct -->
data-shop-id="your-shop-id"  <!-- ✅ Must be valid -->
data-booking-id="booking-id" <!-- ✅ Must be valid -->
></div>

  <!-- Storefront - Check these attributes -->
  <div
    data-linkyt-storefront       <!-- ✅ Correct -->
    data-store-id="your-store-id" <!-- ✅ Must be valid -->
  ></div>

// After adding containers to DOM
if (window.LinkytBooking && window.LinkytBooking.init) {
window.LinkytBooking.init();
}

  if (window.LinkytStorefront && window.LinkytStorefront.init) {
    window.LinkytStorefront.init();
  }

/* Override conflicting styles */
.linkyt-container * {
box-sizing: border-box !important;
}

  /* Reset common conflicting properties */
  .linkyt-widget {
    font-family: inherit !important;
    line-height: 1.5 !important;
    color: inherit !important;
  }

  /* Fix layout issues */
  .linkyt-storefront {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

/* Common theme fixes */
.linkyt-widget img {
max-width: 100% !important;
height: auto !important;
}

  .linkyt-widget button {
    border: none !important;
    outline: none !important;
    background: var(--linkyt-primary-color) !important;
  }

  /* Fix for themes that override all links */
  .linkyt-widget a {
    text-decoration: none !important;
    color: inherit !important;
  }

// Implement intersection observer for lazy loading
const observerOptions = {
root: null,
rootMargin: '50px',
threshold: 0.1
};

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadLinkytWidget(entry.target);
        observer.unobserve(entry.target);
      }
    });
  }, observerOptions);

  function loadLinkytWidget(container) {
    // Load script only when needed
    const script = document.createElement('script');
    script.src = container.dataset.linkytBooking ?
      'https://booking.linkyt.com/embed.js' :
      'https://cdn.linkyt.io/linkyt-storefront.umd.cjs';
    script.async = true;
    document.body.appendChild(script);
  }

  // Observe all Linkyt containers
  document.querySelectorAll('[data-linkyt-booking], [data-linkyt-storefront]')
    .forEach(container => observer.observe(container));

<!-- Preload critical resources -->
<link rel="preload" href="https://cdn.linkyt.io/style.css" as="style">
<link rel="preconnect" href="https://api.linkyt.io">

  <!-- Load scripts with proper attributes -->
  <script
    src="https://cdn.linkyt.io/linkyt-storefront.umd.cjs"
    async
    defer
  ></script>

<!-- Ensure proper viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

/* Mobile-first responsive design */
.linkyt-container {
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}

  @media (max-width: 768px) {
    .linkyt-storefront {
      min-height: 500px !important;
      padding: 10px !important;
    }

    .linkyt-booking {
      font-size: 14px !important;
    }

    /* Fix touch interactions */
    .linkyt-widget button {
      min-height: 44px !important;
      min-width: 44px !important;
    }
  }

// Check if site is using HTTPS
if (location.protocol !== 'https:') {
console.warn('Linkyt requires HTTPS for payment processing');
// Redirect to HTTPS version
location.replace('https:' + window.location.href.substring(window.location.protocol.length));
}

<!-- Add to your HTML head or server headers -->
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
script-src 'self' 'unsafe-inline' https://cdn.linkyt.io https://booking.linkyt.com;
style-src 'self' 'unsafe-inline' https://cdn.linkyt.io;
connect-src 'self' https://api.linkyt.io;
frame-src https://checkout.linkyt.io;
">

<?php
// Fix for WordPress themes that defer all scripts
function linkyt_fix_script_loading() {
  ?>
  <script>
  // Ensure scripts load in correct order
  document.addEventListener('DOMContentLoaded', function() {
      if (typeof window.LinkytBooking === 'undefined') {
          console.warn('Linkyt booking script not loaded');
      }
      if (typeof window.LinkytStorefront === 'undefined') {
          console.warn('Linkyt storefront script not loaded');
      }
  });
  </script>
  <?php
}
add_action('wp_footer', 'linkyt_fix_script_loading');
?>

// Fix for React strict mode and hydration issues
import { useEffect, useRef, useState } from 'react';

const LinkytWidget = ({ storeId, type = 'storefront' }) => {
const containerRef = useRef<HTMLDivElement>(null);
const [isLoaded, setIsLoaded] = useState(false);

useEffect(() => {
  // Prevent double initialization in React strict mode
  if (isLoaded) return;

  const loadScript = () => {
    const script = document.createElement('script');
    script.src = type === 'booking'
      ? 'https://booking.linkyt.com/embed.js'
      : 'https://cdn.linkyt.io/linkyt-storefront.umd.cjs';
    script.async = true;
    script.onload = () => setIsLoaded(true);
    document.body.appendChild(script);
  };

  // Check if script already exists
  const existingScript = document.querySelector(`script[src*="linkyt"]`);
  if (!existingScript) {
    loadScript();
  } else {
    setIsLoaded(true);
  }

  return () => {
    // Cleanup if needed
  };
}, [type, isLoaded]);

return (
  <div
    ref={containerRef}
    data-linkyt-storefront={type === 'storefront' ? '' : undefined}
    data-linkyt-booking={type === 'booking' ? '' : undefined}
    data-store-id={storeId}
    style={{ width: '100%', minHeight: '500px' }}
  />
);
};

// Debug Linkyt integration
function debugLinkyt() {
console.log('=== Linkyt Debug Info ===');

// Check if scripts are loaded
console.log('Booking script loaded:', typeof window.LinkytBooking !== 'undefined');
console.log('Storefront script loaded:', typeof window.LinkytStorefront !== 'undefined');

// Find all Linkyt containers
const containers = document.querySelectorAll('[data-linkyt-booking], [data-linkyt-storefront]');
console.log('Found containers:', containers.length);

containers.forEach((container, index) => {
  console.log(`Container ${index + 1}:`, {
    type: container.dataset.linkytBooking !== undefined ? 'booking' : 'storefront',
    storeId: container.dataset.storeId || container.dataset.shopId,
    bookingId: container.dataset.bookingId,
    dimensions: {
      width: container.offsetWidth,
      height: container.offsetHeight
    }
  });
});

// Check for common issues
if (location.protocol !== 'https:') {
  console.warn('⚠️ Site not using HTTPS - may cause payment issues');
}

if (containers.length === 0) {
  console.warn('⚠️ No Linkyt containers found');
}
}

  // Run debug function
  debugLinkyt();

// Check API connectivity
async function checkLinkytAPI() {
try {
  const response = await fetch('https://api.linkyt.io/health');
  console.log('API Status:', response.ok ? '✅ Online' : '❌ Offline');
} catch (error) {
  console.error('API Connection Error:', error);
}
}

  checkLinkytAPI();