Customising Chat UI Appearance using shortlink hook (11.x)

Hi folks,

I am trying to implement the chat customisation for the full screen chat window. However, my stylesheet isn’t being read (or the element names where changed in botpress server).

HOOK

//CHECKSUM:5670b6b00064d8d2ee8097ea77d26d94c21325a34e524a1c9e54dcd4d25d390a
"use strict";

const chatOptions = {
  hideWidget: true,
  config: {
    botName: 'John',
    botConvoTitle: 'Test',
    enableReset: true,
    botConvoDescription: 'Test your bot',
  	backgroundColor: '#ffffff',
 	  textColorOnBackground: '#191970',
 	  customStylesheet: './style.css', // Url to custom .css file
  	foregroundColor: '#191970',
    enableTranscriptDownload: false
  }
};
const params = {
  m: 'channel-web',
  v: 'fullscreen',
  options: JSON.stringify(chatOptions) // Bot will be available at $EXTERNAL_URL/s/$BOT_NAME

};
bp.http.createShortLink(botId, `${process.EXTERNAL_URL}/lite/${botId}/`, params);

The style.css is in the \data\global\hooks\after_bot_mount\builtin dir and goes like this:

.botpress__side-internal {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgba(0, 0, 0, .3);
}

.botpress__side-external .botpress__side-internal .botpress__side-header {
  border-bottom: 2px solid #fff;
}

.botpress__side-header-bot-name,
.botpress__message-date,
.botpress__side-item-name,
.botpress__side-internal .botpress__side-header .botpress__toggle-convos-button i,
.botpress__side-internal .botpress__side-header .botpress__close-button i {
  color: #fff;
}

.botpress__side-conversation,
.botpress__side-header,
.botpress__convos-list {
  background-color: rgba(0, 0, 0, .3);
}

.botpress__side-external .botpress__side-internal .botpress__side-conversation .botpress__side-conversation-bottom .botpress__side-new-message {
  background-color: transparent;
}

.botpress__side-external .botpress__side-item-right .botpress__side-item-title .botpress__side-item-date span,
.botpress__side-external .botpress__side-internal .botpress__convos-list .botpress__convo-item .botpress__side-item-right .botpress__side-item-text {
  color: #000;
}

.botpress__side-external .botpress__side-internal .botpress__convos-list .botpress__convo-item:hover {
  background-color: rgba(0, 0, 0, .35);
}

@alex @sylvain @Haythamamin

I don’t think ‘./style.css’ is a correct url.
Is your custom css accessible through browser?

Maybe first check file permissions and then add HOST_URL before the file and try to access it from the browser as @alex mentioned.

I hosted the css file on dropbox. still no change. Its coming up in the browser but still aint changing

 	customStylesheet: 'https://www.dropbox.com/s/44j8ed9tdjsg7dm/style.css', // Url to custom .css file

and

 	customStylesheet: 'https://www.dropbox.com/s/44j8ed9tdjsg7dm/style.css?dl=0', // Url to custom .css file link copied verbatim from db share link 

I’m a bit confused, is it customStylesheet or extraStylesheet ?

From the docs, it should be the later.

It doesn’t work with both for me anyway, the first showing no log but the second one saying :

Refused to apply style from ‘http://localhost:3000/lite/my-bot-name/custom-style.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Did you find a way to make it work?

1 Like

No let me try it out now and host it externally.

Hi, any news ? :smiley:


EDIT

I found a way to make it works. I think it was a problem more related to the location of the file than anything.
I put my css in /assets/css/ and i’m using like so : extraStylesheet: "/assets/css/custom-style.css"

This works but the assets folder doesnt get uploaded to Heroku. So unless we are developing a bot that no one will use we still need a solution. I wonder if its really THAT difficult to make custom css a reality. I dont even think its something that Botpress can monetize.It looks like its a ploy to frustrate developers by making them clone every new release, get it working then tear it apart just to add some precious styling. Quite sad really.

I am just going to forget about Botpress Server for now.