Once your Live Chat channel has been created and configured, how can we successfully deploy it on your website?
Begin by navigating to Conversations > Widgets and click [+ New widget] in the top-right corner.
Give your widget a name, select the channel you'd like to pair with your widget and freely customize the branding via the Widget icon and Theme colour.
By default, the Widget icon will look like this (using a Theme colour of #9adbe8):
Once done, click Save. Doing so will generate the JavaScript snippet needed to embed your widget on your website. It'll look a little like this:
<script type="text/javascript">
window.GeckoChatSettings = {
widgetId: "XXXXXx00xXXxXXxX-00xXXXXXx0x0xx0x0XXX0Xx00XX",
accountName: "gecko-academy-example",
};
</script>
<script type="text/javascript" src="https://chat-widget.geckoengage.com"></script>
Your embed code can be found again at any time by visting the Conversations > Widget page.
Here are two of the most common methods for embedding your widget:
Adding the widget using your website CMS
Give the generated Live Chat snippet to your web developer or paste it yourself if you have access to the website's editor. Here's where it should go:
Open your website editor (e.g., WordPress, Squarespace, Wix, Drupal, or your custom CMS).
Look for a custom HTML, footer, or tracking code section.
Paste the entire snippet just before the closing
</body>tag of your pages—or into the site's global footer section so it appears everywhere.
Save or publish your website changes. The Live Chat widget should now appear automatically at the bottom corner of your site!
Adding the widget using Google Tag Manager
Go to your GTM account and click “Add a New Tag.”
Choose “Custom HTML” as the tag type.
Paste your widget code.
Set the trigger to "All Pages" or pick specific pages.
Save and Publish your changes!
That's it—the chat widget will now load wherever your GTM container is active!
Widget adjustment
Not happy with where the widget sits on the page? No problem; you can edit the placement using CSS. We've prepared some examples to showcase some of the things you can change:
Changing the widget placement
// Move the chat widget trigger 100px to the left.
.gecko-styles .gecko-chat-widget-app .gecko-chat-widget-app-trigger-container {
left: 100px;
right: auto;
align-items: self-start !important;
}
// Move the chat widget container 100px to the left.
.gecko-styles .gecko-chat-widget-app .gecko-chat-widget-app-container > div {
left: 100px;
right: auto;
}
// Move the dismiss pre-chat message button to the left.
.gecko-styles .gecko-chat-widget-app .gecko-chat-widget-prompt-open-widget-message .gecko-chat-widget-prompt-open-widget-message-close {
left: -8px;
right: auto;
}
Hiding the upload 'paperclip' icon
// Hides the paperclip upload icon to prohibit users from being able to upload documents to Gecko
.gecko-styles .gecko-chat-widget-app .gecko-chat-widget-app-container .gecko-chat-widget-app-footer .gecko-chat-widget-reply-box .gecko-chat-widget-reply-box-controls .gecko-chat-widget-attachment-btn {
display: none !important;
}
Any questions? Start a live chat with our support team, or feel free to explore the rest of our Academy. Spotted an error or want to suggest a future article for the Academy? Let us know here.