Tutorial 2x Discord Chatbox - Thêm Chatbox Discord cho XenForo 2.2

[PVS]

Discord Chatbox - Thêm Chatbox Discord cho XenForo 2.2

Đây là một addon miễn phí được cung cấp bởi Widget Bot, cung cấp giải pháp widget miễn phí với tùy chọn nâng cấp lên các gói khác nhau để nhận được nhiều ưu đãi cao cấp hơn. Vui lòng kiểm tra https://widgetbot.io để biết thêm chi tiết. Tôi hoàn toàn không liên kết với Widget Bot và chỉ đơn giản là đang tập hợp code để người dùng cuối dễ dàng triển khai vào diễn đàn của họ.

Cách thức của chat box theo một cách nào đó là trường học cũ với các giải pháp cạnh tranh ngày càng phát triển và trở nên phổ biến hơn. Một ví dụ như vậy của dịch vụ trò chuyện là Discord cung cấp một công cụ miễn phí cho các cộng đồng để tổ chức và giao tiếp thông qua các phòng trò chuyện và trò chuyện thoại. Code này cho phép triển khai các tính năng của Discord vào Xenforo bằng cách sử dụng Widget Bot.

Trong hướng dẫn này, chúng ta sẽ thêm một template tùy chỉnh, thêm một số css bổ sung vào trang web và thêm một thẻ có thể chèn vào trang mà chúng ta muốn hiển thị hộp html.

Thiết lập Discord:

1. Đọc hướng dẫn cài đặt tại đây https://docs.widgetbot.io/tutorial/
2. Làm theo liên kết trong hướng dẫn để mời bot vào máy chủ của bạn.
3. Cung cấp cho bot tất cả các quyền cần thiết để hoạt động.
4. Trong một kênh văn bản trên máy chủ Discord của bạn, hãy nhập "/setup"
5. Nhấn bắt đầu
6. Gắn thẻ kênh bạn muốn sử dụng để đảm bảo quyền thích hợp cho bot. Ví dụ có thể là "#general"
7. Chọn tiếp tục
8. Gắn thẻ kênh để ghi nhật ký lỗi. Ví dụ có thể là "#bot-commands"
9. Chọn cho phép khách hoặc tiếp tục mà không có khách (khuyến nghị)
10. Trong kênh văn bản, gõ "/html-embed" để lấy code HTML mà chúng ta sẽ sử dụng sau này. Nó sẽ giống như thế này

<widgetbot    server="1234567890123"
    channel="12345678901234567"
    width="800"
    height="600"
></widgetbot>
<script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script>

LƯU Ý: Bạn có thể cần chỉnh sửa id kênh thành kênh bạn muốn đặt làm mặc định. Để thực hiện việc này, hãy nhấp chuột phải vào kênh bạn muốn và chọn "sao chép liên kết" và trích xuất id kênh từ bộ số cuối cùng

https://discord.com/channels/serverid/channelid

đảm bảo rằng điều này không phải là một kênh riêng tư, nếu không sẽ không ai có thể xem được.

Thiết lập template Xenforo:

1. Đi tới trình chỉnh sửa template trong Admin >> Appearance >> Templates >> Chọn template mặc định của bạn
2. Chọn thêm template
3. Đặt tên cho template là "discord.chatbox"
4. Dán đoạn code sau vào hộp template

   <span class="nomobile"> <!-- Hides the chat box on mobile -->    <widgetbot    server="PlaceYourServerIDHere"
       channel="PlaceYourChannelIDHere"
       width="980"
       height="300"
       ></widgetbot>
    
       <span class="chatbox"> <!-- style the box the chatbox sits in by default this is just a line break -->
           <script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script>
       </span>
   </span>

5. Chỉnh sửa code với ID máy chủ và ID kênh của bạn như chúng ta đã tạo trong các bước discord ở trên
6. Chỉnh sửa chiều rộng và chiều cao để phù hợp với sở thích mong muốn của bạn
7. Lưu template
8. Quay lại danh sách template ở bước 1 nhưng lần này cuộn xuống cho đến khi bạn tìm thấy "extra.less" và nhấp vào nó.
9. Dán đoạn code CSS sau vào extra.less

   @media (max-width: 900px) {        .nomobile {            display: none;
       }
   }
   
   .chatbox {
       margin-bottom: 10px;
       display:block;
   }

10. Lưu template
11. Quay lại danh sách template ở bước 1 nhưng lần này tìm "forum_list" và dán đoạn code này ở trên cùng

    <xf:include template="discord.chatbox" />

12. Lưu template

Tải lại danh sách diễn đàn của bạn và bạn sẽ thấy hộp trò chuyện mới!

Nếu bạn gặp lỗi quyền, hãy kiểm tra kỹ bot discord trong máy chủ của bạn, xem bạn có đúng máy chủ và id kênh trong code html chính hay không và các quyền chính xác được thiết lập để cho phép người dùng discord thường xuyên xem cuộc trò chuyện.

​

Chúc các bạn thành công.

Nguồn: xenforo.com​