How can i make chat bot appear as live chat using direct line API?

3
votes
<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
  </head>
  <body>
    <div id="bot"/>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
    <script>
      BotChat.App({
        directLine: { secret: direct_line_secret },
        user: { id: 'userid' },
        bot: { id: 'botid' },
        resize: 'detect'
      }, document.getElementById("bot"));
    </script>
  </body>
</html>

I have this code to embed a bot as a live chat using direct Line API instead of the usual iframe but when i put in my directline secrete key, the Bot is occupying the whole web page. I need it to appear by the bottom right of the web page and pop up as a life chat when a user clicks on it. Please someone should guide me in achieving this. Thanks

2
botframeworkdirect-line-botframework

2 Answers

6
votes

Your problem is about the way you are displaying your div including the bot: <div id="bot"/>

You can style this div to appear like you want; there are several samples provided on the bot Webchat Github project:

I would highly suggest to take a look at the 1st sample which has a demo of narrow, normal and wide div

3
votes

As Nicolas R suggested, you can style the container div <div id="bot"/> to position it at bottom right corner of web page. I achieved same requirement in a project, the following sample code works for me, you can refer to it. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
    <style>
        .wc-chatview-panel {
            width: 350px;
            height: 450px;
            position: relative;
        }

        #bot {
            position: fixed;
            bottom: 0;
            right: 0;
        }

        .closechat {
            top: 405px !important;
        }
    </style>
</head>
<body>
    <div id="bot"></div>
</body>
</html>
<script>
    BotChat.App({
        directLine: { secret: "{your_directline_secret}" },
        user: { id: 'You' },
        bot: { id: '{Your_BotId}' },
        resize: 'detect'
    }, document.getElementById("bot"));

    $(function () {
        $("div.wc-header").prop("isopen", "true");

        $("div.wc-header").click(function () {
            var isopen = $(this).prop("isopen");
            //alert(isopen);
            if (isopen == "true") {
                $("div.wc-chatview-panel").addClass("closechat");
                $("div.wc-header").prop("isopen", "false");
            } else {
                $("div.wc-chatview-panel.closechat").removeClass("closechat");
                $("div.wc-header").prop("isopen", "true");
            }
        })
    })
</script>

Test result:

enter image description here