Adding a style sheet to your embedded chatbot

You can embed your bot on your website using JavaScript, or HTML. You can get the code to embed your bot from the Embed tab, by clicking on the Embed button from your bot's main page.

There are several embedding options to choose from including:

• Box - embed using JavaScript as an in-page popup from a button anchored to the browser bottom corner
• Div - embed using JavaScript inside your own page that you can customize in HTML and JavaScript
• Link - embed as a link to a popup window
• Button - embed as a button to a popup window
• Bar - embed as a button anchored to the browser bottom corner to a popup window
• Bubble - embed as a chat now bubble anchored to the browser bottom corner to a popup window
• Frame - embed inside your HTML page as an HTML iframe

The embed page lets you customize several settings when embedding, including the colors and text. However, you can customize a lot more if you use your own style settings or style sheet. You can also customize things in JavaScript.

Using a Style Sheet

A css style sheet is a text file format used to describe formatting for an HTML document. Style sheets can contains colors, fonts, sizes, and other formatting information. The BOT libre embed API lets you pass your own style sheet to the embed call. You can host this file on your own website, or in BOT libre's script library. If using BOT libre's script library, just create the file, and use the "File Link" from the script's "Details" page.

There is a sample file here.

You can custom any element in the embedded chat, here are some examples,
#send { background-color: #c90404; } menu img { background-color: white; padding: 2px; } span { color:#c90404; } h1 { color:#c90404; } #admin-topper a { color: #c90404; } response { color:#c90404; } span.chat-1 { color:grey; } img.toolbar { background-color:white; padding:2px; }

To customize other elements, just open the embedded chat page and right click in Chrome or other browsers and select "Inspect Element" from the popup menu. You will then be able to find the name, id, or class of the element. You can then add that name to your style sheet.

For more info on style sheets see, http://www.w3schools.com/css/

Using the style tag

When using the "Box" embed option, JavaScript is used to embed the chatbot, so you cannot pass your own stylesheet, as it is embedded in your own page. You can add your style sheet to your page, or use the style tag to add styles to the page. Some things cannot be customized using style sheets, for these you can use JavaScript to customize the generated HTML after it has been initialized.

For example to remove the max and close buttons from the popup use,

#boxclose {
  display: none;
}
#boxmax {
  display: none;
}

This example will customize the chatbot Box embedding using a style tag and JavaScript,

<style> .boxbar { text-decoration:none; text-align:center; padding:3px 22px; border:ridge 1px #004F72; border-radius: 8px; font:24px "Palatino Linotype", "Book Antiqua", Palatino, serif; color:#E5FFFF; background-color:#ffcccc; background-image: -moz-linear-gradient(top, #ffcccc 0%, #c90404 60%); background-image: -webkit-linear-gradient(top, #ffcccc 0%, #c90404 60%); background-image: -o-linear-gradient(top, #ffcccc 0%, #c90404 60%); background-image: -ms-linear-gradient(top, #ffcccc 0% ,#c90404 60%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa0f0f', endColorstr='#c90404',GradientType=0 ); text-shadow: 2px 0px 0px #121111; filter: dropshadow(color=#121111, offx=2, offy=0); } #response { color: #c90404; background-color:black; } .boxmenu a { color: #c90404; } #boxclose { display: none; } #boxmax { display: none; } </style> <script type='text/javascript' src='http://www.paphuslivechat.com/scripts/sdk.js'></script> <script type='text/javascript'> SDK.applicationId = "<your-id>"; var sdk = new SDKConnection(); var web = new WebChatbotListener(); web.connection = sdk; web.instance = '<bot-id>'; web.instanceName = 'MyBot'; web.caption = 'Chat With MyBot ^'; web.createBox(); document.getElementById("box").style.borderColor = "white"; </script>

You can customize most things this way, but if you need further customization, you can just use your own JavaScript to access your bot using the BOT libre JavaScript SDK. The "Div" embed option gives you some sample code that you can customize to suite your needs.