Hướng dẫn tạo mã nhúng và gắn khung chat lên website

Năm bước gắn mã nhúng lên website

Cần chuẩn bị:

• Địa chỉ website, ví dụ tencuahang.vn.
• Quyền vào trang quản trị website để dán mã. Website do công ty thiết kế hay người quen làm thì xem cách nhờ người làm web gắn hộ.

Bước 1: Tạo tài khoản Khách Mê

Mở trang đăng ký Khách Mê và chọn một trong hai cách. Tài khoản mới dùng gói Miễn phí, dùng mãi mãi, không cần thẻ ngân hàng.

Cách 1: Đăng ký bằng tài khoản Google

1. Bấm nút đăng ký bằng Google

   Nút nằm trên cùng khung đăng ký. Chọn tài khoản Google bạn muốn dùng, không phải chờ thư xác nhận.

2. Bấm Bắt đầu

   Màn Một bước nữa là xong hiện ra: kiểm tra Tên của bạn, thêm Tên công ty nếu muốn (không bắt buộc), bấm Bắt đầu.

Cách 2: Đăng ký bằng email

1. Điền khung đăng ký

   Điền Tên của bạn, Tên công ty (không bắt buộc), Email và Mật khẩu từ 8 ký tự trở lên, rồi bấm Tạo tài khoản.

2. Xác nhận email

   Mở thư Khách Mê vừa gửi, bấm Xác nhận email. Chưa thấy thư thì xem thêm mục Thư rác, mục Quảng cáo, hoặc bấm Gửi lại email xác nhận.

3. Bấm Bắt đầu

   Ở màn Một bước nữa là xong, kiểm tra tên rồi bấm Bắt đầu.

Xong bước này, bạn vào trang Tổng quan của Khách Mê.

Bước 2: Thêm website để tạo mã

1. Mở mục Website

   Bấm Website trên menu (trên điện thoại là thanh menu dưới màn hình). Tài khoản mới còn có ô Thêm website đầu tiên ngay ở trang Tổng quan.

2. Điền Tên website

   Tên để bạn nhận ra website này trong Khách Mê, thường là tên cửa hàng hay công ty.

3. Điền Tên miền

   Địa chỉ website sẽ gắn khung chat. Dán nguyên địa chỉ trên thanh trình duyệt cũng được, Khách Mê tự bỏ phần https:// và www.

4. Bấm Thêm website

   Mã nhúng được tạo ngay, mỗi website một mã riêng.

• Một tên miền nhận luôn các tên miền con: khai tenmien.vn thì shop.tenmien.vn cũng hiện khung chat.
• Khai kèm nhánh như tenmien.vn/khoa-hoc thì khung chat chỉ hiện ở các trang bắt đầu bằng /khoa-hoc.
• Ngay khi thêm website, trợ lý AI đã bật sẵn và tự đọc các trang của website làm kiến thức, nên gắn mã xong là trả lời khách được.

Gói Miễn phí chạy 1 website. Gói Pro chạy 3 website, gói Max không giới hạn; nâng gói ngay trong app khi cần thêm website.

Bước 3: Chép mã nhúng

1. Tìm thẻ website vừa thêm

   Thẻ có nhãn Vừa thêm, bên trong mở sẵn khối Gắn mã lên website.

2. Bấm Chép mã

   Nút đổi thành Đã chép là mã đã nằm trong bộ nhớ tạm, sẵn sàng để dán.

Mã nhúng là một dòng như dưới đây. Phần tô vàng là khoá riêng của website bạn.

Cần lấy lại mã lúc khác: vào mục Website, trên thẻ website bấm Gắn mã lên website (khung chat đã chạy thì nút tên là Mã nhúng và cách gắn).

Luôn chép bằng nút Chép mã và dán nguyên văn. Gõ lại bằng tay, hay dán qua Word, rất dễ sai một ký tự hoặc đổi dấu ngoặc kép làm mã không chạy.

Bước 4: Dán mã lên website

Quy tắc chung cho mọi nền tảng: dán mã một lần vào phần dùng chung của mọi trang, ngay trước thẻ </body>, rồi lưu. Bấm vào tên nền tảng bạn đang dùng để tới đúng các bước.

Website tự làm (HTML, PHP)

1. Mở tệp dùng chung của mọi trang

   Thường là tệp chân trang (footer.php, footer.html) hoặc tệp khung chung của website. Website mỗi trang một tệp HTML riêng thì mở từng trang muốn hiện khung chat.

