Calendly: Cách nhúng một cửa sổ bật lên lập lịch hoặc lịch nhúng vào trang web hoặc trang web WordPress của bạn

Tiện ích lập lịch biểu Calendly

Một vài tuần trước, tôi đã ở trên một trang web và nhận thấy khi tôi nhấp vào liên kết để lên lịch cuộc hẹn với họ rằng tôi không được đưa đến trang web đích, có một tiện ích đã xuất bản Calendly lập lịch trực tiếp trong cửa sổ bật lên. Đây là một công cụ tuyệt vời… giữ ai đó trên trang web của bạn là một trải nghiệm tốt hơn nhiều so với việc chuyển tiếp họ đến một trang bên ngoài.

Calendly là gì?

Calendly tích hợp trực tiếp với của bạn Không gian làm việc của Google hoặc hệ thống lịch khác để xây dựng các biểu mẫu lịch vừa đẹp mắt vừa dễ sử dụng. Hơn hết, bạn thậm chí có thể giới hạn thời gian cho phép ai đó kết nối với bạn trên lịch của mình. Ví dụ, tôi thường chỉ có một vài giờ rảnh rỗi vào những ngày cụ thể cho các cuộc họp bên ngoài.

Sử dụng công cụ lập lịch như thế này cũng là một trải nghiệm tốt hơn nhiều so với việc chỉ điền vào biểu mẫu. Cho tôi công ty tư vấn chuyển đổi kỹ thuật số, chúng tôi có các sự kiện bán hàng theo nhóm trong đó nhóm lãnh đạo đang họp. Chúng tôi cũng tích hợp nền tảng cuộc họp web của mình với Calendly để lời mời trên lịch bao gồm tất cả các liên kết cuộc họp trực tuyến.

Calendly đã khởi chạy một tập lệnh tiện ích con và biểu định kiểu thực hiện rất tốt việc nhúng biểu mẫu lập lịch trực tiếp vào một trang, được mở từ một nút hoặc thậm chí từ một nút nổi trong chân trang của trang web của bạn. Kịch bản cho Calendly được viết tốt, nhưng tài liệu để tích hợp nó vào trang web của bạn không tốt chút nào. Trên thực tế, tôi ngạc nhiên rằng Calendly vẫn chưa xuất bản các plugin hoặc ứng dụng của riêng mình cho các nền tảng khác nhau.

Điều này là vô cùng hữu ích. Cho dù bạn đang sử dụng các dịch vụ tại nhà và muốn cung cấp phương tiện để khách hàng lên lịch cuộc hẹn của họ, xe dắt chó đi dạo, công ty SaaS muốn khách lên lịch xem thử hay một công ty lớn với nhiều thành viên, bạn cần dễ dàng lên lịch… Calendly và các widget nhúng là một công cụ tự phục vụ tuyệt vời.

Cách nhúng Calendly vào trang web của bạn

Thật kỳ lạ, bạn sẽ chỉ tìm thấy chỉ đường trên những điểm nhúng này tại Loại sự kiện chứ không phải cấp sự kiện thực tế trong tài khoản Calendly của bạn. Bạn sẽ tìm thấy mã trong menu thả xuống cho cài đặt của loại sự kiện ở trên cùng bên phải.

nhúng calendly

Khi bạn nhấp vào đó, bạn sẽ thấy các tùy chọn cho các loại nhúng:

nhúng văn bản bật lên

Nếu bạn lấy mã và nhúng nó vào bất cứ nơi nào bạn muốn trên trang web của mình, thì có một số vấn đề.

  • Nếu bạn muốn gọi một vài widget khác nhau trên một trang… có thể có một nút khởi chạy bộ lập lịch (Văn bản bật lên) cũng như nút chân trang (Tiện ích bật lên)… bạn sẽ thêm biểu định kiểu và tập lệnh một vài thời gian. Điều đó không cần thiết.
  • Gọi một tập lệnh bên ngoài và tệp biểu định kiểu nội tuyến trong trang web của bạn không phải là phương tiện tối ưu nhất để thêm dịch vụ vào trang web của bạn.

