This is a normal website

Chatkĩa is dropped in with two script tags — the floating logo bubble in the corner is the whole integration. Click it to open the chat.

Integration snippet

Add these two lines before </body> on any page:

<link rel="stylesheet" href="chatkia-widget.css">
<script src="chatkia-widget.js"></script>
<script>
  Chatkia.init({
    position: 'bottom-right',        // or 'middle-right'
    logoMark: 'assets/images/chatkia-logo-mark.png',
    logoFull: 'assets/images/chatkia-logo.png',
    greeting: 'Hi there! How can we help you today?'
  });
</script>

Live re-theme demo — click a palette to prove the CSS variables work

Theming reference

Every color, size and image in the widget is a CSS custom property on .chatkia-root. Override any of them from your own stylesheet — nothing to fork or rebuild:

.chatkia-root {
  --chatkia-primary: #0078d4;
  --chatkia-primary-dark: #005a9e;
  --chatkia-sender-bg: #0078d4;      /* your outgoing message bubbles */
  --chatkia-receiver-bg: #f3f2f1;    /* agent's incoming bubbles */
  --chatkia-status-online: #107c10;
  --chatkia-bg-pattern: url('assets/images/bg-pattern.webp');
}