Website chat button: How to customize it

You can customize your chat button either before or after putting it on your website.

Right after making a new button, you can pick your settings. If you want to change an existing button, just head to Leads >Automate, and select the button from the lead sources on the left-hand side.

In the General settings tab, you can easily add or remove messaging channels by clicking on the icons. You can select from:

• Messenger
• Telegram
• Viber
• WeChat
• Skype
• Instagram
• WhatsApp
• Apple Messages
• Live Chat

If you pick a messenger icon that isn't set up in Kommo yet, a window will pop up to help you install it.

You can see how your button will look on mobile and desktop right from the preview on the right, before you make it live.

There are also lots of ways to edit the button’s appearance. In the Website chat button window, you will find the General settings and the Advanced settings tabs, each with their own set of customization features you can choose from.

General settings

Apart from setting messaging channels, in this tab you can modify how your online chat button will be displayed. You can change your button’s:

• Animation: add movement like waves, trembles, shakes, or keep it static.
• Position: choose left or right side placement on your site.
• Style: adjust size and shape, from circular to square.
• Theme color: select a color for your button that matches your brand.
• Add a welcome pop-up message: you can also add a personalized welcome pop-up message if you want to start a conversation with your visitors and grab their attention.

Advanced settings

When you’ve finished adjusting the general settings, you can open the Advanced settings tab for a whole new range of customization possibilities! You can change your button’s:

• Channel layout: show or hide icons from connected messengers.
• Channel orientation: you can choose between vertical or horizontal orientation for the chat icons, which are displayed when the chat button is clicked.
• Right and bottom margin: by adjusting the margins you can position the button perfectly on your website.
• Keep button visible while scrolling: for button fixation, if your website is scrollable, leaving this setting ‘On’ will make sure the button remains in place during scrolling.
• Apply gradient to your Facebook and Instagram buttons: make these buttons even more attractive enabling gradients to them.

Want to explore more how to make the best out of your online chat button with Live chat? Read our Live chat article here.

You can add action triggers in the Key actions section, and here is where the potential of the online chat button is really on show. Here, you can set up reactions based on specific conditions, giving your chat button some extra smarts. Take a look at the conditions you can use:

• Time on site: trigger a response after a visitor has been around for a bit.
• Pixels scrolled: activate an action when a visitor reaches a certain part of the page.
• Pages visited: react based on how many pages a visitor checks out.
• Visited page: take action when a visitor lands on a particular page.

Once you've picked a condition based on visitor behavior, it's time to choose a reaction. Customize your chat button to respond in different ways or automate processes:

• Button animation: add a subtle movement (waves, tremble, or shake your button) to catch eyes.
• Welcome message: greet visitors with a friendly message from your bot.
• Form pop-up: make it easy for visitors to share info.
• Add task: keep track of important follow-ups by creating CRM tasks.
• Send webhook: share relevant links with your visitors.
• Edit tags: keep things organized by labeling leads.
• Change lead’s user: direct chats to the right team member for personalized help.
• Change field: capture additional details for better context.

With these helpful actions, you can improve the visitor experience without being too pushy. Imagine greeting them with a friendly message or subtly adjusting your button when they've been exploring for a while. Plus, you can smoothly direct chats to the right team member for tailored assistance. For instance, guide them to a helpful resource if they're looking at specific pages.

To set up a key action:

1. Go to the Advanced settings tab >Key actions.
2. Name your Key action > click Add a condition.
3. Pick the one that suits your purpose > click Save.
4. Click Add a reaction and select your action.
5. Then, Save the chat button.

Let's imagine a scenario where the owner of a marketing agency called Bright Ideas Marketing wants to customize the online chat button to reflect their brand and improve customer engagement.

• Choosing messaging channels: They can start by selecting the messaging channels they want to integrate with their chat button. They can choose for Messenger, WhatsApp, and Live Chat, as these are platforms their team frequently use to communicate with clients.
• Adjusting appearance: In the General settings tab, they add a personal touch to the chat button. They select a vibrant shade of blue to match their brand's color scheme. They also choose a round shape for the button to make it visually appealing.
• Idle animation and position: They decide to add a subtle idle animation to the button, making it pulse gently. They position the button at the bottom right corner of the website, ensuring it's easily accessible but not intrusive.
• Welcome pop-up message: To greet visitors and grab their attention, they add a personalized welcome message: “Hello! How can we brighten your marketing today?” This message pops up as soon as someone clicks on the chat button.
• Agent picture and name: They upload a professional photo of themself as the agent, along with their name. This adds a personal touch, letting visitors know who they're chatting with.
• Advanced settings and Key actions: In the Advanced settings tab, they set up key actions to enhance user experience. They program the chat button to pop up a welcome message if a visitor spends more than 30 seconds on the site. They also assign specific pages on their website to different team members, so inquiries related to services like SEO or content marketing go directly to the experts in those areas.
• Chatbots: They set up a chatbot named “BrightBot” to handle common questions about their services, pricing, and more. They ensure the welcome pop-up message is turned on to activate the bot.

Now, visitors to Bright Ideas Marketing's website are greeted with a visually appealing chat button that matches the brand's colors and style. The personalized welcome message and agent details make the experience more engaging. With the chatbot's assistance, visitors get immediate responses to their questions, while the team members receive relevant questions based on their expertise.

If you need more help with setup or troubleshooting, feel free to reach out to our support chat or contact us via WhatsApp. You can also hire a Kommo partner to do all the hard work for you.

Not a user yet? Sign up for our 14-day free trial or book a free live demo.