Multiple images for proactivechat

Tags: 

Hi All, A client website requires a chat widget on multiple pages with different images.
Is their a way to use the proactivechat widget and pass the backgroung image url or would I need to create new widgets for every new image to be used on each web page?

Help is vague on this aspect and cannot find anything on the developer forums.

Thanks
Sanjay

Comments

Is this syndicate proactive chat, or proactive chat in CP?

I'm hoping that you are referring to Syndicated Proactive Chat.

If so, changing the image is easy by passing a different path into the widget initialization configuration.
There is a key named 'avatar_image' that specifies what image to use.

I've build a quick JSFiddle demo that shows how to pass in a different Avatar path into the widget setup. On each page, you'd want to pass in a different image path, depending on your needs.

http://jsfiddle.net/fishnugget77/kcpRC/

Thank you for your reply it was most helpful, apologies for my late reply. The Avatar parameter did work if you want to use the look and feel it provides, our existing install uses a heavily updated proactive.css file, to disable and hide the various other labels/images etc as below.

label_avatar_image: "",
label_dialog_header: "",
label_reject_button: "",
label_accept_button: "",
label_question: "",
label_refuse_checkbox: "",
min_agents_avail_type: "sessions",
label_title: "",
logo_image: "",



What a previous developer has done is to heavily customise the CSS file, and hardcoded in a image reference, so the client site you get a simple clickable image referenced as below in the css file.


It was this I was trying to paramatise, their must be a simpler way to do this without hardcoding in the background image reference or is their a way to reference other css files dependent on the image you want to display?

See below CSS file, with hardcoded background image reference..

/* Apply the border to the right side */

.rn_SyndicatedChatLogoImageDiv
{

clear:right;

float: left;

vertical-align:top;

height: 0px;

margin-right: 10px;

}

.rn_SyndicatedChatHeaderLabelDiv
{

height: 0px;

border-bottom: #036 0px solid;

visibility: hidden;

}

.rn_SyndicatedChatHeaderLabel
{

color: #036;

font-size:.875em;

font-weight:bold;

font-family:Verdana, Geneva, sans-serif;

}

.rn_SyndicatedChatQuestionDiv
{

clear:right;

float: left;

width:180px;

height:100px;

padding-top:5px;

visibility: hidden;

}

.rn_SyndicatedChatQuestionLabel
{

font-size:.75em;

color: #666;

font-family:Verdana, Geneva, sans-serif;

}

.rn_SyndicatedChatAvatarDiv
{

float: right;

height:100px;

width:100px;

padding-top:5px;

visibility: hidden;

}

.rn_SyndicatedCheckbox
{

margin: 5px 0px 5px 2px;

vertical-align:middle;

}

.rn_SyndicatedLabel
{

margin: 0px 0px 0px 7px;

vertical-align:middle;

}

.yui-panel
{

top:0pt;

position:relative;

border:0px solid #888;

overflow:hidden;

}

