Can I customize the colors and fonts?

Yes, the skill provides specific configurations for the Cloodle design system which can be easily modified in the config.toml and CSS files.

What platforms is this skill compatible with?

It is specifically designed for Chainlit-based AI agents and web environments like Moodle, but the CSS/HTML can be adapted for any web application.

Does this skill handle backend logic?

No, this skill focuses on the frontend presentation, theming, and embedding logic for the chatbot interface.

How do I trigger this skill?

You can trigger this skill when asking Claude to customize a chatbot UI, embed a widget, or style a chat interface.

Cloodle Chatbot Widget

Name: Cloodle Chatbot Widget
Author: astoeffer

byastoeffer

0•

设计工具

Builds and styles embeddable chatbot interfaces that integrate seamlessly with the Cloodle design system.

This skill enables developers to quickly create, theme, and embed AI-powered chatbot widgets into web applications and Learning Management Systems like Moodle. It provides pre-configured Chainlit themes, custom CSS for UI consistency, and the necessary HTML/CSS for responsive iframe positioning, ensuring a professional and cohesive user experience for AI assistants across various platforms.

主要功能

01Fixed-position widget layouts with toggle buttons

02Chainlit UI configuration and branding

03Moodle-compatible integration snippets

040 GitHub stars

05Custom CSS for consistent Cloodle design language

06Embeddable iframe implementation for web apps

使用场景

01Implementing a persistent, toggleable chat widget on a corporate website

02Designing a custom-themed chat interface for Chainlit applications

03Adding a branded AI learning assistant to an LMS like Moodle

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add astoeffer/plugin-marketplace chatbot-widget

For use in Claude.ai and ChatGPT

Download Skill