Live Chat: How to move your live chat widget to a different location on your website

In this article, we are going to show you how you can move the live chat button and live chat box to a different location on your webpage as well as change the button image your visitors see in your live chat.  Typically with live chat, you have a chat tab or chat bubble icon that sits in the bottom right of your webpage.  If you have other elements like scroll up icons, recaptcha images, or feedback buttons that are also in the same location, it can make sense to move either the live chat bubble or the chat widget location or both.

Moving the location of both the chat bubble and live chat widget is easily following just a few simple steps.

There are 3 different customizations you can make to the location fo the chat widget.  You can make each of these changes in your own CSS file of your website since we inject the css code into the elements on your page.  So you don't even need to login to our website to make these changes in the live chat.

Here are the live chat button and icons you can customize in your CSS:

• How to change the Live Chat bubble icon location
• How to change the location and size of the opened Live Chat Widget
• How to customize the the live chat bubble image

How to Change the Live Chat Bubble Location

First, if you'd like to move the chat bubble icon highlighted below to the left of side of your webpage, you can use the following CSS override in your CSS template.  Notice that you can change the size and location using this CSS override:

#si-wrapper .silc-btn {     
bottom: 25px !important;     
height: 60px !important;     
width: 60px !important;     
right: 25px !important; 
}

How to change the location and size of the opened live chat widget

Next, you can also apply separate styling to change the location for the chatbot once the chat is opened.  Again this CSS override is applied to your own CSS template.  You can move the chatbot anywhere on your page and also change the height of the opened live chat widget.

Here is an example CSS override:

#siWidget-chat {      
right: 25px !important;      
height: calc(100% - 150px) !important;      
bottom: 90px !important;      
width: 360px !important;  
}

How to Customize the Live Chat Bubble Icon

If you'd like to change the live chat bubble icon that is displayed for your live chat to your own custom image, that's easy too.  Just add a CSS override similar to the below example.  Just make sure that the image you point to is accessible from the public web.

#si-wrapper.si-livechat .silc-btn-button  { 	
background-image: url(https://www.yourwebsite.com/yourimage.jpg) !important; 	
background-size: 55px !important; 	
background-color: transparent !important; 
}

After this CSS is added, your own live chat button will appear on your website.  That's it!  Now your chat widget is customized on your web page.

If you want to see how to embed the live chat or chatbot in your website as an embedded iframe, you can take a look at this article.