@rohitkvs/revrag-web-sdk
Version:
Industry-standard React SDK for Revrag chat functionality with simple script integration. Zero setup required - just include a script tag!
175 lines (155 loc) • 5.95 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Debug Test - Revrag Widget</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f0f0f0;
}
.debug {
background: white;
padding: 20px;
border-radius: 8px;
margin: 10px 0;
}
.error {
background: #ffe6e6;
border-left: 4px solid #ff4444;
}
.success {
background: #e6ffe6;
border-left: 4px solid #44ff44;
}
</style>
</head>
<body>
<h1>Debug Test - Revrag Widget</h1>
<div class="debug" id="react-check">
<h3>React Check</h3>
<p id="react-status">Loading...</p>
</div>
<div class="debug" id="widget-check">
<h3>Widget Check</h3>
<p id="widget-status">Loading...</p>
</div>
<div class="debug" id="console-logs">
<h3>Console Logs</h3>
<div id="log-output"></div>
</div>
<!-- React Dependencies -->
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.production.min.js"
onload="checkReact()"
onerror="reactFailed()">
</script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
onload="checkReactDOM()"
onerror="reactDOMFailed()">
</script>
<!-- Widget Styles -->
<link rel="stylesheet" href="./style.css">
<!-- Widget Script -->
<script
src="./revrag-widget.umd.js"
data-api-key="demo-api-key-123"
data-debug="true"
data-position="bottom-right"
data-primary-color="#0070f3"
data-size="medium"
onload="widgetLoaded()"
onerror="widgetFailed()">
</script>
<script>
// Override console.log to capture logs
const originalLog = console.log;
const originalError = console.error;
const originalWarn = console.warn;
function addLog(message, type = 'log') {
const logOutput = document.getElementById('log-output');
const logDiv = document.createElement('div');
logDiv.style.margin = '5px 0';
logDiv.style.padding = '5px';
logDiv.style.background = type === 'error' ? '#ffe6e6' : type === 'warn' ? '#fff3cd' : '#f8f9fa';
logDiv.style.borderRadius = '4px';
logDiv.innerHTML = `<strong>[${type.toUpperCase()}]</strong> ${message}`;
logOutput.appendChild(logDiv);
}
console.log = function(...args) {
originalLog.apply(console, args);
addLog(args.join(' '), 'log');
};
console.error = function(...args) {
originalError.apply(console, args);
addLog(args.join(' '), 'error');
};
console.warn = function(...args) {
originalWarn.apply(console, args);
addLog(args.join(' '), 'warn');
};
function checkReact() {
const status = document.getElementById('react-status');
if (window.React) {
status.innerHTML = '✅ React loaded successfully';
status.parentElement.className = 'debug success';
} else {
status.innerHTML = '❌ React not found';
status.parentElement.className = 'debug error';
}
}
function reactFailed() {
const status = document.getElementById('react-status');
status.innerHTML = '❌ React failed to load';
status.parentElement.className = 'debug error';
}
function checkReactDOM() {
const status = document.getElementById('react-status');
if (window.React && window.ReactDOM) {
status.innerHTML = '✅ React and ReactDOM loaded successfully';
status.parentElement.className = 'debug success';
}
}
function reactDOMFailed() {
const status = document.getElementById('react-status');
status.innerHTML = '❌ ReactDOM failed to load';
status.parentElement.className = 'debug error';
}
function widgetLoaded() {
const status = document.getElementById('widget-status');
if (window.RevragWidget) {
status.innerHTML = '✅ Widget script loaded - RevragWidget found';
status.parentElement.className = 'debug success';
} else {
status.innerHTML = '⚠️ Widget script loaded but RevragWidget not found';
status.parentElement.className = 'debug error';
}
}
function widgetFailed() {
const status = document.getElementById('widget-status');
status.innerHTML = '❌ Widget script failed to load';
status.parentElement.className = 'debug error';
}
// Check for widget after a delay
setTimeout(() => {
const widgetContainer = document.getElementById('revrag-widget-container');
const status = document.getElementById('widget-status');
if (widgetContainer) {
status.innerHTML += '<br>✅ Widget container found in DOM';
} else {
status.innerHTML += '<br>❌ Widget container not found in DOM';
}
if (window.RevragWidget) {
status.innerHTML += '<br>✅ RevragWidget global object exists';
} else {
status.innerHTML += '<br>❌ RevragWidget global object not found';
}
}, 2000);
</script>
</body>
</html>