Extending Botpress themes
Botpress provides a variety of themes that you can use to customize the appearance of the webchat. You can extend those themes by generating your own theme object and stylesheet.
What it looks like
import { Webchat, WebchatProvider, getClient } from '@botpress/webchat';
import { buildTheme } from '@botpress/webchat-generator';
/**
* Build the theme object and stylesheet
* The theme object and style can be generated using the `@botpress/webchat-generator` package
* Style is a string that contains the CSS
* Theme is an object that contains the theme configuration
* Both of them can be exported to be used in the WebchatProvider
*/
const { style, theme } = buildTheme({
themeName: 'prism',
themeColor: '#634433',
})
export default function App() {
const client = getClient({ clientId: '453254325-54325-435-345-345534253' });
return (
<WebchatProvider client={client} theme={theme}>
<style>{style}</style>
<Webchat />
</WebchatProvider>
);
}