Skip to content

Customise the chat button

Change the chat launcher's icon, label, size and corner, move it away from the edges and lift it on phones so it never covers your cart bar.

Last updated 2 min read

On this page

The chat button, or launcher, is the round button in the corner that opens the chat. You can change its icon and label, choose its size and corner, nudge it away from the edges and lift it on phones so it never hides other buttons.

Before you start

  • Who can do this: owners and admins.
  • Plan: all plans.
  • Time: a couple of minutes.

Step by step

  1. Open Settings > Chat widget on the Style tab.
  2. Scroll to Launcher button.
  3. Type a Label (empty = icon only), such as "Chat with us", or leave it empty.
  4. Pick an Icon: Chat bubble, Question mark, Shopping bag or Sparkle.
  5. Choose a Size: Small, Medium or Large.
  6. Choose a Position: Bottom right or Bottom left.
  7. Set Distance from the side (px) and Distance from the bottom (px), each between 0 and 120. The default is 20.
  8. Open the Behaviour tab and set Lift the button on phones (px, to clear cookie bars or sticky carts), between 0 and 200.
  9. Press Save changes.

What happens next

The live preview moves and restyles the button as you go. After you save, the message Chat widget saved. Live on your site within 5 minutes. confirms it. Your site picks up the new button by itself, with no change to the snippet.

The phone lift only applies on small screens, so desktop visitors keep the normal distance from the bottom.

Quick reference

Setting Range Default
Label up to 40 characters none (icon only)
Icon 4 choices Chat bubble
Size Small, Medium, Large Medium
Position Bottom right, Bottom left Bottom right
Distance from the side / bottom 0 to 120 px 20 px
Lift the button on phones 0 to 200 px 0 px

Tips

  • Check your store on a phone after saving. Sticky "add to cart" bars and cookie banners are the usual things the button can cover.
  • Put the button on the opposite side to your store's own floating buttons, such as a back-to-top arrow.
  • A Shopping bag icon can read as a cart. Pick Chat bubble or Question mark if shoppers might confuse them.
  • You can also open the chat from your own button or link. See Control chat with JavaScript.

Troubleshooting

"Only admins can change the chat widget"

Agents and viewers see the settings read-only.

"Check the widget settings"

A value is out of range, for example a label over 40 characters. Shorten it and save.

The button still covers something on phones

Increase Lift the button on phones in steps of 20 px and check again after saving. Remember browsers may keep the old settings for up to five minutes.

Frequently asked questions

How do I move the Hushdesk chat button to the left?

Open Settings, Chat widget, Style and set Position to Bottom left under Launcher button, then press Save changes. You can also change Distance from the side and Distance from the bottom, from 0 to 120 pixels each, to move it further from the corner.

Can I add text to the chat button, like Chat with us?

Yes. Type up to 40 characters into Label under Launcher button, for example Chat with us. Leave the field empty and the button shows only its icon. A short label tends to work best on phones, where space at the bottom of the screen is tight.

The chat button covers my cookie banner on phones. What can I do?

Open the Behaviour tab and set Lift the button on phones to the number of pixels you need, up to 200. The button then sits higher on small screens only, clearing cookie bars and sticky add to cart bars, while desktop visitors still see it in the usual place.

Which icons can I use for the chat button?

Four. Chat bubble, Question mark, Shopping bag and Sparkle. Pick one under Icon on the Style tab. The icon takes your brand colour and the chosen look, so check the live preview to see how it sits on your store before you save.

How big is the chat button?

You choose Small, Medium or Large under Size. Medium is the default and suits most stores. Large makes the button easier to spot and tap, while Small keeps it out of the way on busy product pages. The live preview shows each size on a sample store.

Was this helpful?

Related articles

Still stuck?

Chat with the Hushdesk team. A person answers on every plan.