Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add customCSS theme option for advanced styling #277

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

toi500
Copy link
Contributor

@toi500 toi500 commented Nov 21, 2024

Added a new customCSS property to the BubbleTheme type to allow users to inject custom CSS styles directly through the theme configuration. This enables advanced styling capabilities without modifying the core components.

Implementation Details

  • Added customCSS to BubbleTheme type
  • Implemented style injection in both Bubble and Full components

Example

<script type="module">
  import Chatbot from 'https://cdn.jsdelivr.net/gh/toi500/FlowiseChatEmbed@feat/add-customCSS-feature/dist/web.js';
  Chatbot.init({
    chatflowid: 'your-chatflow-id',
    apiHost: 'http://localhost:3000',
    theme: {
      customCSS: `
        * {
          border-radius: 0 !important;
        }
      `
    }
  });
</script>

Result

image

Additional Note

Very useful when used with the new dev mode feature at http://localhost:5678

image

@saatchi-david
Copy link
Contributor

This is super helpful and perfect timing!

@toi500
Copy link
Contributor Author

toi500 commented Nov 21, 2024

This is super helpful and perfect timing!

This mixes very well with the Proxy Server feature since now we can:

  • Use just 1 deployment to serve multiple secured embed flows (your idea); and
  • Customize the chatbots professionally and individually on the fly using the same default web.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants