Help
Help CenterStore widgetsHow to add a chat button for WhatsApp, Instagram, Messenger and more

How to add a chat button for WhatsApp, Instagram, Messenger and more

Add one floating chat button to every page of your store so shoppers can reach you on WhatsApp, Messenger, Instagram, Telegram, phone, text, email, LINE or Viber.

Shoppers with a quick question will ask it in the app they already use. A chat button lets them pick that app and reach you in one tap.

Updated October 11, 20264 min readStore widgets

TL;DR

Go to Store Widgets, click Create Widget and pick Chat button. Tick the channels you use, fill in only those, and click Publish. Then turn on Nudgesmart site widgets under App embeds in the theme editor. The button shows on every page.

Step 1 · Create the button

In Nudgesmart, open Store Widgets and click Create Widget. Pick Chat button.

You can have one chat button per store. It works alongside the WhatsApp button, so you can keep both.

Step 2 · Choose your channels

In the Content tab, open the Settings section under Chat button. Under Channels, tick each one you want shoppers to use. A field shows for each channel you tick.

You can choose from nine channels:

  • WhatsApp. Your number with the country code first and digits only, such as 14155550123.
  • Messenger. Your Facebook Page's username.
  • Instagram. Your Instagram username. On phones it opens a chat in the Instagram app. On computers it opens your profile.
  • Telegram. Your Telegram username.
  • Phone call. The number shoppers call. Phones only.
  • Text message. The number shoppers text. Phones only.
  • Email. The address shoppers write to.
  • LINE. Your LINE ID. Official accounts start with @.
  • Viber. Your Viber number. Phones only.

Type every phone number (WhatsApp, phone call, text message and Viber) with the country code first. Leave out the 0 your local number may start with: a UK number 020 7946 0958 becomes 442079460958.

You don't need to type usernames exactly. Paste your profile link or your @username and Nudgesmart keeps just the part it needs.

Phone call, text message and Viber show only on phones, because computers can't open them. If those are the only channels you tick, the button doesn't show on computers.

Step 3 · Set up the button

Further down the same Settings section, choose where the button sits and how screen readers announce it.

  • Pre-filled message. The text already typed when a shopper opens a WhatsApp chat, such as "Hi! I have a question about…". For email, it's the start of the email.
  • Add the page link to the message. Turn it on to see which product the shopper was looking at.
  • Button name for screen readers. The button shows only an icon, so this name isn't shown on your store. Screen readers read it aloud. Leave it empty to use "Chat with us" in your store's language.
  • Position. Bottom right or Bottom left.
  • Distance from the bottom (px). Raise it to lift the button above something else in that corner.
  • Devices. All devices, Phones only or Computers only.

With one channel, shoppers see a single button that opens it straight away. With two or more, the button opens a small menu of your channels. Tapping the button again closes the menu.

Step 4 · Pick a style

Open the Design tab and choose a Style. The preview shows how the button looks on your store.

Step 5 · Publish and turn it on

In the Visibility card, click Publish. Then turn on the button in your theme.

  1. In Shopify, go to Online Store → Themes → Customize.
  2. Click App embeds in the left sidebar.
  3. Turn on Nudgesmart site widgets.
  4. Click Save.

You can also click Add to store in Nudgesmart, then Turn on, to open App embeds directly.

Nudgesmart site widgets is the same switch that shows the WhatsApp button. If it's already on, your chat button shows as soon as you publish. Turning it off hides both buttons.

Tips

  • Pick the channels you answer. Tick only the ones you check every day, so shoppers hear back quickly. A short menu is quicker for them too.
  • Using the WhatsApp button too? If both sit on the same side, the chat button sits just above the WhatsApp button, so they never cover each other.
  • Check it on your phone. Other apps, such as Shopify Inbox or a sticky add-to-cart bar, often sit in the bottom-right corner too. If the chat button covers one, choose Bottom left or raise Distance from the bottom (px).

Common pitfalls

  • I clicked Publish and it didn't publish. Nudgesmart opens the Settings section and shows what's missing. Tick at least one channel and fill it in. If you ticked a channel and left it empty, add the detail or untick it. Then click Publish again.
  • I published but don't see the button. Turn on Nudgesmart site widgets in App embeds, then click Save.
  • The button shows on my phone but not on my computer. Phone call, text message and Viber only work on phones. Add a channel that works on computers, such as email or Instagram.
  • Instagram opens my profile instead of a chat. That's expected on a computer. On a phone, it opens a chat in the Instagram app.

How to add a WhatsApp chat button

Add a floating WhatsApp button to every page of your store so shoppers can message you in one tap.

How to add social media links to your store

Show links to your Instagram, TikTok, Facebook, YouTube and other profiles, matched to your theme's colors or in each network's own colors.

On this page

TL;DRStep 1 · Create the buttonStep 2 · Choose your channelsStep 3 · Set up the buttonStep 4 · Pick a styleStep 5 · Publish and turn it onTipsCommon pitfallsWhat to read next