Skip to main content

Selector Examples

ID Selector​

This example shows a minimal Focus Chat embed that uses a button trigger. Clicking the button with the id chat-btn will open the chat widget.

Agent Grid Example

<!DOCTYPE html>
<html>
<body>
  <button id="chat-btn" type="button">Chat</button>
  <focus-chat
    agent-card-url="https://75fa98e7-9278-47a0-8ce8-5b8523789930.agents.inhotel.io/.well-known/agent-card.json"
    config='{"source_trigger_selector":"#chat-btn"}'>
  </focus-chat>
  <script src="https://embed.agents.inhotel.io/focus-chat/latest/focus-chat.min.js"></script>
</body>
</html>

Class Selector​

This example demonstrates a Focus Chat embed configured with a camelCase agentCardUrl and a class selector trigger; clicking the button with the class chat-toggle opens the widget.

Agent Grid Example

<!DOCTYPE html>
<html>
<body>
  <button class="chat-toggle" type="button">Chat</button>
  <focus-chat
    agentCardUrl="https://38573332-48c8-4fbc-b3ff-0c23ce0e84e3.agents.inhotel.io/.well-known/agent-card.json"
    config='{"sourceTriggerSelector":".chat-toggle"}'>
  </focus-chat>
  <script src="https://embed.agents.inhotel.io/focus-chat/latest/focus-chat.min.js"></script>
</body>
</html>

Next Steps​