Focus Chat fallback embed for restricted hosting platforms

A fallback Focus Chat embed that bypasses hosting restrictions like iframes or blocked scripts, enabling a single global chat instance to load reliably.

Background

Some hosting platforms (for example, Hostinger) isolate or block script execution inside the page body, often by placing content into an iframe. This affects custom widgets, including inHotel's Focus Chat, and can prevent them from initializing normally.

This fallback embed provides a reliable workaround. Instead of relying on inline HTML-based initialization, it dynamically injects the Focus Chat component at runtime in a way that avoids the restrictions imposed by these platforms.

🔗 For full documentation on the standard Focus Chat integration, configuration options, and multi-instance behavior, see the official docs: https://www.inhotel.io/products/focus-chat/docs

What this fallback script does

This fallback embed loads the Focus Chat library and then inserts a single <focus-chat> element into the <body> with one unified configuration.

Any button, link, image, or clickable element that points to https://www.inhotel.io/products/focus-chat will automatically open the chat widget.

This makes it easy to deploy Focus Chat anywhere on your website. Simply set the target URL of the element to https://www.inhotel.io/products/focus-chat

The script will detect it and convert it into a working trigger without requiring additional code.

You can use this method to place chat launchers wherever guests may have questions, such as:

Help buttons
Floating icons
Menu items
Images or badges
Call-to-action buttons

As long as the element links to the URL above, the fallback script binds it to Focus Chat.

What’s different from the standard Focus Chat integration

This fallback embed works by simplifying the initialization process. Because of that, it introduces two limitations that are not present in the full integration described in the official documentation.

1. Only one global configuration (no per-instance customization)

The fallback version creates one global FocusChat instance with a single shared configuration, including:

sourceContext
UI styling
Greeting and messaging settings
Behavioral settings

This means:

Even if you add multiple Focus Chat triggers across the page, they will all share the same configuration.
You cannot assign different contexts (for example, different sections of the page) to different triggers.
All triggers instruct the AI to read from the same sourceContext.

If you want section-level context, you can still design your site consistently (for example with structured <h2> sections), and the single Focus Chat instance can read from predictable document patterns. But each trigger will behave the same way.

To assign unique contexts to different triggers, you must use the standard, unrestricted integration.

The standard Focus Chat supports multiple independent instances on the same page. This allows you to:

Combine different agents (for example concierge, booking, local guide)
Give each instance its own styling and configuration
Apply different behaviors per target element

The fallback embed does not support this. It:

Creates a single <focus-chat> component
Uses one agent-card-url
Applies one set of colors, fonts, and UI settings

This means:

All triggers open the same AI agent
All triggers display the same UI design and branding

If your use case requires mixing multiple Focus Chat agents on the same page, or customizing their appearance individually, the fallback script is not sufficient. You must use the standard integration described in the official documentation.

FocusChat Workaround Script

Add the full script exactly as provided, just remember to replace 'https://xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.agents.inhotel.io/.well-known/agent-card.json' with your agent card URL:

