Build ChatGPT chatbots, surprisingly fast 🚀 Use our Discord server https://discord.gg/botpress to interact!

Botpress

Hello, I am currently sending information from my chatbot to my website. The information is being received correctly, but the problem is that I want to execute some CSS (to hide a text input) when this event is received. Unfortunately, the CSS code isn't working. Could you please help me?

This is my code:

window.botpress.on('customEvent', (event) => {
    console.log('Botpress event received :', event);


    if (event && event.status === "banni") {
        console.log("Action : Hide input text.");


        const style = document.createElement('style');
        style.id = "ban-style"; 
        style.innerHTML = `
            .bpComposerInputContainer {
                display: none !important;
            }
        `;
        document.head.appendChild(style);
    }
});

For those who are reading and run into something similar: You can use the !important rule give the value of a specific property the highest priority. This is especially usefull when your CSS looks fine in your webchat but not in production. 

*example: *
p {
  background-color: yellow !important;
}