Các bước tùy chỉnh Landing Page bằng code html

 

Tùy chỉnh Landing page bằng html sẽ giúp doanh nghiệp tạo ra các giao diện Landing Page theo ý muốn hoặc chỉnh sửa trực tiếp các mẫu giao diện đang có của GoSELL, trong bài này sẽ hướng dẫn bạn các bước để tùy chỉnh mã code Landing Page cho các mục đích sau:

 

  • Thu thập thông tin khách hàng từ Landing Page.

 

  • Bán sản phẩm trên Landing Page.

 

  • Thu thập thông tin khách hàng từ các trang tùy chỉnh, thay đổi giao diện trang.

 

Tùy chỉnh code html thu thập thông tin khách hàng từ Landing Page

 

Đầu tiên, để tùy chỉnh code html thu thập thông tin khách hàng từ Landing Page, doanh nghiệp có thể thực hiện theo các bước sau đây:

 

Bước 1: Chọn mẫu Landing Page thu thập thông tin khách hàng trong kho giao diện Landing Page có sẵn. 

 

Các bước tùy chỉnh Landing Page bằng code html 1

 

Bước 2: Chọn nút “Chỉnh sửa bằng code html” ở thanh công cụ phía trên.

 

Các bước tùy chỉnh Landing Page bằng code html 2

 

Tại đây, bạn có thể thêm, sửa, xóa hoặc thay thế nội dung trang Landing Page mẫu bằng mã html của bạn.

 

Bước 3: Chỉnh sửa mã code html.

 

Các bước tùy chỉnh Landing Page bằng code html 3

 

Đoạn code html của bạn sẽ được mặc định chèn vào trong phần <body>. 

 

Lưu ý, không thêm thẻ <html> <title> <head> <body> vào mã code của bạn.

 

Bước 4: Gọi API để tạo khách hàng khi khách hàng gửi biểu mẫu:

 

Các bước tùy chỉnh Landing Page bằng code html 10

 

Lưu ý:

 

  • Bạn cần thêm khai báo sau để lấy URL API tạo khách hàng:

 

<input type=”hidden” id=”requestURL” value=””>

 

  • Tham số cần truyền trong json body như bảng dưới đây:

 

Tên Dạng Mẫu Bắt buộc Mô tả
email String test@gmail.com Không Email khách hàng
fullName String John Adam Có Tên khách hàng
key String PzJCIVZNOpiUMl Có Landing Page key. Sử dụng khai báo mặc định để lấy giá trị này từ hệ thống
pageId Number 4354562 Có Landing page ID. Sử dụng khai báo mặc định để lấy giá trị này từ hệ thống
note String This is a note Không Ghi chú về khách hàng
phone Number 989345789 Có Số điện thoại
phoneCode Number +1 Có Mã vùng điện thoại

 

Bước 5: Thực hiện các khai báo mặc định. Bạn có thể thêm các khai báo mặc định cụ thể như sau:

 

Các bước tùy chỉnh Landing Page bằng code html 4

 

<input type=”hidden” id=”pId” value=””>

=> Mỗi landing page sẽ có một page ID, khai báo này để tự động generate id theo hệ thống.

 

<input type=”hidden” id=”key” value=””>

=> Mỗi landing page sẽ có một key, khai báo này để tự động generate id theo hệ thống.

 

<input type=”hidden” id=”gacode” value=””>

=> Bạn có thể thêm mã Google Analytics vào Landing Page của mình tại phần cài đặt, công cụ này sẽ nhận được thông tin từ cấu hình của bạn

 

<input type=”hidden” id=”pixelid” value=””>

=> Bạn có thể thêm mã Facebook Pixel vào Landing Page của mình tại phần cài đặt, công cụ này sẽ nhận được thông tin từ cấu hình của bạn

 

<input type=”hidden” id=”defaultCountryCode” value=””>

=> Hiển thị mã quốc gia mặc định tại trường số điện thoại trên Landing Page dựa trên quốc gia của cửa hàng

 

<input type=”hidden” id=”requestURL” value=””>

=> Đoạn mã code này để nhận yêu cầu url của API tạo khách hàng

 

<input type=”hidden” id=”getCountriesURL” value=””>

