Change live chat icon

[ABatman]

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?

[TangoForge]

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");}

[ABatman]

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

[SNigam]

*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>

5. 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>​

6. Save the HTML file and host it on a web server.
7. Copy the URL of the hosted HTML file and paste it in the Install code section in your Hubspot account.
8. 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

[JStanleyPG]

Hello,

this solution doesn't seem to work in 2024

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

cheer

[AhmedAITELAOUAD]

where con i find the code provider

[HayatoYu]

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? 

[MSchiano]

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.

[ABatman]

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

[karstenkoehler · Accepted solution]

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!