Use own button of webpage to open the bot instead ...
# 🤝help
h
Hello everyone! I want to know how I can change the default botpress button to open my bot from a custom button of my website? This function would not be giving me results and it is not entirely clear to me where I should place it: document.getElementById("toggle-bp").addEventListener("click", function() { window.botpressWebChat.sendEvent({ type: webchatOpen ? "hide" : "show" }) })
s
hey @high-cpu-79286 you managed to do it?
h
nope. I have a react app and want to open the bot from a menu. try to manage inside of the component sending the event with a handler on the onClick prop in the button, like this: const handler = () => { window.botpressWebChat.sendEvent({ type: botpressWebChat.webchatOpen ? 'hide' : 'show' }); }; It actually opens the bot but with a few errors on console
Cannot submit in the index.html because the button with the getelementbyid is never found
s
what kind of errors?
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" });
h
oooh cool idea
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
s
are you using typescript?
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:
Copy code
//@ts-ignore
window.botpressWebChat.sendEvent({ type: botpressWebChat.webchatOpen ? 'hide' : 'show' });
h
Great! that solve the error on console, thank you! 😃
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:
Copy code
const handler = () => {
    // @ts-ignore
    window.botpressWebChat.sendEvent({
      type: 'custom-event',
      channel: 'web',
    });
  };
And this is my before_incoming_middleware hook:
Copy code
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"
s
i believe if you want to open 2 bots on same webpage with 2 diff buttons, then you have to create 2 different botWebpressWebChat objects
Does the Hellooo display on visual studio log?
Also the config script goes up in the not in . That would fix it I guess
h
Make sense, any suggestion on how I should do it?
I was trying to do that with the two botpressWebChat.init
not always, idk why
s
it should work
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
Copy code
const bot1 = window.botpressWebChat.init(config1);
const bot2 = window.botpressWebChat.init(config2);
h
Yes! if I move it to the head it shows me this message in the browser console: "No webchat with id bp-web-widget has not been initialized, please use window.botpressWebChat.init first."
thats weird, in the docs i saw it inside the body
s
i use both the scripts in my head, and it works fine
try something like this
h
wtf why doesnt work for me 😩 😂
I think I will continue trying to send an custom event and handle it in the hook, have you tried something like that yet?
s
no i am not sending any custom events
h
Finally I made itttttttt!
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:
Copy code
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
s
haha that's cool
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?
h
The objective of sending the message event is for it to be interpreted in the first node of main.flow, where I have 4 types of transitions and depending on the message that arrives, it redirects you to one flow or another.
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
s
You can just simply turn off that feature
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
h
The only ones I found to configure are useSessionStorage (but this only deletes the history when the browser window is closed, not the bot webchatwindow and it doesn't work when refreshing the page either). and the other one that I found but I can't use because it throws an error in the console is exposeStore.
The error says something like
Uncaught (in promise) DOMException: Permission denied to access property "webchat_store" on cross-origin object
s
you are right
i see so you want it on closing chat window, hmm dont know about that yey
yet*
h
hello @steep-bird-24487 , do you know if the buttons to reset the conversation and close it that appear in the bot header can be customized? like put a button with text instead of an icon?
s
it could be possible, have a look at their css
not sure though, you need to remove the icon and put a text or alttext
3 Views