.rn_Dialog .ft .yui-button button
{

/* min-width: 57px;
50px
margin-right:5px;
*/

position:relative;

z-index:3;

min-width:304px;

background: url(http://yoursite.widget.custhelp.com/euf/assets/images/ChatImage.jpg) left top no-repeat;

border-top: 0px;

border-right: 0px;

border-bottom: 0px;

border-left: 0px;

height:153px;

text-align: center;

border-color: #FFFFFF;

}

.yui-panel.rn_Dialog
{

width:300px;

}

.yui-skin-sam .yui-panel .bd, .yui-skin-sam .yui-panel .ft
{

background-color:#FFF;

top:0pt;

}

.yui-skin-sam .yui-dialog .ft
{

padding:0px 0px 0px 0px;

font-size:.75em;

font-family:Verdana, Geneva, sans-serif;

}

.yui-overlay, .yui-panel-container
{

position: relative;

}

.yui-panel-container.yui-dialog.yui-simple-dialog
{

/*position:absolute;
*/
/*needed if dialog is modal*/

}

.yui-skin-sam .yui-panel .hd
{

font-family:Verdana, Geneva, sans-serif;

font-size:.75em;

width: 290px;

}

.yui-skin-sam .yui-panel-container.shadow .underlay
{

width:305px;

zIndex: 9998;

/* filter: alpha(opacity=20);
*/

filter:none;

background-color:transparent;

}

.yui-skin-sam .mask
{

background-color: transparent;

opacity:0.25;

/*filter: alpha(opacity=20);
*/

filter: none;

}

.rn_SyndicatedButton
{

background: url(http://-uk.widget.custhelp.com/euf/assets/images/ChatImage.jpg) top left no-repeat;

height:26px;

width:113px;

color:#ffffff;

font-weight:bold;

border-width:0px;

padding-bottom:4px;

margin:0px 0px;

}

.container-close
{

visibility: hidden;

}

.yui-skin-sam .yui-button .first-child {

border-style: none;

}

.yui-skin-sam .yui-button .first-child {

/*border-color: #808080;

border-style: solid;

margin: 0 -1px;
*/

border-width: 0 0px;

padding-top: 0px;

}

.yui-button .first-child {

display: block;

}

.yui-skin-sam .yui-panel-container.shadow .underlay {

/*background-color: */

bottom: -3px;

left: -3px;

/* opacity: 0.12;
*/

position: absolute;

right: -3px;

top: 2px;

/* background: url(http://.rightnowdemo.com/euf/assets/images/box01.jpg) left top no-repeat;
*/

}

.yui-skin-sam .yui-button {

background: url("../../../../assets/skins/sam/sprite.png") repeat-x scroll 0 0 transparent;

border-width: 0px 0;

/* border-color: #808080;

border-style: solid;

margin: auto 0.25em;
*/

}

.yui-button {

display: inline-block;

vertical-align: top;

}

.yui-skin-sam .yui-button button, .yui-skin-sam .yui-button a {

/* color: #000000;
*/

font-size: 93%;

/* line-height: 2;
*/

min-height: 10em;

/* padding: 0 10px;
*/

}

yui-skin-sam .yui-dialog .ft span.yui-button-disabled {

background-position: 0 -1500px;

/* border-color: #CCCCCC;
*/

}

.yui-skin-sam .yui-dialog .ft span.yui-button-disabled .first-child {

/* border-color: #CCCCCC;
*/

}

.yui-skin-sam .yui-dialog .ft span.default {

background-position: 0 -1400px;

/* border-color: #304369;
*/

}

.yui-skin-sam .yui-dialog .ft span.default .first-child {

/* border-color: #304369;
*/

}

.yui-skin-sam .yui-panel .ft {

/*border-top: 1px solid #808080;
*/

font-size: 77%;

padding: 0px 0px;

vertical-align: top;

}

.yui-skin-sam .yui-panel .hd, .yui-skin-sam .yui-panel .bd, .yui-skin-sam .yui-panel .ft {

border-color: #808080;

border-style: solid;

border-width: 0 0px;

margin: 0 -1px;

}

.yui-skin-sam .yui-panel {

/* border-color: #808080;

border-style: solid;

*/

border-width: 0px 0;

left: 0;

position: relative;

top: 0;

z-index: 1;

}

.yui-skin-sam .yui-dialog .ft {

/* border-top: medium none;
*/

font-size: 100%;

/* padding: 0 10px 10px;
*/

}

.yui-button yui-button-button
{

border-color: "#FFFFFF";

}

.yui-button yui-button-button yui-button-button-hover
{

border-color: "#FFFFFF";

}

.yui-skin-sam .yui-panel .bd {

padding: 0px;

display:none;

}

You can use CSS to accomplish this.

Whenever you initiate a widget, you specify a "div_id". This is the div that the conditional chat is rendered inside of. Typically you define this div on your HTML page (although it's not required). On that div element you can specify additional HTML attributes, such as a CSS class.

That class will "Cascade" down through the CSS styles used to render the popup. You can use this behavior to create "conditions" in your CSS that allow you to essentially change the background image depending on which class is applied to the DIV.

Here is a basic example: http://jsfiddle.net/fishnugget77/c5UX7/
In this example I show two Chat popups and control the background of each using just CSS.

Zircon - This is a contributing Drupal Theme
Design by WeebPal.