Skip to main content
The WhatsApp button is a floating Chat with us on WhatsApp button for your website or store. A visitor who clicks it lands in a WhatsApp chat with your connected number, with a message already typed, and the conversation arrives in your Inbox like any other WhatsApp message. Use it to turn store visitors into WhatsApp conversations your agent can handle.

​
Before you start

  • At least one WhatsApp number connected under Integrations → WhatsApp. Without one, the Website button tab says No WhatsApp number connected: “Connect a number in the Account tab, then come back to add the button to your website.”
  • A role that can edit settings, to save the button. Members without it can view the tab (“You can view these settings. Ask an admin to change them.”) and still copy the embed code. See Team and roles.
  • Access to your site’s HTML or your store platform’s custom-code setting.

​
Configure the button

1

Open the Website button tab

Go to Integrations → WhatsApp and open the Website button tab.
2

Keep it on

Leave Show WhatsApp button on. When it is off, the button is hidden on your site without removing the code, and the preview reads “Turn on the button to see a preview”.
3

Fill in the Button section

Choose the WhatsApp number customers will message, write the Button text and the Starting message.
4

Adjust Appearance

Pick the Button color, Position and Size. The Preview panel (“Shows your changes before you save them.”) shows the result.
5

Save

Click Save changes. You see Button settings saved. Saved changes reach your site on its next page load, without re-installing the code.

​
What the settings mean

If a value is invalid, Popcorn shows the reason under the field, for example “Keep the button text to 50 characters or fewer” or “Enter a color code like #25D366”, and “Check the highlighted fields” when you try to save.
The small Powered by Popcorn AI line is always shown under the button and cannot be removed.

​
Install it on your site

1

Get the code

Click Get embed code. The dialog Add the WhatsApp button to your website says “Paste this code before the closing </body> tag on every page where it should appear.” Click Copy code; you see Code copied.
2

Paste it once

Add the snippet to your site’s HTML before </body>, or to your store platform’s custom-code or scripts setting so it loads on every page.
3

Test it

Open your site, click the button and confirm WhatsApp opens with the starting message. Send it: the conversation appears in your Inbox.
The snippet carries only your workspace identifier. The number, text, color, position and size are read from Popcorn each time a page loads, so you paste the code once and manage everything from the Website button tab. If you copy the code before saving, a notice says “Your button settings aren’t saved yet”: until you save, the code shows the button with its default text and color.

​
What visitors see

  • A rounded button in the corner you chose, drawn above the page content, with the WhatsApp logo and your Button text in white on your Button color. On phones it sits closer to the edge of the screen.
  • Underneath it, the small Powered by Popcorn AI line.
  • Clicking the button opens WhatsApp in a new tab (or the WhatsApp app on a phone) with a chat to your selected number and the Starting message ready to send.
  • Once the visitor sends that message, the conversation appears in your Inbox on that number and is handled by whichever agent the number is attached to (see Connect knowledge, tools and channels).

​
Change or hide it later

  • To hide the button on every page, turn Show WhatsApp button off and click Save changes. The installed code stays where it is and can be switched back on at any time.
  • Discard in the save bar returns the form to the last saved settings.
  • If you delete the number selected under WhatsApp number, it shows “(disconnected)” and the form says “This number is no longer connected. Choose another one.” The button isn’t drawn until you select another number and save.

​
One script, two channels

The same storefront script also serves Website chat. What visitors see depends on two switches: Change either switch in Popcorn and the site follows on its next page load; the installed code never needs to change. Show on my store lives on the Integrations → Website chat page; see Set up Website chat. Zid and Shopify stores can also be recognised from the store’s own domain, so an older Zid installation of the snippet without workspace details keeps working.