Configuration

Default Floating Widget

Standard embed: <div id="kios-chatbot" data-chat="..." data-api="..."> with the chatbot.js script. Should appear as a floating button bottom-right.

Simulated Customer Website

This represents a typical third-party page where the KIOS widget gets embedded. The floating chat bubble should appear in the bottom-right corner.

  • Font: Inter (sans-serif)
  • Text color: dark gray
  • Links are styled blue
  • Custom list markers

If the widget looks correct despite these surrounding styles, CSS isolation is working.

Example styled link

More Page Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

The widget overlay should float above all this content without disrupting the layout.

Hostile CSS Environment

Aggressive styles that might leak into the widget. The chat UI should remain unaffected.

Everything is Comic Sans and Red!

Wide-spaced purple text at 22px.

Rotated hue, wavy underline, scaled up.

Normal Content Next to Hostile

This side is styled normally. The floating widget should look consistent regardless of which section it overlaps.

Embed Snippet

Copy this snippet to embed the KIOS chatbot on any website.