Skip to main content

Troubleshooting

Common issues and solutions for inHotel Focus Chat integration.

Installation Issues​

Chat Widget Doesn't Appear​

Symptoms:

  • No chat widget visible on page
  • Console shows no errors

Solutions:

  1. Check Script Loading

    <!-- Ensure script is loaded before using the element -->
    <script src="https://embed.agents.inhotel.io/focus-chat/latest/focus-chat.min.js"></script>
    <focus-chat agent_card_url="..."></focus-chat>

  2. Verify Agent Card URL

    • Open the agent card URL directly in browser
    • Ensure it returns valid JSON
    • Check for 404 or 500 errors

  3. Check Browser Console

    • Look for JavaScript errors
    • Check for failed network requests

Script Loading Errors​

Symptoms:

  • focus-chat element not recognized
  • "Uncaught ReferenceError" errors

Solutions:

  1. Verify CDN URL

    <!-- Correct CDN URL -->
    <script src="https://embed.agents.inhotel.io/focus-chat/latest/focus-chat.min.js"></script>

    <!-- NOT this -->
    <script src="https://embed.agents.inhotel.io/focus-chat/focus-chat.min.js"></script>

  2. Check Network Connectivity

    • Verify CDN is accessible
    • Check for corporate firewall blocking

  3. Use Local Copy

    <!-- Fallback to local file -->
    <script src="path/to/focus-chat.min.js"></script>

CORS and Network Issues​

CORS Errors​

Symptoms:

Access to fetch at 'https://agent.example.com/card.json' 
has been blocked by CORS policy

Solutions:

  1. Server-Side CORS Headers

    // Express.js example
    app.use((req, res, next) => {
      res.header('Access-Control-Allow-Origin', '*');
      res.header('Access-Control-Allow-Methods', 'GET, POST');
      res.header('Access-Control-Allow-Headers', 'Content-Type');
      next();
    });

  2. Nginx Configuration

    location /agent-card.json {
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Methods 'GET, POST';
    }

  3. Apache Configuration

    <Files "agent-card.json">
      Header set Access-Control-Allow-Origin "*"
      Header set Access-Control-Allow-Methods "GET, POST"
    </Files>

Agent Card Loading Failed​

Symptoms:

  • Chat widget appears but shows loading indefinitely
  • Network tab shows 404 or 500 errors for agent card

Solutions:

  1. Verify URL

    <!-- Check the URL is correct and accessible -->
    <focus-chat agent_card_url="https://a44b44de-d6cb-409e-a1ff-3bc28aa95b4e.agents.inhotel.io/.well-known/agent-card.json">

  2. Test Direct Access

    # Test with curl
    curl -v https://a44b44de-d6cb-409e-a1ff-3bc28aa95b4e.agents.inhotel.io/.well-known/agent-card.json

  3. Validate JSON

    # Validate JSON syntax
    cat agent-card.json | jq .

Chat Functionality Issues​

Messages Not Sending​

Symptoms:

  • User can type but messages don't send
  • Send button doesn't respond

Solutions:

  1. Check Chat Endpoint

    {
      "url": "https://api.example.com/chat"
    }

    Verify this endpoint accepts POST requests.

  2. Test Endpoint Manually

    curl -X POST https://api.example.com/chat \
      -H "Content-Type: application/json" \
      -d '{"message": "test"}'

  3. Check Network Tab

    • Look for failed requests
    • Check response status codes

No Response from Agent​

Symptoms:

  • Messages send successfully
  • No response appears

Solutions:

  1. Check Endpoint Response

    // Endpoint should return JSON
    {
      "content": "Response message"
    }

  2. Verify Response Format

    // Correct format
    app.post('/chat', (req, res) => {
      res.json({
        content: "Hello! How can I help you?"
      });
    });

  3. Check Console for Errors

    • Look for parsing errors
    • Check for network timeouts

Streaming Not Working​

Symptoms:

  • Responses appear all at once instead of streaming
  • Console shows streaming errors

Solutions:

  1. Verify Server-Sent Events Support

    // Server must support SSE
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    });

  2. Check Content-Type

    // Must use text/event-stream
    res.setHeader('Content-Type', 'text/event-stream');

  3. Disable Streaming Temporarily

    {
      "stream": false
    }

