How to Add a WhatsApp Chat Button to Weebly

Adding a WhatsApp chat button to a Weebly site gives visitors a direct way to continue a conversation without hunting for an email address or phone number. This is especially useful for Australian service businesses, online sellers and creators whose customers often move between a website, a mobile browser and WhatsApp during the same enquiry.

A well-placed button can save time and make your business easier to contact, yet it should never hide content or follow someone around while they are trying to read. The right size, colour and position depend on your layout, the number of pages in your site and whether customers mainly contact you during working hours.

The simplest option is a styled link made with Weebly’s editor. If you want a persistent control in the lower corner, an embedded link with custom CSS creates the familiar floating effect without requiring a separate plugin or paid widget.

Choose the button style that fits your site

Choose between an inline button and a floating widget. An inline button fits naturally beside pricing, contact details, product information or a booking call to action. It takes up less screen space and is less likely to compete with a cookie banner, chat plugin or another fixed element already installed on the page.

A floating button is better when WhatsApp is your main enquiry channel. It remains available as visitors scroll, which is useful for a tradie, coach, photographer or property business that wants enquiries from every page. Keep it small, use your established brand palette and avoid oversized labels that make it look like an advertisement.

If visitors also need to locate a product or article quickly, the custom search guide explains how to add a search field that blends into a Weebly design.

Prepare a reliable click-to-chat link

A click-to-chat address normally contains the business number in international format and can include a prepared message. For Australia, the country code is 61. Remove the trunk zero from a mobile number, so a number written as 0412 345 678 becomes 61412345678 in the link. Use the mobile’s ten digits after 61; landline number rules can differ, so check the destination before publishing.

Add a short default message with the text parameter, using %20 for spaces and encoded punctuation where needed. “Hello, I found your Weebly site and would like to ask about…” is clear and friendly. Australian communication is often direct but relaxed, so a message such as “Hi, could you send through some details?” can sound natural without sounding demanding.

The destination number becomes visible to anyone who inspects the link, so use a business line that is safe to publish and connected to the correct people. Explain in your privacy policy how contact details are handled and follow the Australian Privacy Principles when customers submit personal information through the conversation. If you operate across Perth, Brisbane, Melbourne and Sydney, test messages at different hours and set expectations about when someone will reply.

Add a basic button with the Weebly editor

Open the relevant Weebly page and add a line of text such as “Chat on WhatsApp” or “Message our team.” Select the text, choose the link tool, select an external web address and paste the click-to-chat link. You can then adjust its colour, alignment, font and spacing using Weebly’s normal design controls.

Give the control a descriptive label rather than using vague wording such as “Click here.” An image button can also work, but add useful alternative text so screen-reader users know where it leads. Keep the surrounding wording consistent, especially if the same button appears on several pages.

Preview the page before publishing, then test the button in a private browser window. Repeat the process on your mobile phone because some editors display link settings differently on smaller screens. If customers need the option throughout the site, add it to shared header or footer content where your Weebly plan supports that approach.

Build a floating button with an embed

A floating control requires fixed positioning, which the standard text editor does not provide. Open a Weebly page, insert an Embed element from the content tools and paste the following HTML and CSS into it. If your editor or plan does not allow custom code, use the basic editor button instead.

Replace the example mobile number and message with your own values, then publish the page:

<a class="wa-chat"
   href="https://wa.me/61412345678?text=Hello%2C%20I%20would%20like%20to%20enquire."
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Chat with us on WhatsApp">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M4 4h16v13H9l-5 4V4zm4 5h8M8 12h5"
      fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round"></path>
  </svg>
  <span>Chat on WhatsApp</span>
</a>

<style>
.wa-chat {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 17px;
  border-radius: 30px;
  background: #075e54;
  color: #fff;
  font: 600 15px Arial, sans-serif;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}

.wa-chat svg {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
}

.wa-chat:hover {
  background: #064c45;
}

.wa-chat:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .wa-chat {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: 49px;
    height: 49px;
    justify-content: center;
    padding: 11px;
  }

  .wa-chat span {
    display: none;
  }
}
</style>

The country code and subscriber number must be joined without spaces. Spaces, quotation marks and special characters in the prepared message should be URL-encoded; the example uses %20 and %2C. If you add an ampersand inside HTML, enter it as & so the browser interprets the address correctly.

For a site-wide control, move the code into shared custom code or a repeated footer if your Weebly plan provides that option. Otherwise, add the embed only to pages where enquiries are useful. Never place multiple fixed copies on one page, as visitors may see several buttons stacked together.

Refine placement, accessibility and speed

Button placement affects both visibility and usability. The lower-right corner is familiar on desktop, while the lower-right or lower-left corner works well on phones. Keep the control above mobile navigation and cookie notices, but avoid placing it directly beside another floating button. Test pages with sticky headers, wide images, pop-up forms and long scrolling sections.

The visible label helps people understand the action, especially if they do not recognise the speech-bubble icon. On small screens, the sample CSS hides the label while preserving an accessible name for assistive technology. A strong keyboard-focus outline is also included. If you add movement later, respect reduced-motion preferences and avoid continuous bouncing or spinning.

The sample uses inline SVG and CSS, so it does not require an icon font, external script or image request. That keeps the button lightweight. Before installing a larger third-party chat widget, compare its features with the number of scripts it loads and review general site guidance as an independent reference for evaluating the wider setup.

Test the button and learn from clicks

Test the completed button as if you were a customer using an Australian mobile connection. Open it in a private window, send a test message and confirm that WhatsApp receives the correct number and wording. Check both the installed app and the browser option, then repeat the test with no WhatsApp account signed in. The link should still open an appropriate confirmation screen rather than displaying a blank page.

If nothing happens, check for spelling errors in the international number and make sure the trunk zero has been removed. A missing %20 can place part of the message inside the number field. If the button sits behind another element, raise its z-index; if it covers important content, adjust its size or bottom position. Also confirm that the custom code was saved after editing the Weebly page.

Use the analytics available in Weebly or your connected analytics platform to record button clicks, while avoiding the collection of message contents or other sensitive details. Review the number of clicks, the pages receiving them and the times of day. Update the destination number, default message and opening-hour information whenever your business arrangements change, especially during Australian holiday periods.

Your Weebly contact experience is ready to become more direct. Add the inline button first for a dependable starting point, or use the floating version when WhatsApp is central to your customer journey. Replace the sample details, publish the page and test the complete conversation on mobile before promoting it.