adapt chat window size

[FRANZKAFKA13]

I'm new to HTML but I need to setup my bot on a limesurvey website. When I insert the HTML code for the web chat control, the chat starts small but gets bigger with every message.

How can I fix the chat size to a predefined size?

Thank you in advance

[corinagum]

Hi @FRANZKAFKA13

It sounds like you may need to specify the size of your Web Chat window. On your index.html, do you have anything that looks like the following? This should be applied to the root container of Web Chat.

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

quoted from #1550:

If you take a look at our samples, there is currently need to specify your styles (sizing) for the #webchat div.

If adding the css to your page does not fix the display of webchat, could you share your index.html here so I can take a look? Thanks!

[FRANZKAFKA13]

Thank you for your quick and helpful response @corinagum.

I managed to fix the window size by adding the following code:

<style` type="text/css">html, body { height: 100%, width: 100% } body { margin: 0px } #webchat, #webchat > * { height: 600px; width: 400px; background-color: #009682; } </style>

Unfortunately, there is still something I can't seem to fix without help. The chat messages are "cut off" at the edge (see image below).

I tried to use CSS padding, but this applies to the whole chat window and the messages still aren't displayed correctly. When I insert the same HTML code into a real-time HTML editor, the messages are not cut off, so it must have something to do with LimeSurvey. Additionally, I don't have an index.html file, LimeSurvey just provides a "question" text/code editor but it is not possible to insert head or body.

[corinagum]

I should have asked in my first comment whether you are using v3 or v4 of webchat, but I infer from #webchat being modified in your screenshot that you are using v4. (woops! :P)

My first guess is that your width may be too small, or perhaps LimeSurvey is shrinking the content. If you paste me your entire code (that is in the text editor), I can try to help further.

Please note that Web Chat v4 also uses css-in-js to modify styling within the component, so adding background-color is not our recommended way of adjusting styling/customization. You can look at the samples 05.a.branding-webchat-styling or 05.b.idiosyncratic-manual-styling (05.a is recommended) [edit to add]: these samples are bare bones right now, but we plan to add more detail into the README.md's soon.

[FRANZKAFKA13]

Yes, I'm using v4 :)

Gladly, a person related to LimeSurvey could fix the issues by adding some CSS code.

This is my current code from the text editor:

<div id="webchat" role="main"> </div>
<style type="text/css">html, body { height: 100% }

  body {
    margin: 0px
  }

  #webchat, #webchat > * {
        height: 600px;
        width: 100%;
  }
  .css-1lk64yk.bubble {
    margin-left:15px;
  }
  .css-1lk64yk.from-user.bubble {
    margin-right:15px;
  }

  .css-1phiexw {
    margin-right:15px;
    margin-left:15px;
  }
  
  #question{QID} input {
    color:blue;
  }
</style>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script> <script>
  // Style modifications
  const styleOptions = {

    // Colors
    bubbleBackground: 'rgba(217, 217, 217, 0.15)',
    bubbleFromUserBackground: 'rgba(0, 150, 130, 1)',
    bubbleFromUserTextColor: 'white',
    bubbleMaxWidth: 600, // maximum width of text message

    // Avatar
    //avatarSize: 100,
    //botAvatarImage: '',
    botAvatarInitials: 'BT', // doesn't seem to work
    //userAvatarImage: '',
    userAvatarInitials: 'CG', // doesn't seem to work

    // Send box
    hideSendBox: false,
    hideUploadButton: true, // doesn't seem to work
    sendBoxButtonColor: '#767676', 
    sendBoxButtonColorOnDisabled: '#CCC',
    sendBoxButtonColorOnFocus: '#333',
    sendBoxButtonColorOnHover: '#333',
    sendBoxHeight: 40,

    // Suggested actions
    suggestedActionTextColor: 'black',
    suggestedActionBorder: `solid 2px #009682`,
    suggestedActionHeight: 30,

  };
  
  window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ secret: 'MY SECRET' }),
    userID: '123',
    styleOptions
  }, document.getElementById('webchat'));

  document.querySelector('#webchat > *').focus();
</script>

Thanks for your advice in terms of styling/customization. I already included it in my code. Unfortunately, some options don't seem to work for me (avatar, hide upload button). I used "defaultStyleSetOptions.js" as a reference for available style options. Do you have an idea why this is the case (it doesn't only apply for LimeSurvey but also for a normal browser window)?

When using the bot framework emulator, the timestamp also included the sender's name (e.g. "Bot at 11:04"). In the samples from this repo, the name isn't present anymore and the timestamp options only allow to change the color. Is there a way to include and customize the bot's name below each message?

Also: do you want me to open a new thread for this "style" discussion?

[corinagum]

@FRANZKAFKA13 We can continue on this conversation :)

