Compatibility:

WebSite X5 Evo and Pro

Offering a direct communication channel is now an essential element for any website, especially when it comes to customer support, consultancy, or online sales. WhatsApp is one of the most widely used tools globally, and more and more users expect to be able to contact a business as easily as they would message a friend.


Thanks to the WhatsApp Chat Optional Object, you can activate this feature in a simple, guided way, without writing a single line of code. Just install the object, place it on the page, and define the parameters visually: see how it can be integrated into the Preview page.



Why it's useful

Integrating WhatsApp chat into your website using the dedicated Optional Object allows you to offer a modern and effective contact experience, with several benefits for both you and your visitors: 

  • Instant contact: users can message you on WhatsApp with a single click.
  • Better user experience: visitors don’t have to search for or copy phone numbers.
  • More conversions: a direct and informal chat often results in more inquiries or sales.
  • No coding: no technical knowledge or HTML editing required.
  • Full control: choose the style, position, and behavior of the button with just a few clicks.

Let’s see how to proceed.


How to add the WhatsApp chat to your website

After installing the WhatsApp Chat Optional Object, you can configure it in just a few steps, depending on the type of integration you want to achieve.


The first important decision is where and how you want the chat to appear on the website. In fact, you can use the WhatsApp Chat Object in two different ways:


1. Adding it to a page

If you want the WhatsApp chat to appear as a real box within a specific page (e.g. Contact or Support page), follow these steps:

  • Open the desired page.
  • Drag the WhatsApp Chat Object into a cell of the layout grid.
  • Access the Object settings and, in the Style section, select Show inside the page as the Display type.
  • Proceed to configure the parameters.

In this way, the chat will only be visible on the page where the object has been inserted.


2. Global integration

If you want the chat to be accessible from any page of the website via a small icon floating in the bottom right or left corner, it’s best to insert the Object into the Header or Footer of the template:

  • Go to Step 2 - Template and access the project’s Header or Footer.
  • Insert the WhatsApp Chat Object: in this case, the position doesn’t matter.
  • Access the Object settings and, in the Style section, select Show as popup as the Display type.
  • Proceed to configure the parameters.

In this case, the selector will be visible on all pages of the website, and users will be able to open the chat from anywhere.


How to configure the WhatsApp chat

After placing the Object inside a page or in the template’s Header/Footer, double-click on it to access the settings window and configure all the parameters:

  • First, enter the Phone Number you want to be contacted on, in international format, without spaces or symbols (e.g. 447911123456 for a UK number).
#tip - For professional use, we recommend using a number registered with WhatsApp Business, the official free app designed for small businesses. This allows you to display your business name, set availability hours, send quick replies, and use features designed to improve customer communication. Learn more or download the app from the official website: whatsapp.com/business
  • Next, create your Agent by defining:
    • a Name: for example, “Customer Service” or “James - Support”;
    • an Image: this could be an avatar or your business logo;
    • a Status displayed next to the name.

You can also enter a short Welcome Message to encourage users to write to you.

  • As previously mentioned, through the Display option, you can decide whether to show the chat as a small popup icon or as a dedicated box within the page. If you choose to display the icon, you can define:
    • the Position of the icon on the right or left side of the page;
    • the graphical style of the icon;
    • and whether to display a red dot for notifications.
  • Finally, regarding message sending, you can choose between two modes:
    • Show text field: the user can directly write their message before starting the chat. In this case, you can set a Placeholder text to appear in the field (e.g. “Type your message…”).
    • Show button: only a button will appear to open the chat. You can define the Button text (e.g. “Message us” or “Start chat”).


Eager to use it on your website pages? Install the WhatsApp Chat Object now


Not enough Credits to purchase this Object? See all available Credit packages