2. Tìm thẻ </body>

   Bấm Ctrl + F (máy Mac là Cmd + F) và gõ </body> để tìm nhanh.

3. Dán mã ngay phía trên dòng </body>

   Dán nguyên dòng mã thành một dòng riêng, ngay trước thẻ đó.

4. Lưu và cập nhật lên hosting

   Sửa trên máy tính thì tải tệp vừa sửa lên hosting như mọi lần cập nhật website.

Cuối tệp sẽ trông như sau:

    …
    <script src="https://khach.me/widget.js?key=MÃ-CỦA-BẠN" async></script>
  </body>
</html>

Website dựng bằng React, Vue hay Next.js: thêm dòng mã vào tệp khung chung (index.html hoặc layout gốc) để mọi trang đều có khung chat.

WordPress

1. Cài plugin WPCode

   Trong trang quản trị WordPress, vào Plugin → Thêm Plugin, gõ WPCode vào ô tìm, bấm Cài đặt ngay rồi Kích hoạt.

2. Mở trang Header & Footer

   Vào Code Snippets → Header & Footer.

3. Dán mã vào ô Footer

   Trang có ba ô Header, Body, Footer. Dán mã vào ô thứ ba, Footer.

4. Bấm Save Changes

   Website dùng plugin bộ nhớ đệm (cache) thì xoá bộ nhớ đệm sau khi lưu.

Từng màn hình giải thích kỹ ở bài cách thêm chatbot AI vào website WordPress.

LadiPage

1. Mở trang trong trình chỉnh sửa

   Vào LadiPage, mở landing page muốn gắn khung chat.

2. Mở ô chèn mã

   Bấm Thiết lập trên thanh công cụ, chọn Mã JavaScript/CSS.

3. Dán mã vào ô Trước thẻ body

   Dán mã vào ô Trước thẻ body, bấm Đóng.

4. Xuất bản lại trang

   Bấm Xuất bản để trang đang chạy có khung chat.

Mỗi landing page gắn một lần. Các trang chạy trên cùng tên miền, kể cả tên miền con như uudai.tenmien.vn, dùng chung một mã; trang chạy trên tên miền khác thì thêm một website nữa trong Khách Mê để lấy mã riêng.

Haravan

1. Mở phần chỉnh sửa code

   Trong trang quản trị Haravan, vào Website → Giao diện, ở giao diện đang dùng chọn Chỉnh sửa code.

2. Mở tệp theme.liquid

   Trong thư mục Layouts, bấm tệp theme.liquid.

3. Dán mã trước thẻ </body>

   Bấm Ctrl + F tìm </body>, dán mã ngay phía trên dòng đó.

4. Bấm Lưu

   Khung chat hiện trên mọi trang của cửa hàng.

Sapo

1. Mở phần chỉnh sửa HTML/CSS

   Trong trang quản trị Sapo, vào Website → Giao diện, ở giao diện đang dùng bấm Thao tác → Chỉnh sửa HTML/CSS.

2. Mở tệp theme.bwt

   Trong thư mục Layouts, bấm tệp theme.bwt.

3. Dán mã trước thẻ </body>

   Bấm Ctrl + F tìm </body>, dán mã ngay phía trên dòng đó.

4. Bấm Lưu

   Khung chat hiện trên mọi trang của website.

Shopify

1. Mở phần chỉnh sửa mã

   Trong trang quản trị Shopify, vào Cửa hàng trực tuyến → Chủ đề (Online Store → Themes). Ở chủ đề đang dùng, bấm nút … rồi chọn Chỉnh sửa mã (Edit code).

2. Mở tệp theme.liquid

   Trong thư mục Layout, bấm tệp theme.liquid.

3. Dán mã trước thẻ </body>

   Bấm Ctrl + F tìm </body>, dán mã ngay phía trên dòng đó.

4. Bấm Lưu

   Nút Lưu (Save) ở góc trên. Khung chat hiện trên mọi trang của cửa hàng.

Wix

Wix cho chèn mã khi website đã xuất bản và có tên miền riêng. Tên nút trong Wix ghi theo tiếng Anh.

1. Mở mục Custom Code

   Trong bảng điều khiển Wix, vào Settings, tìm nhóm Development & integrations, bấm Custom Code.

2. Thêm mã

   Bấm + Add Custom Code, dán mã vào ô, đặt tên dễ nhớ, ví dụ Khách Mê.

