Adding a style sheet to your embedded virtual agent

You can embed your virtual agent 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 Paphus embed API lets you pass your own style sheet to the embed call. You can host this file on your own website, or in the Paphus script library. If using the Paphus script library, just create the file, and use the "File Link" from the script's "Details" page.

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 Paphus JavaScript SDK. The "Div" embed option gives you some sample code that you can customize to suite your needs.