ChatbotSkins Gallery — Premium Chat UI Skins

This guide shows how to ship your purchased ChatbotSkins Web Component in your app, customize the look, and wire it to your LLM backend.

1) Install

Use the packaged bundle you downloaded after purchase:

<!-- Include the prebuilt Web Component -->
<script type="module" src="./dist/index.js"></script>

Then drop the tag where you want the chatbot:

<x-chatbot
  endpoint="/api/chat"
  stream="sse"
  theme="minimal"
  concept="hologram"
  label="Support"
></x-chatbot>

2) Customize Look & Feel

Adjust attributes on the tag:

• mode: auto|light|dark
• theme: minimal|terminal|burst|typewriter|crt|origami|blueprint
• concept: pick the animation skin you bought
• header/footer/send-button: toggle UI sections

Tweak palette without writing CSS (maps to CSS vars):

<x-chatbot
  ui-surface="#ffffff" ui-bg="#ffffff" ui-text="#111214"
  ui-border="#e5e7eb" ui-primary="#1f2937"
  composer-bg="#fff" composer-text="#111" composer-radius="10"
  button-bg="#111827" button-text="#fff" button-radius="10"
></x-chatbot>

Fonts: the component inherits fonts from your page. Set a custom stack on the host:

/* Example */
x-chatbot { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }

3) Wire to Your LLM (SSE)

The component POSTs { messages: [...] } to endpoint and expects a text/event-stream response.

// Express example (Node 18+)
app.post('/api/chat', async (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache, no-transform');
  res.setHeader('Connection', 'keep-alive');

  // 1) Read user messages
  const { messages = [] } = req.body || {};

  // 2) Call your provider and stream tokens back
  // Example shape (pseudo):
  // provider.stream(messages, (token) => {
  //   res.write(`data: ${JSON.stringify({ type: 'token', delta: token })}\n\n`);
  // });

  // 3) On completion, send the final message
  // res.write(`data: ${JSON.stringify({ type: 'message', role: 'assistant', content: fullText })}\n\n`);
  // res.end();
});

Event payloads you can stream back:

• { type: "token", delta: "..." }
• { type: "message", role: "assistant", content: "full text" }

4) Listen for Events

const bot = document.querySelector('x-chatbot');
bot.addEventListener('chat:send', (e) => console.log('User:', e.detail.text));
bot.addEventListener('chat:response', (e) => console.log('AI:', e.detail.text));
bot.addEventListener('chat:error', (e) => console.error(e.detail.message));

5) Frameworks

Web Components work anywhere. In React/Vue/etc., import the bundle once and use <x-chatbot> directly.

Tips

• Honor reduced motion: heavy animations pause under prefers-reduced-motion.
• Contrast: ensure text/code colors meet AA on your background.
• Security: never ship provider API keys to the browser; proxy via your server.