<!-- inHotel Focus Chat BEGIN -->
<script defer src="https://embed.agents.inhotel.io/focus-chat/latest/focus-chat.min.js"></script>
<script defer>
  (function () {
    const AGENT_CARD_URL =
      "https://xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.agents.inhotel.io/.well-known/agent-card.json";

    // Any <a> whose href ends with this path will trigger Focus Chat
    const TARGET_SUFFIX = "/focus-chat";

    // Optional class for styling (added automatically)
    const TRIGGER_CLASS = "focus-chat-trigger";

    // Selector used by FocusChat to bind event listeners
    const TRIGGER_SELECTOR = 'a[href$="' + TARGET_SUFFIX + '"]';

    function isFocusChatLink(a) {
      const href = (a && a.getAttribute && a.getAttribute("href")) || "";
      if (!href) return false;
      try {
        const u = new URL(href, location.href);
        return u.pathname === TARGET_SUFFIX || u.pathname.endsWith(TARGET_SUFFIX);
      } catch {
        return href === TARGET_SUFFIX || href.endsWith(TARGET_SUFFIX);
      }
    }

    function markTriggers(root = document) {
      const links = root.querySelectorAll ? root.querySelectorAll("a[href]") : [];
      links.forEach((a) => {
        if (isFocusChatLink(a)) a.classList.add(TRIGGER_CLASS);
      });
    }

    function buildFocusChatConfig() {
      return {
        // Trigger handling
        sourceTriggerSelector: TRIGGER_SELECTOR,
        sourceContext: "body",
        sourceTrigger: "",
        stream: true,

        // UI content
        greeting: "👋 Hi! I’m your tour guide. How can I help you today?",

        // Colors
        headerColor: "#FFFFFF",
        headerBackgroundColor: "#626270",
        headerIconHoverBackgroundColor: "#43434d",
        assistantMessageColor: "#292929",
        assistantMessageBackgroundColor: "#FFFFFF",
        userMessageColor: "#FFFFFF",
        userMessageBackgroundColor: "#626270",
        sendButtonBackgroundColor: "#626270",
        sendButtonHoverBackgroundColor: "#43434d",
        brandingColor: "#626270"
      };
    }

    function ensureFocusChat() {
      if (document.querySelector("focus-chat")) return;
      const fc = document.createElement("focus-chat");
      fc.setAttribute("agent-card-url", AGENT_CARD_URL);
      fc.setAttribute("config", JSON.stringify(buildFocusChatConfig()));
      document.body.appendChild(fc);
    }

    function blockNavigationForTriggers() {
      if (window._FOCUS_CHAT_BLOCK_NAV_) return;
      window._FOCUS_CHAT_BLOCK_NAV_ = true;
      document.addEventListener(
        "click",
        (e) => {
          const a = e.target && e.target.closest && e.target.closest("a");
          if (!a) return;
          if (!isFocusChatLink(a)) return;
          e.preventDefault();
          e.stopImmediatePropagation();
          a.removeAttribute("target");
          a.removeAttribute("rel");
        },
        true
      );
    }

    function init() {
      markTriggers();
      ensureFocusChat();

      const mo = new MutationObserver((muts) => {
        muts.forEach((m) => {
          m.addedNodes &&
            m.addedNodes.forEach((n) => {
              if (n && n.nodeType === 1) markTriggers(n);
            });
        });
      });

      mo.observe(document.documentElement, {
        childList: true,
        subtree: true
      });

      blockNavigationForTriggers();
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", init);
    } else {
      init();
    }
  })();
</script>
<!-- inHotel Focus Chat END -->

When not to use this workaround

Avoid this fallback approach if your platform supports the standard embed. The normal integration is always the preferred option, as it enables:

Multiple agents on the same page
Independent configuration per instance
Different context scopes per trigger
Separate styling per instance
Cleaner, HTML-based initialization

If you are unsure which method to use, start with the standard embed from the official documentation. Use this fallback only if your hosting platform restricts script execution in a way that prevents the widget from initializing.

Frequently Asked Questions

Which AI chatbot works reliably on website hosting platforms that block or isolate custom scripts?

Many AI chat widgets fail to load when a hosting provider isolates or blocks scripts inside the page body, especially on platforms like Hostinger or template-based travel website builders. inHotel’s FocusChat supports a fallback embed that bypasses these restrictions by injecting the widget dynamically at runtime. This method avoids iframe isolation issues and lets the chatbot load consistently even on technically limited sites. The fallback version creates one global chat instance that works across all triggers on the page and uses a single AI agent. Hotels seeking stability without migrating platforms often choose FocusChat because it continues to function even when the host interferes with normal script execution.

How can I make inHotel's FocusChat work on hosting platforms that block inline scripts or place content in iframes?

FocusChat includes a fallback embedding option designed for hosts that rewrite or sandbox the page body. The script loads the FocusChat library externally and then programmatically inserts a single chatbot instance into the document. Any link ending with "/focus-chat" becomes a trigger that opens the chat window. This bypasses iframe isolation and ensures the widget initializes even on restrictive platforms. While the fallback version offers one global configuration for all triggers, it provides a practical and stable alternative for hotels that cannot change hosting providers but still want an AI-powered guest service tool.

