CODEWITHSUNDEEP
reactjschatbotweb-chat
Basil
Basil

Reputation: 41

Call chatbot framework on button click

I am new to react js and i want to call chatbot using directline token. I have the code given below. My need is to call the chatbot when the button is clicked and must get minimzed. I don't know how to do that and this appears to be a simple question. Help me in resolving it. Thanks in advance.

import React from "react";
import { DirectLine } from 'botframework-directlinejs'; 
import ReactWebChat from 'botframework-webchat';
import "./Login.css";

export default class extends React.Component {
    constructor(props) { 
        super(props);
            this.directLine=new DirectLine({ token: '' });
      }
      Chat = ()=> {
        <ReactWebChat directLine={ this.directLine } />
      }
    render(){
        return (
            <div className="image">
                <img src={require('../src/Images/banner.jpg')} ></img>
            <form>
            <div className="ChatBot" > <button onClick={this.Chat} >Click</button>
            </div>
            </form>
            </div>
        );
    }
}

and i need to customize the style of chat bot framework. How can i implement it. The above code maybe not right. Kindly help me in figuring it out.

Upvotes: 0

Views: 1528

Answers (1)

Armend Ukehaxhaj
Armend Ukehaxhaj

Reputation: 657

You can follow this sample provided by Microsoft. It is a good starting point for the features you're asking for (minimizing the chat window). Basically, you create a these two React components:

MinimizableWebChat.js & WebChat.js

I won't be going through the code since the README of the sample has a detailed description of the implementation. But in MinimizableWebChat.js you handle the creation of the store, handling the fetching of the token, and the handling of the minimization. In WebChat.js you can use the createStyleSet method to customize the WebChat as you wish. You can see all the properties you can set from that method here. I hope I was able to help you.

Upvotes: 3

Related Questions