On this page

Trang Opt-in

Demo trang Opt-in ⬇️

Free Book Download tanaflows.bepublish.com

Learn how to set up your Ghost publication, publish your first post, build your audience through subscriber signups, send effective email newsletters, and optimize feature image previews.

Trang opt-in giúp bạn xây dựng danh sách email bằng các tài nguyên miễn phí.

Mẫu trang opt-in này mang lại các lợi ích:

Thiết kế trang opt-in nhanh nhất
Form dựng sẵn với webhook tự động chuyển hướng sau khi gửi
Thiết kế marketing đẹp và thực tế
Tối ưu SEO

Lưu ý

Để tạo thành viên ghost và tự động hoá workflow, bạn cần webhook như Zapier hoặc Make.

Bước 1: Tạo trang Opt-in mới

Tạo trang mới như bình thường:

Chọn template Opt-in Page
Điền meta như thường lệ.
Dán đoạn code dưới đây vào block html trong ghost editor. Xem video bên dưới để hiểu rõ hơn.

Opt-in Page

<script>
    function pageContent() {
    return {
      hero: {
        title: 'Xây dựng doanh nghiệp xuất bản với Ghost',
        description: 'Giúp bạn chia sẻ nội dung, phát triển khán giả và xây dựng doanh nghiệp đăng ký độc lập.',
        subTitle: 'E-book miễn phí',
        button_text: 'Tải xuống ngay',
        webhook_URL: '#',
        imgURL: 'https://ucarecdn.com/02f59420-3cd3-40df-9362-69445318af8d/ebooktemplate.webp',
        redirectURL: '/thank-you/'
      },
      section_1: {
        subTitle: 'Phần 1',
        title: 'Xây dựng',
        benefits: ['Cách thiết lập ấn phẩm Ghost của bạn', 'Cách xuất bản bài viết đầu tiên', 'Xây dựng khán giả với đăng ký thành viên', 'Gửi bản tin email'],
        imgURL: 'https://ucarecdn.com/ad380ffb-f8ff-471f-9f50-f900593df004/-/preview/500x500/-/quality/smart/-/format/auto/'
      },
      section_2: {
        subTitle: 'Phần 2',
        title: 'Xuất bản',
        benefits: ['Cách tìm ngách (niche) hiệu quả', '6 loại bản tin bạn có thể bắt đầu ngay hôm nay', 'Hướng dẫn trước và sau khi xuất bản cho người viết mới', '5 cách tái sử dụng nội dung chuyên nghiệp'],
        imgURL: 'https://ucarecdn.com/9204218a-ed81-4f97-a72a-9af8f49998ea/-/preview/500x500/-/quality/smart/-/format/auto/'
      },
      section_3: {
        subTitle: 'Phần 3',
        title: 'Phát triển',
        benefits: ['Chiến lược nội dung cho creators', 'Chiến lược xây dựng lòng tin với khách hàng', 'Cách có 100 người đăng ký email đầu tiên', 'Cách có 1.000 người đăng ký email đầu tiên'],
        imgURL: 'https://ucarecdn.com/d987ef94-4f4b-426c-91bb-7a11b403556c/-/preview/500x500/-/quality/smart/-/format/auto/'
      },
      section_4: {
        subTitle: 'Phần 4',
        title: 'Kinh doanh',
        benefits: ['Các chỉ số kinh doanh đăng ký thành viên', '4 câu hỏi trước khi định giá bản tin', 'Cách tăng tỷ lệ mở email bản tin', 'Chiến lược chuyển đổi người đọc thành thành viên trả phí'],
        imgURL: 'https://ucarecdn.com/0357df7c-4644-4e74-9a81-2e94622377c1/-/preview/500x500/-/quality/smart/-/format/auto/'
      },
      CTA: {
        title: 'Bạn còn chờ gì nữa?',
        title_highlight: ' Bắt đầu doanh nghiệp xuất bản của bạn ngay hôm nay',
        subTitle: 'Hành động ngay và nắm lấy cơ hội tiếp cận khán giả rộng lớn hơn. Biến ước mơ của bạn thành hiện thực ngay hôm nay!',
        button_text: 'Tải xuống ngay'
      },
      formData: '',
    };
  }
</script>