=> Yêu cầu url của API để lấy danh sách mã quốc gia.

 

Tùy chỉnh code html bán hàng hiệu quả hơn trên Landing Page

 

Thứ 2, bạn cũng có thể tùy chỉnh code html để bán hàng tốt hơn trên Landing Page của mình. Theo đó, bạn có thể thực hiện theo các bước sau đây:

 

Bước 1: Chọn mẫu Landing Page “HTML – Checkout Product” và chọn chỉnh sửa.

 

Các bước tùy chỉnh Landing Page bằng code html 5

 

Bước 2: Chọn nút “Chỉnh sửa bằng code html” ở thanh công cụ phía trên.

 

Các bước tùy chỉnh Landing Page bằng code html 6

 

Tại đây, bạn có thể thêm, sửa, xóa, thay thế nội dung trang landing page mẫu bằng mã html của mình.

 

Bước 3: Chỉnh sửa mã code html của bạn 

 

Các bước tùy chỉnh Landing Page bằng code html 7

 

Lưu ý: Đoạn code html của bạn sẽ được mặc định chèn vào trong phần <body>. Không thêm thẻ <html> <title> <head> <body> vào mã code của bạn.

 

Bước 4: Tạo các đơn hàng thông qua API.

 

  • Thêm khai báo bên dưới vào trang đích để nhận URL yêu cầu:

<input type=”hidden” id=”requestURL” value=””>

 

  • Các Tham số cần truyền trong json body như bảng dưới đây:

 

Tên Dạng Mẫu Bắt buộc Mô tả
delivery Info Object[] 801 Madison St Có Thông tin giao hàng
  • address
 String def Có Địa chỉ
  • address2
 String US-NJ Không Dòng địa chỉ thứ 2. (không áp dụng đối với khu vực Việt Nam)
  • location Code
 String 510105 Có Mã tỉnh/Tiểu bang/Vùng
  • wardCode
 String 5101 Có Chỉ áp dụng cho khu vực Việt Nam
  • district Code
 String US Có Chỉ áp dụng cho khu vực Việt Nam
  • countryCode
 String Hoboken Không Mã quốc gia
  • city
 String 7030 Có Tên thành phố (không áp dụng đối với khu vực Việt Nam)
  • zipCode
 Number John Adam Không Mã bưu điện (không áp dụng đối với khu vực Việt Nam)
contactName String test@gmail.com Có Tên khách hàng
email String emailtest@gmail.com Có Email khách hàng
phone Number Number +1 Số điện thoại khách hàng
phone Code String Mã vùng
branchId Number 454544 Có ID chi nhánh mà bạn muốn trừ hàng tồn. Liên hệ với chúng tôi nếu bạn không biết cách lấy ID chi nhánh
cartItemVMs Object[] 245234 Có ID chi nhánh trong cửa hàng của bạn.
  • branchId
 Number 454544 Có ID chi nhánh mà bạn muốn trừ hàng tồn. Liên hệ với chúng tôi nếu bạn không biết cách lấy ID chi nhánh
  • itemId
 Number 230019 Có ID của sản phẩm bạn muốn bán
  • modelId
 Number 5 Có ID của loại sản phẩm bạn muốn bán
  • quantity
 Number 10 Có Số lượng sản phẩm mà người dùng muốn mua
langKey String en Có Ngôn ngữ của Landing Page
note String Ship to my office Không Lưu ý khách hàng nhập vào khi đặt hàng (nếu có)
storeId String 53422 Có Liên hệ với chúng tôi để nhận ID cửa hàng của bạn nếu bạn không biết cách lấy nó
landingPageId Number 543454 Có Landing page ID
landingPageKey String PzJCIVZNOpiUMlpAPs Có Landing page key.

 

Bước 5: Thêm các khai báo mặc định:

 

Các bước tùy chỉnh Landing Page bằng code html 8

 

<input type=”hidden” id=”pId” value=””>

=> Mỗi landing page sẽ có một page ID, khai báo này để tự động tạo id theo hệ thống.

 

<input type=”hidden” id=”key” value=””>

=> Mỗi landing page sẽ có một key, khai báo này để tự động tạo id theo hệ thống.

 

