Skip to main content

Add and Edit a WhatsApp Floating Button

Tip: In this guide, you will add a WhatsApp floating button to the bottom-right corner so visitors can contact you with one tap. Estimated time: 3 minutes.

A WhatsApp floating button is useful across the site. Visitors can contact you directly while browsing products, posts, or the homepage.

Prepare your number first

Use country code plus phone number. Do not add spaces, plus signs, or brackets. For example: 861234567890.

Find the page first​

Path: AllinCMS Workspace site list → Target site → Enter Admin → Themes → Current theme pages → Home or target page

1Enter the target site adminFind the site you want to edit and click Enter Admin
AllinCMS Workspace site list - the Enter Admin button is marked with a red box
2Open Themes and click PagesClick Pages on the card for the active theme
AllinCMS admin theme list - the Themes entry and Pages button on the active theme card are marked
3Find Home or the target pageFind Home or the page you want to edit in the current theme
AllinCMS admin theme page list - the Themes menu and target pages such as Home, Products, and Posts are visible

Overview​

1Open page designer
2How to add it?
3Enter WhatsApp button and numberAI instruction
4Drag Social Floating Button from FormsManual
5Check URL on the right
6Preview and test click
7Publish page

1. Add It With AI​

In the page designer, enter this AI instruction:

Add a WhatsApp floating button, number is 861234567890

Replace 861234567890 with your own WhatsApp number.

After the button is added, check these fields in the right properties panel:

FieldValue
BrandWhatsApp
URLhttps://wa.me/your-number
LabelWhatsApp or Contact us
PositionUsually Bottom Right

AllinCMS admin WhatsApp floating button add - find Social Floating Button under Forms, set Brand to WhatsApp, and enter the wa.me URL

2. Add It Manually​

If you do not use AI:

  1. Open the page designer.
  2. Select Blocks in the left panel.
  3. Open All Sections / Forms.
  4. Find Social Floating Button.
  5. Drag it into the page or add it.
  6. Set Brand to WhatsApp.
  7. Enter your WhatsApp link in URL.

The WhatsApp link format is:

https://wa.me/861234567890

Replace 861234567890 with your own number.

Usually one floating button is enough

If the page already has a WhatsApp floating button, do not add another one. Select the existing button and update the number.

3. Edit an Existing WhatsApp Number​

If the page already has a WhatsApp icon:

  1. Select the page layer or the WhatsApp item in Layers.
  2. Find URL in the right Props panel.
  3. Replace the old link with your number link.
  4. Click Preview and test it.
  5. Click Publish after it works.

AllinCMS admin WhatsApp floating button edit - select the WhatsApp layer and update the wa.me number link in the right URL field

4. Number Format​

Recommended:

https://wa.me/861234567890

Common mistakes:

Wrong formatWhy to avoid it
https://wa.me/+861234567890Do not add + in a wa.me link
https://wa.me/86 1234567890Do not add spaces
https://wa.me/(86)1234567890Do not add brackets
861234567890A number alone may not open WhatsApp; use the full link
Click it before publishing

Do not stop after the icon appears. Click the button and confirm it opens WhatsApp with your own number.

5. Pre-Launch Check​

Before publishing, check:

  • The WhatsApp icon appears in the bottom-right corner.
  • Clicking it opens WhatsApp.
  • The opened number is your own number.
  • On mobile, it does not cover important buttons or text.
  • The page has only one main WhatsApp floating button.

Next​

Contact Links - make phone numbers and email addresses clickable too.

Popup Form - use a popup form when you need visitor name, email, and inquiry details.