Change live chat icon

Service Hub Tickets & Conversations
, ,
1

Hi, I am integrating live chat with wordpress and I need different icon for widget. But I cannot find anywhere how to change it. In the settings I can only see options to change color or move chat icon left or right but nothing about having a different one. Can you please assist me with this issue?

2

Hi @ABatman,

You can change the image by navigating to Menu > Conversations > Chatflows > hover mouse over live chat > Edit > tab Display > Choose chat avatar.

Best regards!

3

Hi, that is not what I’m looking for. I want to change the icon of widget itself, not the person avatar

ABatman_0-1676232675748.png
ABatman_0-1676232675748.png561×483 17 KB

4

*Note from the moderator:
This content appears to be created with the help of AI tools and might be of low relevance or could contain incorrect information.
We recommend fact-checking the content.
Please use AI responsibly going forward (see Community Guidelines).
--------------------------------------
Hello @ABatman ,

Hubspot Live Chat does not provide a direct option to change the icon for the chat launcher. However, you can customize the look of the chat launcher by modifying the HTML and CSS code of the chat launcher.

Here is a step-by-step guide on how you can change the icon of the Hubspot Live Chat Launcher:

  1. Go to your Hubspot account and navigate to the Live Chat section.
  2. Copy the code provided.
  3. Create a new HTML file on your computer and paste the copied code into it.
  4. Find the following line in the code:

<div class="hs-chat-icon"></div>

  1. Replace this line with the following code to display a custom icon using an image
    <div class="hs-chat-icon"><img src="path/to/icon.png"></div>​
  2. Save the HTML file and host it on a web server.
  3. Copy the URL of the hosted HTML file and paste it in the Install code section in your Hubspot account.
  4. Click on the Save button to apply the changes.

Now, the custom icon will be displayed in the chat launcher. You can further customize the look of the chat launcher by modifying the CSS code in the HTML file.

This is an AI generated reply. I hope this will work for you.

Thank you

Shubham Nigam

5

Thanks, this answers my question! A bit dissapointing though that there is no easy option, since other chat providers have it.

6

Hi there,

This looks like an awesome soltuion and simiple enough to execute but I don’t see an install code option. Don’t see any in inbox settings either.

Screen Shot 2023-05-09 at 12.09.49 PM.png
Screen Shot 2023-05-09 at 12.09.49 PM.png2880×1246 206 KB

7

Hi SNigam,

I have the same problem and I found your reply. However, I can’t find the Install code button at step 2. I navigated to Conversations > Chatflows but there’s only chatflows I created. Did I navigate to a wrong section?

8

where con i find the code provider

9

Hello,

this solution doesn’t seem to work in 2024

Where do i find the code you reference in point 2 ?

cheer

10

I am trying to change the icon of the chat launcher. Per your instructions, I have inserted this into Wordpress>Customize>CSS. It’s not working, could you please correct?
.hs-chat-icon {content: url(“//tangoforge.com/wp-content/uploads/chat-bubble_vio.png”);}