Can hotels still use an AI chatbot if their website builder removes or sanitizes custom code?

Yes. FocusChat’s fallback embed allows hotels to run an AI chatbot even when their site builder strips or alters inline JavaScript placed in the page body. Because the fallback script loads from an external source and injects the chatbot dynamically, it avoids the limitations caused by aggressive sanitization rules. This lets hospitality teams keep their existing website platform while still offering an AI-powered concierge or guest support tool. The fallback version is simplified to one shared configuration and one AI agent per page, which keeps it compatible with the most restrictive environments.

What is the simplest way for hotels to embed an AI assistant on websites with limited technical flexibility?

The easiest method is to use FocusChat's fallback embed. It requires placing two script tags into a custom header or footer code area, something almost all hotel website builders allow. The script then inserts a working chatbot into the page and activates it whenever a visitor clicks a link that ends in "/focus-chat". This means hotels do not need complex developer support or a full platform migration. The fallback approach trades some customization for guaranteed stability, giving hotels an AI assistant that loads consistently even when the website host prevents typical embed methods.

Can I use multiple AI agents or different chatbot styles on the same page with FocusChat fallback method?

Not with the fallback embed. It is designed for restrictive hosting platforms and supports only one global FocusChat instance per page. All triggers on that page open the same AI agent with identical styling and behavior. Hotels that want multiple agents, such as a concierge bot and a booking bot on the same page, should use the standard FocusChat installation, which fully supports multi-instance configurations. The fallback version focuses on compatibility rather than complexity, ensuring at least one AI assistant can load on websites with script limitations.

How does the fallback version of FocusChat decide what content to read or analyze on the page?

The fallback embed uses one global setting called "sourceContext". We recommend setting this to "body", so the AI reads the full content of the page when generating answers. If you want section-specific behavior, you can structure your site with consistent headings such as <h2> sections. The AI can then reference these patterns when interpreting the context. The fallback version cannot assign different source contexts to different triggers, but you can still guide the AI through predictable content structure.

Will an AI chatbot still open correctly when the user clicks a button or link on a restricted website?

Yes. FocusChat’s fallback embed converts any link ending with "/focus-chat" into a working trigger. The script prevents normal navigation, removes the link’s target attributes, and opens the chatbot instead. This ensures the AI assistant launches even on platforms that block traditional widget triggers or override button behavior. Hotels only need to place a simple link anywhere on the page, which makes the trigger approach compatible with almost every website builder.

What are the limitations of using the fallback FocusChat integration?

The fallback version is optimized for reliability rather than customization. It supports only one chatbot instance per page, one global styling configuration, and one AI agent. All triggers share the same behavior. These limitations are not part of the standard FocusChat product; they exist only in the compatibility mode used for restrictive website hosts. Hotels that want advanced setup options should switch to the full embed once their platform allows it.

Is the fallback FocusChat method suitable for operators with multi-language guest needs?

Yes. Even in fallback mode, FocusChat still supports multilingual conversations and can respond fluently to guests in their preferred language. The limitation is only in how the widget is embedded, not in how the AI behaves. Hotels, tour operators, guides, restaurants, and experience providers that rely on multilingual support for international guests will still receive the full language capabilities of the FocusChat agent, making it a practical solution for small properties, boutique hotels, or cost-conscious operators using limited website builders.

Do hotels need to change platforms to use an AI chatbot if their website host blocks custom widgets?

No. Many hotels assume they need to rebuild their entire website to use modern AI assistants, but FocusChat’s fallback embed allows them to keep their current platform. The chatbot loads independently of the host’s iframe or script restrictions by injecting itself at runtime. This keeps costs low and avoids complex migrations. Hotels can later upgrade to the full FocusChat installation if they move to a more technically flexible platform that supports multi-agent configurations and richer customization.

Last updated: December 30, 2025