skills.rest
astoeffer
astoefferCOMMUNITY
Explore all skills by this author →
GitHub

chatbot-widget

Embed customizable chatbot widgets into web applications via iframes.

Updated Aug 23, 2026
Search Tags:#theming#ui#widget#chatbot#iframe
One-click install
npx skills add https://github.com/astoeffer/plugin-marketplace --skill chatbot-widget
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chatbot-widget
Source: https://github.com/astoeffer/plugin-marketplace/tree/main/plugins/cloodle-ai-integration/skills/chatbot-widget
Command: npx skills add https://github.com/astoeffer/plugin-marketplace --skill chatbot-widget

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables embeddable AI chat UIs, including iframe embeds and widget-based interfaces, aligned with the Cloodle design system.

Core Features & Use Cases

  • Theming & Styling: Custom CSS and Chainlit theming for consistent appearance.
  • Moodle Embedding: Simple Moodle embedding patterns for LMS integration.
  • Widget Positioning: CSS patterns to fix widget location and behavior.

Quick Start

Deploy an embeddable widget by adding the iframe snippet or integrating the provided HTML snippet into your application.

Frequently Asked Questions about chatbot-widget

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed a chatbot widget into my web application?▼

Embed a chatbot widget by adding an iframe snippet or HTML code to your application. The Skill provides ready-to-use embedding patterns that work across web platforms with configurable layout and styling options.

Can I customize the chatbot widget's appearance to match my design system?▼

Yes, customize widget appearance through Chainlit theming, custom CSS, and design-system alignment. The Skill supports consistent styling across chat interfaces via configuration and stylesheet overrides.

How do I integrate a chatbot widget into a Moodle learning management system?▼

Use the Moodle embedding patterns provided by the Skill for LMS integration. These patterns simplify widget deployment within Moodle environments while maintaining accessibility and styling consistency.

What accessibility considerations should I account for when deploying embedded chat widgets?▼

The Skill implements accessibility considerations into iframe-based embedding and widget positioning. Review the configuration documentation to ensure your chat interface meets standards for assistive technology compatibility.

Can I control where a chatbot widget appears on the page?▼

Yes, widget positioning is managed through CSS patterns that fix widget location and behavior. The Skill provides layout customization options to position the chat interface precisely within your application.

Related Skills

Explore More Design & Creative Skills→
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
curiositechcuriositech
181

chatbot-analytics

Track AI chatbot metrics and monitor conversations while ensuring HIPAA compliance.

Official
Advanced
stacksjsstacksjs
622

stacks-crosswind

Apply Tailwind-like utility classes to style Stacks application components.

Official
Basic
chloebrettchloebrett
3

build-mcp-app

Design and deploy interactive chat UI components for MCP servers.

Community
Intermediate