How does customLauncher works?

[jiaqihuangrerere]

Hello, if i have a component function, and I pass it the Widget like this

Welcome(props) { return

Hello Yeah

; } <Widget ... customLauncher = {this.Welcome} />

It is not displaying Hello Yeah, so how do you use this function?

[mcallegari10]

Hi @jiaqihuangrerere thanks for asking! This new prop can be used as the following:

import Launcher from '@components/Launcher';

...

class App extends React.Component {

  getCustomLauncher = handleToggle => (
    // The return will be your own Launcher component
      <Launcher
        handleToggle={toggle}
        ...
      />
   );

  ...

  render() {
    return (
       <Widget
         customLauncher={handleToggle => this.getCustomLauncher(handleToggle)}
       />
    );
  }
}

Hope this helps! 😄

[jiaqihuangrerere]

<Launcher handleToggle={toggle} ... />

What does toggle refer to? Are you referring to this page? https://github.com/Wolox/react-chat-widget/blob/master/src/components/Widget/components/Launcher/index.js

[mcallegari10]

That handleToggle is our function to toggle the Widget (you can see it in here). You can use it to toggle the widget as much as you need 😄

[mrwadepro]

I am struggling with this. I am trying to change the Launcher image picture. I see you pass {toggle} as a prop to Launcher. Are we defining this callback function to return a bool?

[tafaust]

@mcallegari10 First of all, thanks for your commitment collaborating in this project! Can you please shed some light how to properly use the custom launcher?

I am trying to build a simple modal, i.e. neither full-screen nor a small window for a chatbot. I'll post my code as soon as I got something useful… looking towards your feedback in the meanwhile!

[oliviatian27]

I am struggling with this. I am trying to change the Launcher image picture. I see you pass {toggle} as a prop to Launcher. Are we defining this callback function to return a bool? getCustomLauncher = handleToggle => ( <button onClick={handleToggle}>Chat Now</button> ) <Widget launcher={handleToggle => this.getCustomLauncher(handleToggle)} /> I tried this way and it works !

[pabloferro]

@jiaqihuangrerere if you want to use an Image as a launcher you can do something like:

  launcher={handleToggle => (
    <button onClick={handleToggle}><img src={yourImage} /></button>
  )}

[salimbene]

Hello! Thanks for this awesome component! Have a question, is it possible to not have a launcher an simply have a big chat window taking the whole screen? Cheers,

[EdmarPereira]

How can I get onClick event of the widget, I want to use the default button