Configuration & styling
You can customize the appearance and initial behavior of the Terminal Widget using various attributes on the <loomlay-chat> element.
Basic Configuration Attributes:
These attributes are set directly on the <loomlay-chat> tag:
accesskey="YOUR_ACCESS_KEY": (Required) Your API access key.
greeting-message="Hello, how can I help you?": The initial message displayed when the chat opens.
chat-title-colour="white": Text color for the chat title in the header.
headerBg="#2e323b": Background color of the chat header.
sendButtonBg="#25ffc1": Background color of the send message button.
open-btn-bg="#25ffc1": Background color of the button to open the chat widget.
messageInputColor="#1d1d20": Background color of the message input area.
openChatButtonColor="#25ffc1": Icon/text color of the button to open the chat widget.
Agent Definition (Child Element):
Within <loomlay-chat>, you define the agent(s) the widget connects to:
<agents>
<agent uuid="YOUR_PROJECT_UUID" name="Agent Name" description="Agent Description">
</agent>
</agents>uuid: (Required) The UUID of your agent project.
name: Display name for the agent in the widget (optional).
description: Description for the agent (optional).
Styling Overrides (Additional Attributes):
You can further customize the widget's appearance using these attributes on the <loomlay-chat> tag:
sendButtonColor: Text/icon color of the send button.
switchButtonColor: Color for agent switching elements (if multiple agents).
headerColor: background color in the header.
headerTextColor: Text color for elements in the header (e.g., title).
footerColor: Color for elements in the footer area.
bodyColor: Background color of the main chat message area.
textResponseColor: Text color for responses from the agent.
open-icon: URL for a custom "open chat" icon.
clean-icon: URL for a custom "clear chat" icon.
pop-out-icon: URL for a custom "pop out chat" icon.
chat-logo: URL for a logo to display in the chat header.
close-icon: URL for a custom "close chat" icon.
radius: Border radius for various widget element (e.g., "10px").
Last updated