3. Chọn trang và vị trí

   Ở Add Code to Pages chọn All pages và Load code once. Ở Place Code in chọn Body - end.

4. Bấm Apply

   Mã được lưu và chạy trên mọi trang của website.

Google Tag Manager

Website đã gắn sẵn Google Tag Manager thì thêm khung chat ngay trong Tag Manager, không cần mở giao diện website.

1. Tạo thẻ mới

   Trong vùng chứa của website, vào Thẻ → Mới.

2. Chọn HTML tùy chỉnh

   Bấm Cấu hình thẻ, chọn HTML tùy chỉnh, dán mã vào ô HTML.

3. Cho thẻ chạy trên mọi trang

   Bấm Kích hoạt, chọn All Pages (mọi trang), rồi bấm Lưu.

4. Xuất bản

   Bấm Gửi → Xuất bản. Thẻ chạy trên website từ lúc xuất bản.

Nền tảng khác

Webflow, Blogger, Squarespace hay website do công ty thiết kế làm thường có chỗ chèn mã tuỳ chỉnh, tên hay gặp là Custom code, Footer code, Code injection hoặc Mã chuyển đổi. Dán mã vào phần cuối trang (Footer, Body end, Trước thẻ </body>), lưu rồi xuất bản lại. Không tìm thấy chỗ dán thì nhắn bộ phận hỗ trợ của nền tảng nhờ chèn dòng mã vào cuối mọi trang, trước thẻ </body>.

Bước 5: Kiểm tra khung chat đã chạy

1. Mở website bằng tên miền đã khai

   Gõ địa chỉ website vào trình duyệt như khách vẫn vào. Đường link xem trước của trình chỉnh sửa (LadiPage, Wix…) chạy trên tên miền khác nên không hiện khung chat.

2. Tìm nút khung chat ở góc màn hình

   Nút nằm ở góc dưới bên phải trên mọi trang. Muốn đưa sang bên trái hay đổi màu khung chat thì vào Cài đặt khung chat → Icon, màu & vị trí.

3. Nhắn thử vài câu khách hay hỏi

   Hỏi giá, giờ mở cửa, địa chỉ để xem trợ lý trả lời. Cuộc chat thử nằm trong mục Hộp thư của Khách Mê.

4. Xem nhãn trên thẻ website

   Quay lại mục Website trong Khách Mê: nhãn Chưa gắn mã đã đổi thành Khung chat đang chạy. Chưa đổi thì tải lại trang.

5. Bật thông báo trên điện thoại

   Vào Tài khoản → Thông báo trên máy này, bấm Bật thông báo trên máy này. Trên iPhone, thêm Khách Mê ra màn hình chính rồi mở từ đó để bật.

Chưa thấy khung chat thì kiểm tra gì

Nhờ người làm web gắn hộ

Website do công ty thiết kế, đội kỹ thuật hay người quen làm thì bạn chỉ cần gửi họ dòng mã kèm lời nhờ. Mở bài này bằng nút Xem từng bước chi tiết trên thẻ website trong Khách Mê, tin nhắn dưới đây có sẵn mã của bạn: bấm Chép tin nhắn rồi gửi qua Zalo hay email.

Họ gắn xong, bạn mở website nhắn thử và xem nhãn Khung chat đang chạy trên thẻ website là chắc chắn.

Gắn mã xong nên làm gì tiếp

• Nạp thêm kiến thức. Trợ lý đã tự đọc các trang website. Bảng giá, khuyến mãi đang chạy, chính sách đổi trả chưa đăng lên web thì thêm ở Cài đặt khung chat → Kiến thức.
• Hỏi thử trước khách. Mục Hỏi thử trong Cài đặt khung chat cho bạn nhắn với trợ lý như một khách, xem câu trả lời đã đúng ý chưa.
• Chỉnh lời chào theo ngành. Spa mời đặt lịch, trung tâm tiếng Anh mời kiểm tra trình độ, cửa hàng nội thất mời gửi kích thước phòng để được báo giá.
• Gọi lại khách để số. Số điện thoại khách để lại nằm trong mục Khách, kèm cuộc chat và trang khách đang xem.

Cách dùng trợ lý theo từng ngành: spa, nha khoa, trung tâm đào tạo, nội thất. Cách chọn chatbot cho website ở bài chatbot cho website.

Câu hỏi thường gặp

Bài liên quan