Cannot submit in the index.html because the button with the getelementbyid is never found

I was able to do that yesterday on my react app.

I have a global state value called 'show' which acts as a switch when pressed on button. Then, I use useEffect() to change the value of window.botpressWebChat.sendEvent({ type: show ? "hide" : "show" });

the error says something like cannot read properties of undefined, reading messages and typingUntil

The other thing that occurred to me to try but because I am trying to do something quite complex -which is to open different bots or flows depending on the button that is clicked- is to send the custom event in the handler (something like: window.botpressWebChat.sendEvent({ // type: 'custom-event', // channel: 'web', // }); ) and handle it with the before_incoming_middleware hook, but when doing so, a warning appears in the console with the message "Cannot send data until the webchat is ready botpress"

maybe I'm not sending the event correctly or setting the condition correctly in the hook, because at least it gives me the warning

I've found the solution to it. So, you can pass a "hideWidget: true" in the config. Then you can trigger the onclick event to send window.botpressWebChat.sendEvent({ type: botpressWebChat.webchatOpen ? 'hide' : 'show' });

Yes, you need to initialize the botPressWebChat object first. It would be initialized when you have that inject.js and config.js scripts at the beginning of your index.html The problem for me was that I was using TypeScript, which didn't allow me to compile because there was no property yet on window global object. So, simply just put a comment on the previous line like this:

//@ts-ignore
window.botpressWebChat.sendEvent({ type: botpressWebChat.webchatOpen ? 'hide' : 'show' });

but im still trying to open 2 diferent bots with 2 diferent buttons, but it keeps telling me that that the bots are not ready even though i put both config in the index.html

this is my index: ` const botConfig = { host: "http://localhost:4000", botId: "runrun-bot", botId: "bot-lincencias", extraStylesheet: 'http://localhost:4000/assets/modules/channel-web/custom-styles.css', containerWidth: "96%25", layoutWidth: "96%25", showConversationsButton: false, // showTimestamp: true, enableTranscriptDownload: false, locale: 'browser', disableAnimations: true, disableNotificationSound: true, composerPlaceholder: '', enablePersistHistory: false, useSessionStorage: true, // showUserAvatar: true, // foregroundColor: 'transparent', hideWidget: true, } window.botpressWebChat.init(botConfig); window.botpressWebChat.init({ host: "http://localhost:4000", botId: "bot-lincencias", extraStylesheet: 'http://localhost:4000/assets/modules/channel-web/licencias-styles.css', containerWidth: "100%25", layoutWidth: "100%25", showConversationsButton: false, showTimestamp: true, enableTranscriptDownload: false, locale: 'browser', disableAnimations: true, disableNotificationSound: true, composerPlaceholder: '', enablePersistHistory: false, useSessionStorage: true, showUserAvatar: true, foregroundColor: 'transparent', hideWidget: true, }) ``

This is the event that i send to the bot from my component:

const handler = () => {
    // @ts-ignore
    window.botpressWebChat.sendEvent({
      type: 'custom-event',
      channel: 'web',
    });
  };

And this is my before_incoming_middleware hook:

console.log('HELLOOOOO')
    if (event && event.type === 'custom-event') {
      botpressWebChat.webchatOpen ? 'hide' : 'show'
      console.log('bye')
    }

The console log "HELLOOO" is being displayed in the visual studio code console, but in the browser it gives me the warning that "Cannot send data until the webchat is ready"

Does the Hellooo display on visual studio log?

Also the config script goes up in the not in . That would fix it I guess

I was trying to do that with the two botpressWebChat.init

not always, idk why

the problem could be it stores under same object name, so i am not sure how you can do that, maybe try storing the objects under different names ?

did you try this?

this is just my guess, not sure if it would work

const bot1 = window.botpressWebChat.init(config1);
const bot2 = window.botpressWebChat.init(config2);

thats weird, in the docs i saw it inside the body

try something like this

I think I will continue trying to send an custom event and handle it in the hook, have you tried something like that yet?

In case you have to do something like this, with your tip of the useEffect I Open the bot, and in every handler I reset the state, and send a message event to the bot like this:

const handlerLicenses = () => {
    setOpen(!open);
    // @ts-ignore
    window.botpressWebChat.sendEvent({ type: 'message', text: 'Licenses' });
  };

And then in the bot, in the first node of the main.flow, in the part of the transitions I ask if the event.preview is === "Licenses", if this condition is true, opens the bot in that flow!

But now I have two problems to fix 😂 , 1) when I open the bot its like I cannot interact with the components that are outside the bot, so I have to close the bot again to click any button of the menu, 2) and also i want to delete the previous messages of the conversation everytime I enter to a new subflow of conversation

whats the purpose of sending that message or event?

you can interact outside because iframe takes up the whole space. you can check it from dev tools

i did some css changes and it exactly takes the size of chat window not more than that

so user can use the webpage same as before

wdym by second question?

do you know if conversations can be downloaded in txt format and not simply a file?

nice, im going to make changes there too then

I mean, I want that every time the chat window is opened, the previous messages do not appear above in the conversation, so that the window appears clean. because what happens now is that if you close the webchat window and open it again, the messages are still there. I'm trying to achieve that now

actually I have no clue on that

In which property are you setting the height and width exactly? Because I'm not hitting the nail on the head with those customizations, I don't see size changes

In config, useStorage or usePersist something like that

Turn both to off, if not by default

Not in botpress css, it should be on your webpage css

The error says something like

Uncaught (in promise) DOMException: Permission denied to access property "webchat_store" on cross-origin object

i see so you want it on closing chat window, hmm dont know about that yey

yet*

not sure though, you need to remove the icon and put a text or alttext