Zalo Chat Button on Website

Guide Info

Target audience: Website Admin

Time required: 5–10 minutes

Outcome: Zalo chat button floats in bottom-right corner on all website pages — customers click to open the OA directly

This feature adds a floating Chat via Zalo button to the bottom-right of your website. Customers click it to open Zalo directly (the app on phone, Zalo Web on desktop). Ideal if your team primarily handles conversations via Zalo OA and wants to drive more customers to that channel from your website.

Example used throughout this guide: Website Admin Linh connects the Minh Chau Official OA to the company website minchau.vn. Visitors on any product page can now tap the Zalo button and reach the sales team directly — without searching for a phone number or OA ID. Removing that friction means potential buyers who would have dropped off instead send a first message, reducing lead loss at the point of initial interest.

Prerequisites

All three conditions must be met — missing one means the button won’t appear:

Condition	Check Here
Zalo OA is connected (status Connected)	Configure Zalo OA
Website has Live Chat channel enabled	Website ‣ Configuration ‣ Settings → Live Chat field
Module viin_zalo_website_livechat is installed	Apps → search “Zalo Website Livechat”

Install Module

Go to Settings ‣ Zalo and in the Zalo Extensions section, verify that Zalo Website Livechat is enabled.

Configure Zalo Chat Button

Two methods available — both give the same result, choose whichever is easier.

Method 1 — Via Website Settings (use if you have multiple websites)

1. Settings ‣ Websites → click the website name (example: minchau.vn).

2. Website tab → Livechat section → “Zalo Livechat Account” field.

3. Select the OA to link (example: Minh Chau Official) → Save.

Note

The “Zalo Livechat Account” field only appears if the website already has Live Chat channel enabled.

Method 2 — Via Zalo Settings (faster if you have only one website)

1. Settings ‣ Zalo → Zalo Extensions section.

2. “Zalo OA for website” field → select OA → Save.

The button appears immediately after Save — no restart needed.

Verify the Result

Open a private browser window and visit your website. Verify:

• Round Zalo button floats in the bottom-right corner, above the Live Chat button.

• Clicking the button → opens Zalo, not a pop-up on the page.

• Zalo opens the correct configured OA, not a different one.

Multi-Website Setup

Each website has its own OA field — assign independently, no cross-interference:

• Sales website → sales team OA

• Customer support website → support team OA

Use Method 1 to open each website record and assign the appropriate OA.

Note

In a multi-company environment: the dropdown only shows OAs belonging to that website’s company. OAs from other companies don’t appear — that’s correct behavior, not an error.

Common Issues

Symptom	Common Cause	Solution
Zalo button not showing	Missing Live Chat channel, OA not assigned, OA not Connected, or module not installed	Check the three prerequisites in the table above; confirm module is installed in Apps
OA dropdown is empty or missing expected OA	OA not added to Allowed Companies for the website’s company, or OA not Connected	Zalo ‣ Configuration ‣ Accounts → open OA → check Allowed Companies and connection status
Zalo button opens wrong OA	Website assigned the wrong OA	Settings ‣ Websites → open each website → check and correct the “Zalo Livechat Account” field

Related Documentation

• OA not connected → Configure Zalo OA

• Let customers log in to portal via Zalo → Log In to Portal with Zalo

• Manage Zalo partner links → Manage Zalo Partner Links