topic Re: Change live chat icon in Tickets & Conversations

Change live chat icon

ABatman — Fri, 10 Feb 2023 16:08:32 GMT

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?

Re: Change live chat icon

karstenkoehler — Fri, 10 Feb 2023 20:53:43 GMT

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!

Re: Change live chat icon

ABatman — Sun, 12 Feb 2023 20:12:01 GMT

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

Re: Change live chat icon

SNigam — Mon, 23 Jun 2025 06:14:38 GMT

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

Go to your Hubspot account and navigate to the Live Chat section.
Copy the code provided.
Create a new HTML file on your computer and paste the copied code into it.
Find the following line in the code:
<div class="hs-chat-icon"></div>
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>
Save the HTML file and host it on a web server.
Copy the URL of the hosted HTML file and paste it in the Install code section in your Hubspot account.
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

Re: Change live chat icon

ABatman — Mon, 13 Feb 2023 12:34:59 GMT

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

Re: Change live chat icon

MSchiano — Tue, 09 May 2023 16:11:19 GMT

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.

Re: Change live chat icon

HayatoYu — Wed, 17 May 2023 01:34:18 GMT

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?

Re: Change live chat icon

AhmedAITELAOUAD — Mon, 17 Jul 2023 07:41:38 GMT

where con i find the code provider

Re: Change live chat icon

TangoForge — Tue, 10 Oct 2023 16:26:59 GMT

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

Re: Change live chat icon

JStanleyPG — Mon, 03 Jun 2024 11:05:20 GMT

Hello,

this solution doesn't seem to work in 2024

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

cheer