Reputation: 43

Deploy customize webchat bot framework

I clone this repo https://github.com/Microsoft/BotFramework-WebChat and I managed to edit css in local. I would like to know what I need to deploy to use webchat online ?

Thanks you for you help

Upvotes: 2

Answers (4)

Salsabeel Baraghithi

Reputation: 187

To deploy your bot follow those steps:

Create an Azure account.

You can create free trial Azure subscription from here.
Deploying the a MS Bot framework code to Azure:
- You can see this video deploying a MS Bot framework code to Azure WebChat channel using Visual Studio.
- Also you can check this tutorial. (However, this tutorial use old version of Azure portal).
After connecting the bot with WebChat channel, you can use the Embed code in your HTML code.

Upvotes: 0

Usama Aslam

Reputation: 1

if you want to use iframe then you can't customize the design . for customize design you need to use Direct line by you can change design as well as make bot fully responsive.

Here is the code i am using working fine for me:

    <!DOCTYPE html>
<html class="no-js lang-en" lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>
  <!-- For Bot Frame -->
  <link href="../assets/SCSS/botchat-fullwindow.css" type="text/css" rel="stylesheet" />
  <link href="../assets/SCSS/botchat.css" type="text/css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body class="personal-body">

  <!-- For Bot Code -->
  <div id="BotChatElement">
  </div>
  <img src="../assets/images/chat-2-icon.png" onclick="openchatbot()" class="open-bot" id="button_chat" />

  <script src="../assets/JS/botchat.js"></script>
  <script>

    var model = {
      "userId": "demo1234",
      "userName": "You",
      "botId": "Chatbot Main Tree",
      "botIconUrl": "",
      "botName": "Chatbot Main Tree",
      "secret": "",
      "iconUrl": "",
      "directLineUrl": "https://webchat.botframework.com/v3/directline",
      "webSocketEnabled": "false"
    };[enter image description here][1]

    BotChat.App({
      directLine: {
        secret: model.secret,
        token: model.token,
        domain: model.directLineUrl,
        webSocket: false,
        sendTyping: true
      },
      user: { id: model.userId, name: model.userName },
      bot: { id: model.botId, name: model.botName },
      sendTyping: true,
      resize: 'window'
    },
      document.getElementById("BotChatElement"));

    function openchatbot() {
      $(".wc-chatview-panel *").removeClass("maximizebot");
      $(".wc-chatview-panel").css({ 'bottom': '0', 'display': 'block' });

    }

    $(".minimize-icon").on('click',
      function () {
        $(".wc-chatview-panel").removeClass("minimize-icon");
        $(".wc-chatview-panel ").toggleClass("minimizebot");
        $(".minimize-icon ").toggleClass("maximizebot");

      });
    $(".close-icon").on('click',
      function () {
        $(".wc-chatview-panel ").removeClass("minimizebot");
        $(".wc-chatview-panel ").removeClass("maximizebot");
        $(".wc-chatview-panel").css({ 'bottom': '-500px', 'display': 'none' });
      });
  </script>
</body>

</html>

Upvotes: 0

Fei Han

Reputation: 27793

I clone this repo https://github.com/Microsoft/BotFramework-WebChat and I managed to edit css in local. I would like to know what I need to deploy to use webchat online?

After you customize&build your own web chat, to embed web chat in your website, you should include your built botchat.css and botchat.js file in your project and reference botchat.css and botchat.js in your web page.

I want to add a widget like this to open my chatbot, what I need to do?

It seems that you’d like to display the chat icon in your web page to allow user dynamically open/collapse your web chat, to achieve the requirement, you need not to modify the botchat.js file, the following code sample work for me , you can refer to it.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="BotChat/botchat.css" rel="stylesheet" />
    <script src="BotChat/botchat.js"></script>
    <style>
        #mychat {
            margin: 10px;
            position: fixed;
            bottom: 30px;
            right: 10px;
            z-index: 1000000;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>Hello World</h1>
        <!--other page contents-->
        <img id="mychat" src="https://i.sstatic.net/RD7i4.png" style="float:right" />
    </div>
</body>
</html>
<script>
    (function () {
        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;><div  id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
        BotChat.App({
            directLine: { secret: '{directline_secret}' },
            user: { id: 'You' },
            bot: { id: '{your_botid}' }
        }, document.getElementById("botDiv"));

        document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
        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";
        })
    }());
</script>

Test result:

Upvotes: 4

Rate Reality

Reputation: 43

If I want to add a widget like this to open my chatbot, what I need to do ? Is it enough to modify the botchat.js file ?

How to have an application like in this post?

Upvotes: 0

Deploy customize webchat bot framework

Answers (4)

To deploy your bot follow those steps:

Related Questions