Customizing the Look and Feel of the Web Messenger
When it comes to customizing your Web Messengers theme to best fit your websites look and feel or your brand, you now have plenty of options.
NOTE: This article is purely about the look and feel of the Web Messenger. If you need to interact with the Web Messenger's behavior using JavaScript, please see this article instead. You may also be interested in the Web Actions integration, that lets you control some aspects of the web messenger (such as disabling or enabling the text input, executing client side javascript, and more) from within Flow XO conversations.
In this article we will discuss:
1. Basic customization using the bot configuration GUI within Flow XO
2. Moving the web widget to the left side of the page
3. Changing the width of the chat window
4. Customizing the entire look and feel of the bot using a custom CSS file
NOTE: If you're hands on and want to dig into a live sample, check out our demo here: https://flowxo-custom-css.glitch.me, and sample project here: https://glitch.com/edit/#!/flowxo-custom-css
1. Basic customization using the bot configuration GUI
When creating and configuring a Web Messenger using the Flow XO user interface, there are a few basic customization elements you can apply, such as the theme color, the chat window height, and your bot's avatar.
NOTE: When configuring any of these properties, it is important to remember to ALWAYS re-embed your bot using the latest widget code on the final page of your bot's configuration, as these settings are part of that code:
Your "Theme Color" decides the color of the talk bubble widget and the color of the text on your web messenger:
2. To place the web widget on the left hand side of the screen instead of the right hand side:
Embed the following CSS element in the <head> of the page your are embedding your web widget:
<style>
.fxo-widget-iframe {
left: 20px;
z-index: 99999 !important;
}
.fxo-messenger-iframe-container {
left: 0px;
z-index: 99999 !important;
}
.fxo-messenger-iframe {
left: 0px;
margin-left: 0px !important;
margin-right: 23px;
}
</style>
3. Changing the width of the chat window
Embed the following CSS element in the <head> of the page you are embedding your web widget:
<style>
.fxo-messenger-iframe {
width:100%;
max-width: 500px; /* This is the width you want your chat widget to be on a big enough screen */
}
</style>
4. Customizing the entire look and feel of the web messenger
If you know a little bit of CSS and you have the capability to host a CSS file on the internet somewhere, you can completely change the look and feel of the chat:
Sample Project
We provide a sample project on glitch.io that demonstrates customizing two different chat widgets using custom CSS (the same two shown above). If you go to the project and click "Remix" you will get a personal copy that you can use to interactively design your own custom chat themes by customizing the CSS.
Click here to see the demo chat widgets: https://flowxo-custom-css.glitch.me
Click here to see the project and the HTML/CSS code: https://glitch.com/edit/#!/flowxo-custom-css
This sample demonstrates customizing the web messenger when embedding as an iFrame or as a widget. In both cases, the customization steps are as follows:
1. Create a custom CSS file. The sample project provides two different commented example CSS files that demonstrate how to customize all the major elements of the chat.
2. Upload your CSS file to the web. You can use Amazon S3, host the CSS as an asset on your own web server, or even use Glitch.io to host your CSS file. Soon we will allow you to hose these files directly within Flow XO, but for now you have to host it yourself.
3. Using either attributes (widget embedding) or URL parameters (iFrame embedding), configure your Flow XO chatbot to look for your custom CSS
Creating a custom CSS file
Your custom CSS file will simply modify the base CSS that are normally applied to the web messenger. This means that if you only want to tweak a few things, your CSS can be short and simple. Or you can override every single style. It's up to you. Here is a typical custom CSS file that overrides all of the major components of the messenger. You can also find this CSS file in the sample project if you want to tweak the values to see what they do.
/*
Style the body element to change the background of the messenger. Here we're using an image, but
you can just as easily use a solid color or a gradient.
*/
body {
background: rgb(103,193,142);
background: linear-gradient(180deg, rgba(103,193,142,1) 0%, rgba(89,167,123,1) 100%);
}
/*
1. Chat Header
*/
/* The Title Background */
.web-messenger-header {
height: 60px;
min-height: 60px;
background: rgb(66,149,102);
background: linear-gradient(180deg, rgba(66,149,102,1) 0%, rgba(45,80,61,1) 100%);
font-size:1.5em;
color:white;
box-shadow: 1px 9px 5px -4px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 9px 5px -4px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 9px 5px -4px rgba(0,0,0,0.2);
border-radius: 12px 0px 0px 0px;
-webkit-border-radius: 12px 0px 0px 0px;
-moz-border-radius: 12px 0px 0px 0px;
}
/* The Title Text */
.web-messenger-header div.title {
color:white;
text-align:left;
}
/* The Reset Button */
button.clear-chat svg {
stroke: white;
fill: white;
}
/* The Close Button */
/* NOTE: Only applies when embedding the messenger as a widget.
This is not shown when embedding as an iFrame. */
button.close svg {
stroke: white;
fill: white;
}
/* 2. Messages */
/* All Messages */
li.message div.bubble {
font-size:1.2em;
border-radius:5px;
}
/* Ths bots avatar image */
li.message > div.main > img.icon {
width: 48px;
height: 48px;
border-radius: 10px;
}
/* Message from the user */
li.user.message > div.main > div.bubble {
color: white;
background-color: rgba(0,0,0,0.5);
box-shadow: -1px 2px 30px rgba(17, 54, 84, 0.03);
}
/* Messages from Bot */
li.bot.message > div.main > div.bubble {
background-color: rgba(255,255,255,0.8);
}
/* The message timestamp */
div.timestamp {
color: cornsilk;
}
/* Ths bots avatar image */
li.message > div.main > img.icon {
width: 48px;
height: 48px;
border-radius: 10px;
}
/* The typing indicator */
.web-messenger-typing > div {
background-color: rgb(201, 201, 211);
}
/* 3. Choices */
/* Quick Reply Bubbles */
li.message div.choice {
border-color: rgba(200,197,0,0.6);
color: white;
background-color: rgba(0,0,0,0.5);
border-radius: 20px;
padding:10px;
}
/* The body of a card */
div.card {
border: solid 1px rgba(0, 0, 0, 0.6);
border-radius: 10px;
overflow: hidden;
z-index: 0;
background-color: rgba(255,255,255,0.95);
}
/* The message of the card */
div.card > div.main {
background-color: rgba(90,90,90,0.8);
}
/* The text in the message area of the card*/
div.card > div.main > div.text {
color:white;
}
/* The title of the card */
div.card > div.main > div.title {
color:white;
}
/* The message composer (where the user types their chats) */
div.compose {
background-color: rgba(255,255,255,0.7);
padding: 10px 20px;
}
/* The actual composer textbox */
div.compose textarea {
background-color:rgba(255,255,255,0);
color:#999;
}
/* The send button inside the composer*/
#send-button-icon {
stroke: #999;
fill: #999;
}
/* The upload button inside the composer */
#upload-button-icon {
fill:#999;
stroke: #999;
}
/* This class controls a blank white circle that
is a placeholder for the app avatar while the messenger is loading.
It can look out of place on a colorful background, so feel free to hide it
if it bothers you.
*/
.web-messenger-message-icon-placeholder {
display:none;
}
/* Attribution */
div.powered-by {
color: cornsilk;
}
Upload your CSS file to the web
To customize the web messenger with your own CSS, your custom CSS file has to be hosted on a web server somewhere. Since you are already hosting a website, you may find it easy to host your custom CSS as simply another web asset on your existing server. Or, you can use a service like AWS S3 or even Glitch.io. Eventually, we will allow you to self-host your custom CSS on Flow XO. If you prefer to host your CSS file with us, please contact support and we can upload your custom file to our server. The downside of this is that when you need changes, it may take us some time to apply your updates though the helpdesk at support@flowxo.com. So if you think you'll be making frequent changes, you'll be better off hosting your CSS somewhere you control until we are able to release our self service hosting.
Configure your Flow XO chatbot to use your custom style
Exactly how you configure your chatbot to use your custom style will depend on if you are embedding the bot in an iFrame or embedding the code snippet to put a chat widget on your page. We will show both methods.
Customizing the Chat Widget
To customize the chat widget you will specify your CSS file in data attributes on the script tag that you use to embed the widget. Here's an example (from the sample project). Let's say your custom CSS is hosted at https://flowxo-custom-css.glitch.me/plainbot.css:
<!--
This section demonstrates customizing a web messenger integrated as a widget.
Note that the custom CSS url and the themeCssOnly flag are specified as data attributes.
-->
<script
src="https://widget.flowxo.com/embed.js"
data-custom-css-url="https://flowxo-custom-css.glitch.me/plainbot.css"
data-theme-css-only="true"
data-fxo-widget="eyJ0aGVtZSI6IjY3QzE4RSIsIndlYiI6eyJib3RJZCI6IjYwYTFhNTY5MjgwMWI5MDA1ZWJlNTBkNCIsInRoZW1lIjoiNjdDMThFIiwibGFiZWwiOiJJIGFtIHRoZSBIZWFkZXIgVGV4dCEifSwicG9wdXBIZWlnaHQiOiI2NSUifQ==" async defer>
</script>
This takes the default embedding code provided by the bot configuration screen and adds "data-custom-css-url" that should point to the URL of your custom CSS file. You may also notice that there is another new attribute: data-theme-css-only. This is a special property that can be used to disable the "Theme Color" setting on the Flow XO bot configuration page from being applied to your messenger so that 100% of the colors will be taken from your custom CSS. If this attribute is NOT specified, then the font and button colors will be taken from your bot configuration screen, no matter how you specify them in the CSS.
Customizing a web messenger embedded as an iFrame
To customize a chat widget embedded as an iFrame, we need to specify the URL of the custom css in a URL parameter. Let's say your custom CSS is hosted at https://flowxo-custom-css.glitch.me/jellybot.css:
<!--
This section demonstrates customizing a web messenger integrated as an iFrame.
Note that the custom CSS url and the themeCssOnly flag are specified through URL parameters.
We gave the iFrame a class of "fxo" so that we could style it in the style tag in the header of this document.
-->
<div class="chat-container">
<iframe
class="fxo"
src="https://fxo.io/m/refined-architected-6378?customCssUrl=https://flowxo-custom-css.glitch.me/jellybot.css&themeCssOnly=true" allowfullscreen>
</iframe>
</div>
Note that the custom CSS url has been added to the URL as the query parameter "customCssUrl". As with the widget embedding sample, you can see to apply themeCssOnly which will override the Theme Color specified in your bot configuration with the colors specified in your custom CSS.
Changing the Widget Icon and other ways of customizing how the Web Messenger is embedded in your website:
The web messenger can be embedded on your site in several ways:
- As a chat widget that pops open as a sidebar when the user clicks the talk bubble. You can also have the sidebar appear when the user clicks on of your own buttons/links.
- As an overlay(modal dialog) that opens when the user clicks a button on your page
- Loaded into a specific element you have positioned on your page
- Embedded as an iframe on your page
- As a standalone web page with a URL you can direct your users to
For examples of how to embed the widget using these various options, please click here. For the source code for these examples, please see this link.
Happy Customizing
That's it! The best way to get started is to "Remix" our sample on Glitch.io and play with those CSS files until your web messenger looks and feels just like you like it. As always if you have questions, feedback or issues with this or any other feature, please reach out to support@flowxo.com.
Bonus Materials:
1. For advanced users that want to embed the chat directly into your own web page so that you can take advantage of the JavaScript API but also control the size and position of the messenger on the page as if you were using an iFrame, you can study this sample project that shows how to do just that: https://glitch.com/edit/#!/flowxo-custom-embedding
2. Here is a link to our base theme, which includes all of the styles the messenger users. This is a raw CSS file and not heavily documented, but you may find it useful.