-1

I changed my code from webchat 3 to webchat 4 and also changed style options and so some other stuff. Everything works fine....just the web-chat rendering creates a problem. Here is my code:

(async function() {
            const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { 
            headers: {
              Authorization: `Bearer [MYBEARER]`,
            },
            method: 'POST'
          });
          const { token } = await res.json();
         

            const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
                //console.log(action);
                if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                    dispatch({
                        type: 'WEB_CHAT/SEND_EVENT',
                        payload: {
                            name: 'webchat/join',
                            value: { language: window.navigator.language }
                        }
                    });
                }

                return next(action);
            });
            const styleOptions = {
                botAvatarInitials: 'EY',
                userAvatarInitials: 'YOU'
            };
            const {
                    createCognitiveServicesSpeechServicesPonyfillFactory,
                    createDirectLine,
                    renderWebChat
                  } = window.WebChat;

            var div = document.createElement("div");
            document.getElementsByTagName('body')[0].appendChild(div);
            div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000; background-color:#252525; border:1px solid #252525;'><div  id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer; background-color:#FFE600;'></div></div>";
            
            window.WebChat.renderWebChat({
                directLine: window.WebChat.createDirectLine({ token }),
                webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory(),
                store,
                userID: `You`,
                username: 'Web Chat User',
                locale: 'en-US',
                language: 'en-US',
                styleOptions
            }, document.getElementById('botDiv'));
            document.querySelector('#botDiv > *').focus();
            

            
            document.querySelector('body').addEventListener('click', function (e) {
                e.target.matches = e.target.matches || e.target.msMatchesSelector;
                if (e.target.matches('#chatbotheader')) {
                    var botDiv = document.querySelector('#botDiv');

                    botDiv.style.height = "0px";

                    document.getElementById("mychat").style.display = "block";
                };
            });

            document.getElementById("mychat").addEventListener("click", function (e) {

                document.getElementById("botDiv").style.height = '500px';

                e.target.style.display = "none";
            })
        }()).catch(err => console.error(err));;

I also have in my header all js and css links:

<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/css/botchatey.css">
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
    <script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

HERE IS THE PROBLEM: The whole layout runs perfectly when I remove the "window.WebChat.renderWebChat" function. I can max- and minimize the chatwindow which I cerate in the div-outerHTML.

When I add the renderWebChat function it seems that the excapsulated DIV with the id "botTitleBar" gets eaten and is not showing up. If I press F12 at the running solution I cannot see this DIV in the code running. I spent hours on this now. Any help is highly welcome! Please!

Ricardo Jahn
  • 37
  • 8

1 Answers1

0

I solved the problem by my own. Took me some time but I think it is interesting for others in can you also change from webchat 3 to webchat 4. I have a icon on my web-side which I want to show when the site is opened. When I click on the icon the webchat window opens. When I click on the header of the webchat window, the window collapses and the icon is shown again. Here are the parts of my code needed. The style part:

<style>
    html,
    body {
        height: 100%;
        width: 100%;
    }

    body {
        margin: 0;
    }

    #botDiv {
        width: 400px;
        height: 0px;
        margin: 10px;
        position: fixed;
        bottom: 0;
        right: 0;
        z-index: 1000;
        border: 1px solid #252525;
        display: none;
    }

    #botDiv>* {
        height: 100%;
        width: 100%;
    }

    #webchat>* {
        height: 100%;
        width: 100%;
    }
    
    #botTitleBar {
        cursor: pointer;
        background-color: #252525;
        height: 20px;
        width: auto;
        color: #252525;
    }

    #ContainerDiv {
      margin: auto;
      position: sticky;
      left: 0;
      bottom: 0;
      width: 100%;
    } 
</style>

The divs for the icon and the chat-window which I place into my footer:

<div id="botDiv">
        <div id="botTitleBar">Click here to close chat window!</div>
        <div id="webchat"></div>
</div>
<div class="ContainerDiv" id="ContainerDiv">
        <img id="chaticon" src="@Url.Content("/images/chat.png")"  style="float: right;" role="main"/>
</div>

And finally here is the javascript function:

(async function() {
        
        const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate', { 
            headers: {
              Authorization: `Bearer <YOUR DIRECTLINE SECRET HERE>`,
            },
            method: 'POST'
        });
        const { token } = await res.json();


        const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
            //console.log(action);
            if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                dispatch({
                    type: 'WEB_CHAT/SEND_EVENT',
                    payload: {
                        name: 'webchat/join',
                        value: { language: window.navigator.language }
                    }
                });
            }

            return next(action);
        });
        const styleOptions = {
            botAvatarInitials: 'EY',
            userAvatarInitials: 'YOU',
            hideUploadButton: true,
            backgroundColor: '#252525',
            userAvatarBackgroundColor: '#FFE600',
            botAvatarBackgroundColor: 'FFE600',
            sendBoxBackground: 'Black',
            sendBoxTextColor: 'White'

        };
        const {
                createCognitiveServicesSpeechServicesPonyfillFactory,
                createDirectLine,
                renderWebChat
              } = window.WebChat;

       

        window.WebChat.renderWebChat({
            directLine: window.WebChat.createDirectLine({ token }),
            webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory(),
            store,
            userID: `You`,
            username: 'Web Chat User',
            locale: 'en-US',
            language: 'en-US',
            styleOptions
        }, document.querySelector("#botDiv #webchat")
        );

        document.querySelector('#webchat > *').focus();
        
        document.querySelector( 'body' ).addEventListener( 'click', function (e) {
            const botDiv = document.getElementById("botDiv");
            const webchat = document.getElementById("webchat" );
            const chaticon = document.getElementById("chaticon" );
            const botTitleBar = document.getElementById("botTitleBar");
            e.target.matches = e.target.matches || e.target.msMatchesSelector;
            const parent = e.srcElement.parentElement;
            if (parent.matches( '#botDiv' ) && e.target.matches( '#botTitleBar' ) ) {
                botDiv.style.height = '0px';
                botDiv.style.display = "none";
                chaticon.style.display = "initial";
            }
            else if ( e.target.matches( '#chaticon') ) {
                document.getElementById( "botDiv" ).style.height = '500px';
                botDiv.style.display = "block";
                botDiv.appendChild( webchat );
                botTitleBar.style.backgroundColor = "#FFE600";
                chaticon.style.display = "none";
            };
        });

       
    }()).catch(err => console.error(err));

I know that the directline secret should not be in the code directly but as my page is just a demo page I made it easy. As I searched forever to find a solution I think this may help you in case you face the same problem.

Ricardo Jahn
  • 37
  • 8