chatbot-widget

astoeffer's avatarfrom astoeffer

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

⭐0stars🔀1forks📁View on GitHub🕐Updated Dec 19, 2025
[Developer Tools]

When & Why to Use This Skill

This Claude skill provides a comprehensive toolkit for building, styling, and deploying embeddable chatbot widgets for web applications. It streamlines the frontend development process by offering pre-configured Chainlit themes, custom CSS for brand alignment, and optimized iframe integration methods, enabling developers to create professional AI interfaces that blend seamlessly into any website or LMS.

Use Cases

  • Brand-Consistent UI Customization: Tailoring the visual appearance of AI chatbots (colors, fonts, and spacing) to match specific design systems like Cloodle using custom CSS and TOML configurations.
  • Seamless Website Integration: Embedding functional AI assistants into existing platforms or Learning Management Systems (LMS) like Moodle using secure and responsive iframe components.
  • Interactive Widget Deployment: Implementing fixed-position, floating chat bubbles with interactive toggle buttons to provide on-demand AI support across various web pages.
  • Rapid Frontend Prototyping: Quickly generating the necessary HTML, CSS, and configuration boilerplate for multi-agent RAG systems and chat-based user interfaces.
namechatbot-widget
descriptionBuild embeddable chatbot widgets for web applications. Use when creating chat UIs, iframe embeds, or widget-based AI interfaces.
allowed-toolsRead, Write, Grep, Glob

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:

[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:

: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

<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

.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

<button class="cloodle-chat-toggle" onclick="toggleChat()">
    <svg><!-- Chat icon --></svg>
</button>