Chat Widget – English Demo

The chat bubble is in the bottom-right corner. Below is a full explanation of every setting you can change — just edit the matching value in the script tag at the top of this file.

What the widget looks like

• Header: Near-black (#1F1F1F) with a 2 px green accent line below it. The DDoptics hummingbird logo sits inside a deep-green circular badge on the left. Title is 16 px / medium weight.
• Launcher bubble: Near-black circle with a white speech-bubble icon and a pulsing green online dot in the top-right corner.
• Bot avatar: Deep-green circle with the DDoptics logo, appears next to the first bot message in every consecutive run. Follow-up messages are indented to align under it.
• Message bubbles: Bot bubbles are white with symmetric 14 px corners. User bubbles are deep forest-green with the same symmetric radius — no tail geometry on either side.
• Category nav card: A white card with 5 icon tiles (Rifle scopes, Binoculars, Spotting scopes, Accessories, Service) appears under the welcome message. Each tile shows a green icon and, in expanded view, a label. In compact view the label is hidden and appears as a tooltip on hover. The card disappears after the first message is sent.
• Input field: Always shows a 1.5 px green border (#2C8E4A). Focus thickens it to 2 px and adds a soft green halo.
• Send button: Sage green (#6FA882), 44 × 44 px, paper-plane icon in dark green for contrast. Fades to 45 % opacity when the input is empty.
• Window sizes: Compact (360 × 520 px) and Expanded (440 × 640 px), toggled by the expand button in the header. On mobile the widget fills the full screen and the expand button is hidden.
• Header controls: Expand and Minimize buttons in the top-right corner. Both show a tooltip on hover. On mobile the expand button is hidden.
• Typing indicator: Three dots that pulse in sequence while the agent is preparing a reply.

Configurable settings (data attributes)

1. data-title — Header title text.
   Current value: DDoptics experts
   Change to any name you want shown in the widget header.
2. data-status — Status line below the title.
   Current value: Help & advice within minutes
   Adjust the copy or swap for an out-of-hours message.
3. data-placeholder — Placeholder text inside the message input.
   Current value: Write a message…
4. data-greeting — The first bot message shown when the chat opens, before the server responds.
   Current value: Hi! DD Optics here 👋 I'm trained to answer any questions you have in English.
   Note: the AI agent also sends its own greeting — coordinate the two to avoid repetition.
5. data-chips — Category tile labels, separated by |. Must have the same number of entries as data-chip-icons.
   Current value: Rifle scopes|Binoculars|Spotting scopes|Accessories|Service
   Clicking a tile sends its label as a user message. Remove both chip attributes entirely to hide the card.
6. data-chip-icons — Icon image paths for the category tiles, separated by |. One path per tile, matching the order of data-chips.
   Current value: /icons/chat_icons/target.png|/icons/chat_icons/binoculars.png|/icons/chat_icons/spektive.png|/icons/chat_icons/settings.png|/icons/chat_icons/service.png
7. data-error-connect — Message shown when the server cannot be reached on startup.
   Current value: Sorry, I was unable to connect at the moment. Please try again later.
8. data-error-msg — Message shown when a message fails to send mid-conversation.
   Current value: Something went wrong. Please try again.

Fixed settings (not configurable)

• Header colour: Near-black (#1F1F1F) per the DDoptics brand.
• Logo badge: Uses /icons/chat_icons/ddoptics_icon.png — replace the file to update the logo across header and message avatars.
• Send button: Icon-only, no text label.

Mobile behaviour

On screens narrower than 768 px the widget fills the full viewport (no rounded corners, no edge padding). The expand button is hidden. Category tile labels are always visible on mobile at 8 px bold — the compact-mode hide rule is overridden so users can read the tile names without hovering. iOS safe-area insets are respected so content is never hidden behind the home indicator.