Thanks for pointing out that some of the samples don't work for you -- both the avatar and upload button samples are relatively recent additions that won't work on the latest publish of Web Chat. If you are interested, you can update your cdn to use the un-released latest, 4.2.1-master.d9808ca -
so instead of using the cdn ... /latest/webchat.js, you would use .../4.2.1-master.d9808ca/webchat.js, which should make your avatar and hide upload button changes work.

We hope to have these samples as part of a new release (4.2.1) very soon, meaning you would be able to change your cdn link back to latest. Your comment does reveal a shortcoming our repo has where it's not immediately obvious which samples are available in latest. I will file a new issue and bring it up with the Web Chat team. :)

Let me know how that goes for you, or if you have any questions.

[FRANZKAFKA13]

Thank you, it worked like a charm :-) It was also possible to hide the upload button with the css display: none; command.

Is there any downside of using the latest review apart from potential instabilities?

I'd be really glad if you were able to answer my question about the "timestamp" / name tag below each message!

[corinagum]

One thing I forgot about our samples -- we recommend using /master/, which will pull all latest updates, including changes that are not officially released. This is more recommended than a specific number like I instructed you above, sorry for the confusion.

The biggest downside (aside from possible instabilities) is that you will have to manually change your CDN back to /latest/ eventually, and since we don't currently have an update feed, you have to keep checking back with our repo to see when these changes have been added to the latest release. Luckily, we are hoping for a new release very shortly, but in the future the time between deployments may or may not increase.

As for instabilities, anyone using /master/ is welcome to file bugs as usual and we will get to bugs as soon as possible. :)

I missed your timestamp question -- unfortunately, there's no easy way to style the timestamp section of web chat in v4. However, this is the second time that someone has pointed out this feature as something they want to implement, so I will file and issue and we can address it with the team.

[corinagum]

(closing this issue since it looks like everything is covered - if I'm incorrect, please leave another comment and I can reopen)

[rosskyl]

I'm using a modal and am having the same problems with the messages and timestamps being cut off. I was able to fix it similar to how FRANZKAFKA13 did. However, the id's from his fix are different then mine. I ended up removing them and using the other classes to fix it. The bottom also appears to be cutoff and I have not found a way to fix this. Why is this happening? Below is my code.

<div class="modal modal-wide modal-deep fade" id="chatModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sample chat</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="chatWindow"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

            </div>
        </div>
    </div>
</div>

<style>
    #chatWindow {
        height: 100%;
        border-style: solid;
    }

    .bubble {
        margin-left: 15px;
    }

    .from-user.bubble {
        margin-right: 15px;
    }

    .timestamp.transcript-timestamp {
        margin-right: 15px;
        margin-left: 15px;
    }
</style>

<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script type="text/javascript">
    var styleOptions = {
    };

    window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token: 'my token' }),
        styleOptions
    }, document.getElementById('chatWindow'));
</script>

This is a screenshot of what the modal looks like with only the #chatWindow styling.

[corinagum]

Hey @rosskyl it looks like you don't have a width applied to #chatWindow. does adding width: 100% fix your problem?

Please keep in mind that we strongly encourage our users to use glamor instead of CSS to change stylings.

You can look at the samples 05.a.branding-webchat-styling or 05.b.idiosyncratic-manual-styling (05.a is recommended) for more information on styling.

[rosskyl]

I set the width of #chatWindow to 100% and that didn't fix it. I set the rootWidth to 75% and that didn't fix it either. Below is a picture with both of those set.

[Stan-Camp]

@rosskyl This does not completely fix the problem, but I was able improve the bubble look at little with some styling like this. I have not been able to get the timestamp to appear correctly. Also the bubbles are missing either a left or a right border. annoying...

			const styleSet = BotChat.createStyleSet({
				bubbleBackground: 'rgba(192,192,192,0.3)',
				bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
				, botAvatarInitials: 'BF'
				, userAvatarInitials: 'You'
				, hideUploadButton: true
				, sendBoxHeight : 35
				, backgroundColor: 'clear'
				});

			styleSet.textContent = { ...styleSet.textContent,
				margin: '1px 15px 1px 15px',
				padding: '10px 15px 10px 15px'
			};

			BotChat.renderWebChat({
				directLine: directLineVal
				, styleSet
				, store

[corinagum]

@rosskyl sorry for the late reply - if you're still having problems with this, please send me your webchat file so I can take a look. If you prefer to do that over email, you can send to [email protected]

Thanks!

[Stan-Camp]

@corinagum @rosskyl if you have a good solution to the cut off bubbles I would appreciate it if you would post the solution.

[corinagum]

@ImKator please feel free to send me your web chat page also so I can take a look :)

[Stan-Camp]

Sent

[Stan-Camp]

@corinagum I found a solution to my styling problems. I am sure there are better ways to do this, but this does fix the cut off borders. My issue involved some boot strap issues. Anyhow...

::ng-deep {
#mychat .row {
margin-right: initial;
margin-left: initial;
}
}