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").