There are many things you can do to customise the behaviour of your chat widget. One of the most popular changes is the ability to customise where on your webpage the widget will appear.
By default, the widget appears in the bottom-right corner of your webpage. Whether by design or necessity, there can be times you'll need to change this. This article will take you through the simple code you'll need to change this.
Getting Started
Assuming you are yet to embed your live chat channel on your webpage, you'll need to log in to Chat, before heading to Settings > Channels and copying the Embed Code that is generated for your live chat channel. If you need additional guidance be sure to click here.
Once you have your embed code, head to the webpage you'd like to add your widget to and paste this <script> in the <head> </head> tags of your page.
Altering where the widget sits on your page is as simple as adding a small snippet of <style> code into the same <head> </head> tags.
We've prepared some examples for you that will change the location of the widget on both web and mobile:
The code below will change the location of the chat-widget by moving it up and to the left by 30px:
<style>
.GeckoChatWidget .ChatButton {
right: 60px !important;
bottom: 60px !important;
}
.ChatContainer {
bottom: 160px !important;
right: 60px !important;
}
</style>
2. This code will flip where the widget appears - ensuring that the widget appears in the bottom-left corner of your webpage, as opposed to the bottom-right.
<style>
.GeckoChatWidget .ChatButton {
left: 30px;
bottom: 30px !important;
}
.ChatContainer {
left: 30px;
bottom: 130px !important;
}
</style>
Feel free to tweak the above code to whatever suits your preferences!
If you're making use of powerful pre-chat workflow messages to drive students to engage with your live chat, then this message can also be moved using the class below:
<style>
/* Moves the pre-chat message, sender avatar, and message close icon*/
.GeckoChatWidget .UnreadMessages {
bottom: 200px !important;
}
</style>
Any questions? Feel free to start a live chat with a member of our support team or explore the rest of our academy at your leisure.