Skip to main content
The WhatsApp widget 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 Channels → WhatsApp. Without one, the Widget tab shows No WhatsApp Business Accounts Connected.
  • A role that can edit settings, to save the widget. Members without it can view the tab but not save (see Team and roles).
  • Access to your site’s HTML or your store platform’s custom-code setting.

​
Configure the button

1

Open the Widget tab

Go to Channels → WhatsApp and open the Widget tab.
2

Keep it enabled

Leave Enable Widget on. The help text confirms Widget is active and visible on your website. When it is off, the fields are locked, the preview reads Widget preview is disabled, and the button is hidden on your site.
3

Fill in General Settings

Choose the WhatsApp Business Number, write the Pre-filled Message and the Call-to-Action Text.
4

Adjust Appearance

Pick the Widget Color, Position and Size. Live Preview on the right shows the result.
5

Save

Click Save changes. Popcorn confirms with Widget configuration saved successfully. 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 Call-to-action text must be 50 characters or less or Please enter a valid hex color code, and asks you to fix the validation errors before saving.
The Branding notice on the tab applies to every installation: the 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 Embed Code dialog reads: “Copy and paste this code into your website’s HTML to add the WhatsApp widget. Place it just before the closing </body> tag for best results.” Click Copy.
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 pre-filled message. Send it: the conversation appears in your Inbox.
The snippet carries only your workspace identifier. The number, text, colour, position and size are read from Popcorn each time a page loads, so you paste the code once and manage everything from the Widget tab.

​
What visitors see

  • A rounded button in the corner you chose, drawn above the page content, with the WhatsApp logo and your Call-to-Action Text in white on your Widget 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 Pre-filled 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 bound to (see Connect knowledge, tools and channels).

​
Change or hide it later

  • To hide the button on every page, turn Enable Widget 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 configuration; it is only offered once a configuration has been saved.
  • If you delete the number selected under WhatsApp Business Number, the button has no destination and is not 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 toggles: Change either toggle in Popcorn and the site follows on its next page load; the installed code never needs to change. Show on my store lives under Channels → Website Chat (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.