Bước 2: Chỉnh sửa code từng phần

Mẹo

Để quản lý ảnh từ xa, nên dùng Upload Care, dễ dùng và miễn phí.

1. Hero Section

Hero Section

<script>
...
      hero: {
        title: 'Xây dựng doanh nghiệp xuất bản với Ghost',
        description: 'Giúp bạn chia sẻ nội dung, phát triển khán giả và xây dựng doanh nghiệp đăng ký độc lập.',
        subTitle: 'E-book miễn phí',
        button_text: 'Tải xuống ngay',
        webhook_URL: '#',
        imgURL: 'https://ucarecdn.com/02f59420-3cd3-40df-9362-69445318af8d/ebooktemplate.webp',
        redirectURL: '/thank-you/'
      },
...
</script>

Form tích hợp sẵn ở Hero sẽ gửi dữ liệu tới Webhook Receive. Tôi khuyên dùng Make để tự động hoá, miễn phí cho mọi người.

Bạn cần thay # bằng webhook_URL và redirectURL của bạn. Có thể thay đổi các text khác tuỳ ý.

2. Section 1-4

Có tối đa 4 section dựng sẵn, bạn điền nội dung tuỳ ý.

Section 1-4

<script>
...
      section_1: {
        subTitle: 'Phần 1',
        title: 'Xây dựng',
        benefits: ['Cách thiết lập ấn phẩm Ghost của bạn', 'Cách xuất bản bài viết đầu tiên', 'Xây dựng khán giả với đăng ký thành viên', 'Gửi bản tin email'],
        imgURL: 'https://ucarecdn.com/ad380ffb-f8ff-471f-9f50-f900593df004/-/preview/500x500/-/quality/smart/-/format/auto/'
      },
      section_2: {
        subTitle: 'Phần 2',
        title: 'Xuất bản',
        benefits: ['Cách tìm ngách (niche) hiệu quả', '6 loại bản tin bạn có thể bắt đầu ngay hôm nay', 'Hướng dẫn trước và sau khi xuất bản cho người viết mới', '5 cách tái sử dụng nội dung chuyên nghiệp'],
        imgURL: 'https://ucarecdn.com/9204218a-ed81-4f97-a72a-9af8f49998ea/-/preview/500x500/-/quality/smart/-/format/auto/'
      },
      section_3: {
        subTitle: 'Phần 3',
        title: 'Phát triển',
        benefits: ['Chiến lược nội dung cho creators', 'Chiến lược xây dựng lòng tin với khách hàng', 'Cách có 100 người đăng ký email đầu tiên', 'Cách có 1.000 người đăng ký email đầu tiên'],
        imgURL: 'https://ucarecdn.com/d987ef94-4f4b-426c-91bb-7a11b403556c/-/preview/500x500/-/quality/smart/-/format/auto/'
      },
      section_4: {
        subTitle: 'Phần 4',
        title: 'Kinh doanh',
        benefits: ['Các chỉ số kinh doanh đăng ký thành viên', '4 câu hỏi trước khi định giá bản tin', 'Cách tăng tỷ lệ mở email bản tin', 'Chiến lược chuyển đổi người đọc thành thành viên trả phí'],
        imgURL: 'https://ucarecdn.com/0357df7c-4644-4e74-9a81-2e94622377c1/-/preview/500x500/-/quality/smart/-/format/auto/'
      },
...
</script>

3. Call-to-action section

Call-to-action Section

<script>
...
      CTA: {
        title: 'Bạn còn chờ gì nữa?',
        title_highlight: ' Bắt đầu doanh nghiệp xuất bản của bạn ngay hôm nay',
        subTitle: 'Hành động ngay và nắm lấy cơ hội tiếp cận khán giả rộng lớn hơn. Biến ước mơ của bạn thành hiện thực ngay hôm nay!',
        button_text: 'Tải xuống ngay'
      },
...
</script>

title_highlight là phần chữ nổi bật như hình trên.

Điền các nội dung còn lại tuỳ ý.

4. Nội dung trang

Nếu muốn giải thích thêm, bạn có thể viết nội dung vào phần content và thêm tag #content để hiển thị.

Nội dung trang

Thêm tag nội bộ #content để mở khoá nội dung trang