<input type=”hidden” id=”gacode” value=””>

=> Bạn có thể thêm mã Google Analytics vào Landing Page của mình tại phần cài đặt, công cụ này sẽ nhận được thông tin từ cấu hình của bạn.

 

<input type=”hidden” id=”pixelid” value=””>

=> Bạn có thể thêm mã Facebook Pixel vào Landing Page của mình tại phần cài đặt, công cụ này sẽ nhận được thông tin từ cấu hình của bạn.

 

<input type=”hidden” id=”defaultCountryCode” value=””>

=> Hiển thị mã quốc gia mặc định tại trường số điện thoại trên Landing Page dựa trên quốc gia của cửa hàng.

 

<input type=”hidden” id=”createOrderURL” value=””>

=> Mã code này dùng để lấy URL yêu cầu của API tạo đơn hàng.

 

<input type=”hidden” id=”getCountriesURL” value=””>

=> URL của API để lấy danh sách mã quốc gia.

 

<input type=”hidden” id=”getCitiesOfCountryURL” value=””>

=> URL của API để lấy danh sách tỉnh / tiểu bang / khu vực sau quốc gia được chọn.

 

<input type=”hidden” id=”getDistrictsOfCityURL” value=””>

=> URL của API để lấy danh sách tỉnh / tiểu bang / khu vực sau quốc gia được chọn.

 

<input type=”hidden” id=”getWardsOfDistrictURL” value=””>

=> URL của API để lấy danh sách tỉnh / tiểu bang / khu vực sau quốc gia được chọn.

 

Tùy chỉnh code html thu thập thông tin khách hàng từ các trang tùy chỉnh, thay đổi giao diện trang

 

Thứ ba, bạn có thể viết code html để thu thập thông tin khách hàng trên các trang tùy chỉnh ngoài trên Landing Page. Ngoài ra, bạn cũng có thể tùy chỉnh giao diện trang.

 

Để làm được điều này, bạn thực hiện theo các bước sau đây:

 

Bước 1: Tạo một biểu mẫu để lấy các thông tin khách hàng như: Tên, số điện thoại, email,… (Bạn có thể tham khảo các biểu mẫu có sẵn trong các mẫu landing page của GoSELL).

 

Các bước tùy chỉnh Landing Page bằng code html 9

 

Bước 2: Gọi API để thêm khách hàng vào cửa hàng khi người dùng nhấp vào nút gửi.

 

  • Request URL: 

https://api.beecow.com/beehiveservices/api/customer-profiles/storefront/create

 

  • Tham số cần truyền trong json body như bảng dưới đây:

 

Tên Dạng Mẫu Bắt buộc Mô tả
email String test@gmail.com Không Email khách hàng
fullName String John Adam Có Tên khách hàng
note String This is a note Không Ghi chú khách hàng (nếu có)
phone Number 989345789 Có Số điện thoại khách hàng

 

Bước 3: Code mẫu để lấy thông tin khách hàng khi nhấn nút gửi thông tin.

 

Thông tin khách hàng trong đoạn code dưới đây là ví dụ, bạn có thể lấy thông tin từ biểu mẫu nhập dữ liệu để gọi API.

 

<script>    function submit()

    {

        const request = {

            fullName: “Tên customer”,

            email: “emailkhachhang@mail.com”,

            phone: “0989999999”,

            note: “Nội dung khách hàng”,

            storeId: 86816,

        };

        $.ajax(

        {

            type: “POST”,

            url: “https://api.beecow.com/beehiveservices/api/customer-profiles/storefront/create”,

            data: JSON.stringify(request),

            contentType: “application/json”,

            success: function(res) {},

            error: function(e) {},

        });

    }

    $(“#click”).on(‘click’, submit)

</script><button type=”button” id=”click”>Click Me!</button>

 

Trên đây là các bước để có thể tùy chỉnh Landing Page bằng code html nhằm phục vụ các mục đích như thu thập thông tin khách hàng từ Landing Page, bán sản phẩm trên Landing Page hay thu thập thông tin khách hàng từ các trang tùy chỉnh, thay đổi giao diện trang. Chúc các bạn thực hiện các thao tác thành công!