Customizing the Hubspot Launcher Icon (size, location, visibility)
SOLVE
Hi!
I am having difficulty customizing the Hubspot Launcher 😭. Is it possible to move the chat launcher icon to a place other than left bottom / right bottom of window? I want to make a separate "support" button on our menu bar.
Launcher icon is big (Hubspot does not allow customizing size) and hides some content in our platform. We also launch the chat widget programmatically when "contact us" buttons are clicked on our platform. It'd be amazing if the widget and the closing icon button only shows up on widget launch.
While HubSpot provides some customization options, there are a few limitations, but let's see what you can do:
1. Although HubSpot doesn't allow changing the default position via their interface, you can use custom CSS to override the default styles. Here's an example of how you might move the launcher icon to a different location: .hubspot-messages-iframe-container { bottom: auto !important; top: 20px !important; /* Adjust as needed */ right: 20px !important; /* Adjust as needed */ } You can adjust the top, right, left, or bottom properties depending on where you want the icon to be placed.
2. Although HubSpot doesn’t provide an option to directly customize the size, you can use CSS to resize the icon: .hubspot-messages-iframe-container iframe { transform: scale(0.75); /* Adjust the scale value as needed */ transform-origin: bottom right; /* Adjust origin to match position */ } Keep in mind that resizing via CSS may affect the appearance of the icon and its contents, so test thoroughly on various devices.
3. Since you’re already launching the chat widget programmatically, you can also control the visibility of the launcher icon. For example, you can hide the icon when the widget is launched and only display it when the widget is closed.
// Hide the launcher icon document.querySelector('.hubspot-messages-iframe-container').style.display = 'none';
// Show the widget window.HubSpotConversations.widget.open();
// Show the launcher icon again when the widget is closed window.HubSpotConversations.widget.on('conversationClosed', function() { document.querySelector('.hubspot-messages-iframe-container').style.display = 'block'; });
4. You can create your own "Support" button in your menu bar, and trigger the HubSpot chat widget when this button is clicked: document.getElementById('support-button').addEventListener('click', function() { window.HubSpotConversations.widget.open(); }); If you’re using a custom button, you might want to hide the default launcher icon altogether: .hubspot-messages-iframe-container { display: none !important; }
While HubSpot provides some customization options, there are a few limitations, but let's see what you can do:
1. Although HubSpot doesn't allow changing the default position via their interface, you can use custom CSS to override the default styles. Here's an example of how you might move the launcher icon to a different location: .hubspot-messages-iframe-container { bottom: auto !important; top: 20px !important; /* Adjust as needed */ right: 20px !important; /* Adjust as needed */ } You can adjust the top, right, left, or bottom properties depending on where you want the icon to be placed.
2. Although HubSpot doesn’t provide an option to directly customize the size, you can use CSS to resize the icon: .hubspot-messages-iframe-container iframe { transform: scale(0.75); /* Adjust the scale value as needed */ transform-origin: bottom right; /* Adjust origin to match position */ } Keep in mind that resizing via CSS may affect the appearance of the icon and its contents, so test thoroughly on various devices.
3. Since you’re already launching the chat widget programmatically, you can also control the visibility of the launcher icon. For example, you can hide the icon when the widget is launched and only display it when the widget is closed.
// Hide the launcher icon document.querySelector('.hubspot-messages-iframe-container').style.display = 'none';
// Show the widget window.HubSpotConversations.widget.open();
// Show the launcher icon again when the widget is closed window.HubSpotConversations.widget.on('conversationClosed', function() { document.querySelector('.hubspot-messages-iframe-container').style.display = 'block'; });
4. You can create your own "Support" button in your menu bar, and trigger the HubSpot chat widget when this button is clicked: document.getElementById('support-button').addEventListener('click', function() { window.HubSpotConversations.widget.open(); }); If you’re using a custom button, you might want to hide the default launcher icon altogether: .hubspot-messages-iframe-container { display: none !important; }