Configuration Issues​

Styling Not Applied​

Symptoms:

  • Chat widget appears with default styling
  • Custom colors/fonts not showing

Solutions:

  1. Check JSON Syntax

    <!-- Ensure valid JSON -->
    <focus-chat config='{"header_background_color": "#ff0000"}'>

  2. Verify Parameter Names

    {
      "header_background_color": "#3b82f6",
      "user_message_background_color": "#3b82f6"
    }

  3. Check CSS Specificity

    • Shadow DOM isolates styles
    • Use configuration parameters instead of external CSS

Context Not Working​

Symptoms:

  • Agent doesn't seem aware of page content
  • Responses are generic

Solutions:

  1. Check CSS Selector

    {
      "source_context": ".main-content"
    }

    Ensure elements exist with this selector.

  2. Verify Content Extraction

    // Check if elements exist
    console.log(document.querySelector('.main-content'));

  3. Test with Simple Selector

    {
      "source_context": "body"
    }

Browser Compatibility Issues​

Widget Not Working in Older Browsers​

Symptoms:

  • Widget doesn't appear in IE/older browsers
  • Console shows "Custom elements not supported"

Solutions:

  1. Check Browser Support

    • Chrome 54+
    • Firefox 63+
    • Safari 10.1+
    • Edge 79+

  2. Add Polyfills (if needed)

    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2/webcomponents-loader.js"></script>

  3. Provide Fallback

    <focus-chat agent_card_url="...">
      <div>
        <p>Chat requires a modern browser. Please update your browser or <a href="/contact">contact us</a>.</p>
      </div>
    </focus-chat>

Performance Issues​

Memory Leaks​

Symptoms:

  • Browser memory usage increases over time
  • Page becomes unresponsive

Solutions:

  1. Check for Multiple Instances

    <!-- Avoid multiple widgets with same config -->
    <focus-chat agent_card_url="..."></focus-chat>
    <!-- Don't duplicate -->

  2. Clear History Periodically

    // Clear stored history if needed
    sessionStorage.removeItem('inhotel_history_agentId_sectionKey');

Debug Mode​

Enable detailed logging by checking browser console:

// Focus Chat logs with [InHotel] prefix
console.log('[InHotel] Widget initialized');
console.log('[InHotel] Context extracted: 150 characters');
console.log('[InHotel Streaming] Event received');

Common Log Messages​

MessageMeaning
Widget initializedChat widget loaded successfully
Agent card loadedAgent configuration loaded
Context extracted: X charactersPage context extracted
Streaming connection establishedReal-time streaming active
History loaded: X messagesPrevious conversation restored

Getting Help​

If you're still experiencing issues:

  1. Check Browser Console

    • Look for error messages
    • Note any failed network requests

  2. Verify Configuration

    • Use a JSON validator for config
    • Test agent card URL directly

  3. Test with Minimal Example

    <!DOCTYPE html>
    <html>
    <head>
      <script src="https://embed.agents.inhotel.io/focus-chat/latest/focus-chat.min.js"></script>
    </head>
    <body>
      <focus-chat agent_card_url="https://a44b44de-d6cb-409e-a1ff-3bc28aa95b4e.agents.inhotel.io/.well-known/agent-card.json"></focus-chat>
    </body>
    </html>

  4. Contact Support

    • Provide browser version and OS
    • Include console error messages
    • Share minimal reproduction case

Frequently Asked Questions​

Q: Can I use multiple chat widgets on one page?​

A: Yes, but each should have a different agent_card_url or config to avoid conflicts.

Q: Does Focus Chat work with single-page applications?​

A: Yes, the widget works with SPAs. You may need to reinitialize after route changes.

Q: Can I customize the widget beyond the provided parameters?​

A: The widget uses Shadow DOM for isolation. Use the configuration parameters rather than external CSS.

Q: How do I clear conversation history?​

A: Conversation history is automatically saved in your browser and clears when the session ends. You can also manually clear the conversation at any time using the Clear history button located at the top of the chat interface.