Search code examples
javascriptbotframeworkchatbot

How to modify the webchat container of Microsoft Chatbot when using DirectLine

I have chatbot where I am using DirectLine to embed the bot in my website. The DirectLine UI looks like a page with white background and I want to modify it to look like the image below or close to it:

enter image description here

I am following the samples here.

I was able to change the size of the container but I could not change the font or background color of the chat bubbles using the code provided. This is my code:

<body>
<div id="webchat" role="main">

</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<!--<script src="webchat.js"></script>-->
<script>
    const styleSetOptions= window.WebChat.createStyleSet({
        bubbleBackground: 'rgba(0, 0, 255, .1)',
        bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
    });

    var d1 = window.WebChat.createDirectLine({ token: '<secret token>' })
    var siteDomain = document.URL
    window.WebChat.renderWebChat(
        {
            directLine: Object.assign(
                {},
                d1,
                {
                    postActivity: activity => {
                        var newActivity = Object.assign({}, activity, { channelData: { "siteDomain": siteDomain } });
                        return d1.postActivity(newActivity);
                    }
                }),
        styleSetOptions 
        },
        document.getElementById('webchat')
    );
</script>

This does not work. I have downloaded the CDN webchat.js. I have integrated it locally as well by creating my own JS file and linking it in my HTML page, it didn't work. Am I missing something?

Solution

  • You have to pass the styleSet you created to renderWebChat. Your styleSet is created but is not being used anywhere.

    check the below example:

     const styleOptions = {
        bubbleBackground: 'rgba(0, 0, 255, .1)',
        bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
     };

     window.WebChat.renderWebChat(
        {
           directLine: window.WebChat.createDirectLine({
              secret: 'YOUR_BOT_SECRET'
           }),

           // Passing 'styleOptions' when rendering Web Chat
           styleOptions
        },
        document.getElementById('webchat')
     );