# Chatbot Widget

> Build embeddable chatbot widgets for web applications. Use when creating chat UIs, iframe embeds, or widget-based AI interfaces.

- Skill: `majiayu000/chatbot-widget` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/chatbot-widget`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/chatbot-widget/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/chatbot-widget

---


# Chatbot Widget Theming Skill

Style AI chatbot to match Cloodle design system.

## Trigger
- Chatbot UI customization
- Widget embedding requests
- Chat interface styling

## Chainlit Theming
Create `/opt/cloodle/tools/ai/multi_agent_rag_system/.chainlit/config.toml`:

```toml
[UI]
name = "Cloodle Assistant"
description = "AI-powered learning assistant"
default_theme = "light"

[UI.theme]
primary_color = "#6e66cc"
background_color = "#ffffff"
paper_color = "#f7f7f7"
font_family = "Outfit, sans-serif"
```

## Custom CSS
Create `public/custom.css`:
```css
:root {
    --cloodle-primary: #6e66cc;
    --cloodle-radius: 12px;
}

.message {
    border-radius: var(--cloodle-radius);
    font-family: "Outfit", sans-serif;
}

.user-message {
    background-color: var(--cloodle-primary);
    color: white;
}

.assistant-message {
    background-color: #f7f7f7;
    border: 1px solid #dedbe0;
}

.chat-input {
    border-radius: var(--cloodle-radius);
    border-color: #dedbe0;
}

.chat-input:focus {
    border-color: var(--cloodle-primary);
}

.send-button {
    background-color: var(--cloodle-primary);
    border-radius: 500px;
}
```

## Moodle Embedding
```html
<div id="cloodle-chatbot" class="cloodle-chat-widget">
    <iframe
        src="https://chat.cloodle.example/widget"
        style="border: none; border-radius: 12px;"
        width="400"
        height="600">
    </iframe>
</div>
```

## Widget Position CSS
```css
.cloodle-chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    box-shadow: rgba(77,77,77,0.1) 0 4px 12px;
    border-radius: 12px;
    overflow: hidden;
}
```

## Toggle Button
```html
<button class="cloodle-chat-toggle" onclick="toggleChat()">
    <svg><!-- Chat icon --></svg>
</button>
```