Đề xuất của tôi là tải biểu định kiểu và Javascript trong tiêu đề của bạn… sau đó sử dụng các tiện ích con khác mà chúng có ý nghĩa trên toàn bộ trang web của bạn.

Cách các widget của Calendly hoạt động

Calendly có hai tệp cần thiết để nhúng vào trang web của bạn, biểu định kiểu và javascript. Nếu bạn định chèn những thứ này vào trang web của mình, tôi sẽ thêm phần sau vào phần đầu của HTML của bạn:

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

Tuy nhiên, nếu bạn đang sử dụng WordPress, thì cách tốt nhất là sử dụng functions.php để chèn các tập lệnh bằng cách sử dụng các phương pháp hay nhất của WordPress. Vì vậy, trong chủ đề con của tôi, tôi có các dòng mã sau để tải biểu định kiểu và tập lệnh:

wp_enqueue_script('calendly-script', '//assets.calendly.com/assets/external/widget.js', array(), null, true);
wp_enqueue_style('calendly-style', '//assets.calendly.com/assets/external/widget.css' );

Đó là sẽ tải những thứ này (và lưu vào bộ nhớ cache) trên toàn bộ trang web của tôi. Bây giờ tôi có thể sử dụng các vật dụng mà tôi muốn.

Nút chân trang của Calendly

Tôi muốn gọi sự kiện cụ thể hơn là loại sự kiện trên trang web của mình, vì vậy tôi đang tải tập lệnh sau ở chân trang:

<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/highbridge-team/sales', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>

Bạn sẽ thấy Calendly script chia nhỏ như sau:

  • URL - sự kiện chính xác mà tôi muốn tải trong tiện ích con của mình.
  • bản văn - văn bản mà tôi muốn nút có.
  • Màu - màu nền của nút.
  • văn bản màu - màu sắc của văn bản.
  • xây dựng thương hiệu - loại bỏ nhãn hiệu Calendly.

Cửa sổ bật lên văn bản của Calendly

Tôi cũng muốn điều này có sẵn trên toàn bộ trang web của mình bằng cách sử dụng một liên kết hoặc nút. Để làm điều này, bạn sử dụng sự kiện onClick trong Calendly văn bản neo. Của tôi có các lớp bổ sung để hiển thị nó dưới dạng một nút (không thấy trong ví dụ bên dưới):

<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/highbridge-team/sales'});return false;">Schedule time with us</a>

Thông báo này có thể được sử dụng để có nhiều dịch vụ trên một trang. Có lẽ bạn có 3 loại sự kiện mà bạn muốn nhúng… chỉ cần sửa đổi URL cho đích thích hợp và nó sẽ hoạt động.

Cửa sổ bật lên nhúng nội tuyến của Calendly

Việc nhúng nội tuyến hơi khác ở chỗ nó sử dụng một div được gọi cụ thể theo lớp và đích.

<div class="calendly-inline-widget" data-url="https://calendly.com/highbridge-team/sales" style="min-width:320px;height:630px;"></div>

Một lần nữa, điều này rất hữu ích vì bạn có thể có nhiều div với mỗi Calendly lập lịch trong cùng một trang.

Lưu ý bên lề: Tôi ước Calendly đã sửa đổi cách thực hiện điều này để nó không cần phải quá kỹ thuật. Sẽ thật tuyệt nếu bạn chỉ có thể có một lớp và sau đó sử dụng href đích để tải tiện ích con. Điều đó sẽ yêu cầu ít mã hóa trực tiếp hơn trên các hệ thống quản lý nội dung. Nhưng… nó là một công cụ tuyệt vời (hiện tại!). Ví dụ: một plugin WordPress có mã ngắn sẽ lý tưởng cho môi trường WordPress. Nếu bạn quan tâm, Calendly… Tôi có thể dễ dàng xây dựng cái này cho bạn!

Bắt đầu với Calendly

Tuyên bố từ chối trách nhiệm: Tôi là người dùng của Calendly và cũng là một chi nhánh cho hệ thống của họ. Bài viết này có các liên kết liên kết trong suốt bài viết.