Custom CSS for a specific bot only

[nrcionline]

I have tried following the documentation at https://botpress.com/docs/messaging-channels/botpress-webchat/customizations/custom-css

But this doesn't work. Either the hook is never called, or the hook is ineffective and never loads the extra CSS file. I tried placing the hook js file in both the specific directory and the global directory. Neither work. This is the code I placed in after_bot_mount: const chatOptions = { hideWidget: true, config: { enableReset: true, enableTranscriptDownload: true, extraStylesheet: '/assets/modules/channel-web/nrc-help-bot.css' } }

const params = { m: 'channel-web', v: 'Fullscreen', options: JSON.stringify(chatOptions) }

setTimeout(() => { try { bp.http.deleteShortLink(botId) } catch (e) {}

// Chatbot will be available at $EXTERNAL_URL/s/$BOT_NAME bp.http.createShortLink(botId, ${process.EXTERNAL_URL}/lite/${botId}/, params) }, 500)

This does allow me to browse to HTTP:/localhost:3000/s/nrc-help-bot - but this isn't helpful for embedding the bot in my website. Or is it, but I don't understand how to do it? The other documentation has an embedded index.html example, but this requires separating the host from the botid (I don't seem to be able to pass in the full URL with the custom CSS):

I was able to specify the CSS file in the script of my website: window.botpressWebChat.init({ host: "http://localhost:3000", botId: "nrc-help-bot", extraStylesheet: '/assets/modules/channel-web/nrc-help-bot.css' })

But I don't understand the difference. Which option is the best way to customize one bot? Why isn't the simpler solution mentioned on the documentation page? This makes it seem like the hook is the correct way to do this, but it doesn't work.

It would be super helpful if the init options and params were documented somewhere! I can't find it anyway. How are we supposed to use this if the parameters aren't specified anywhere?

Discussed in https://github.com/botpress/botpress/discussions/9397

^{Originally posted by **botpressops** January 7, 2022} This does work, however, it only works on the link http://localhost:3000/s/mybot. On my website I have a button that opens a new window for the bot, however, I end up with blank space due to the iframe width restriction. I want the bot to open up in full screen instead of in a 360px width, that's why I need to override the bp-widget-slide class. How can I make this work for the bot that is hosted on my website? Nothing seemed to change there.

[davidvitora]

Should work; try using an external host and put the whole link inside of the configuration