Calendly: 웹사이트 또는 WordPress 사이트에 일정 팝업 또는 포함된 캘린더를 포함하는 방법

캘린더 일정 위젯

몇 주 전에 사이트에 있었는데 링크를 클릭하여 약속을 잡기 위해 링크를 클릭했을 때 목적지 사이트로 연결되지 않았다는 사실을 알게 되었습니다. 우연히 팝업 창에서 직접 스케줄러. 이것은 훌륭한 도구입니다... 사이트에 누군가를 유지하는 것이 외부 페이지로 전달하는 것보다 훨씬 더 나은 경험입니다.

칼렌들리란?

우연히 귀하의 Google 작업 공간 또는 다른 일정 시스템을 사용하여 아름답고 사용하기 쉬운 일정 양식을 작성할 수 있습니다. 무엇보다도 캘린더에서 누군가가 나와 연결하도록 허용하는 시간을 제한할 수도 있습니다. 예를 들어 특정 요일에 외부 회의에 사용할 수 있는 시간이 몇 시간뿐인 경우가 많습니다.

이와 같은 스케줄러를 사용하는 것도 양식을 작성하는 것보다 훨씬 더 나은 경험입니다. 나를 위해 디지털 트랜스포메이션 컨설팅 회사, 리더십 팀이 회의에 참석하는 그룹 판매 이벤트가 있습니다. 또한 캘린더 초대장에 모든 온라인 회의 링크가 포함되도록 웹 회의 플랫폼을 Calendly에 통합합니다.

Calendly는 일정 양식을 페이지에 직접 포함하거나, 버튼에서 열거나, 사이트 바닥글의 부동 버튼에서 열 수 있는 훌륭한 작업을 수행하는 위젯 스크립트 및 스타일시트를 출시했습니다. Calendly의 스크립트는 잘 작성되었지만 사이트에 통합하기 위한 문서는 전혀 좋지 않습니다. 사실, Calendly가 아직 다른 플랫폼을 위한 자체 플러그인이나 앱을 게시하지 않았다는 사실에 놀랐습니다.

이것은 매우 유용합니다. 재택 서비스 중이고 고객이 약속을 잡을 수 있는 수단을 제공하려는 경우, 애견 산책자, 방문자가 데모 일정을 예약하도록 하는 SaaS 회사 또는 쉽게 일정을 잡아야 하는 여러 구성원이 있는 대기업… 포함 위젯은 훌륭한 셀프 서비스 도구입니다.

사이트에 자연스럽게 포함하는 방법

이상하게도 이러한 임베드에 대한 지침은 다음 페이지에서만 찾을 수 있습니다. 이벤트 종류 Calendly 계정 내의 실제 이벤트 수준이 아니라 수준입니다. 오른쪽 상단의 이벤트 유형 설정에 대한 드롭다운에서 코드를 찾을 수 있습니다.

자연스럽게 끼워넣다

클릭하면 삽입 유형에 대한 옵션이 표시됩니다.

팝업 텍스트 삽입

코드를 가져와 사이트의 원하는 위치에 삽입하면 몇 가지 문제가 있습니다.

  • 단일 페이지에서 몇 가지 다른 위젯을 호출하려는 경우… 아마도 스케줄러(팝업 텍스트)와 바닥글 버튼(팝업 위젯)을 시작하는 버튼이 있을 것입니다… 시간의. 그건 불필요합니다.
  • 사이트에서 인라인으로 외부 스크립트 및 스타일시트 파일을 호출하는 것은 사이트에 서비스를 추가하는 가장 최적의 방법이 아닙니다.

내 추천은 헤더에 스타일시트와 자바스크립트를 로드하는 것입니다. 그런 다음 사이트 전체에서 의미가 있는 다른 위젯을 사용하세요.

Calendly의 위젯 작동 방식

우연히 사이트에 삽입하는 데 필요한 두 개의 파일(스타일시트와 자바스크립트)이 있습니다. 이것을 사이트에 삽입하려면 HTML의 헤드 섹션에 다음을 추가합니다.

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

그러나 WordPress를 사용하는 경우 가장 좋은 방법은 다음을 사용하는 것입니다. functions.php 파일을 사용하여 WordPress의 모범 사례를 활용하여 스크립트를 삽입합니다. 따라서 내 자식 테마에는 스타일시트와 스크립트를 로드하는 다음 코드 줄이 있습니다.

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' );

그러면 내 사이트 전체에 로드되고 캐시됩니다. 이제 내가 원하는 위젯을 사용할 수 있습니다.

Calendly의 바닥글 버튼

내 사이트의 이벤트 유형이 아닌 특정 이벤트를 호출하고 싶기 때문에 바닥글에 다음 스크립트를 로드하고 있습니다.

<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>

당신은 우연히 스크립트는 다음과 같이 나뉩니다.

  • URL – 위젯에 로드하려는 정확한 이벤트.
  • 본문 – 버튼에 갖고 싶은 텍스트.
  • 색상 – 버튼의 배경색.
  • 텍스트 색상 – 텍스트의 색상.
  • 브랜드 – Calendly 브랜딩 제거.

Calendly의 텍스트 팝업

또한 링크나 버튼을 사용하여 내 사이트 전체에서 이 기능을 사용할 수 있기를 바랍니다. 이렇게 하려면 다음에서 onClick 이벤트를 활용합니다. 우연히 앵커 텍스트. 광산에는 버튼으로 표시하는 추가 클래스가 있습니다(아래 예에는 표시되지 않음).

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

이 메시지는 단일 페이지에 여러 오퍼링을 포함하는 데 사용할 수 있습니다. 포함하고 싶은 3가지 유형의 이벤트가 있을 수 있습니다. 적절한 대상에 대한 URL을 수정하기만 하면 작동합니다.

Calendly의 인라인 삽입 팝업

인라인 임베드는 클래스 및 대상별로 특별히 호출되는 div를 사용한다는 점에서 약간 다릅니다.

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

다시 말하지만, 이것은 각각에 여러 div를 가질 수 있기 때문에 유용합니다. 우연히 같은 페이지의 스케줄러.

참고 사항: 나는 Calendly가 이것이 구현된 방식을 수정하여 그렇게 기술적일 필요가 없었으면 합니다. 클래스를 갖고 대상 href를 사용하여 위젯을 로드할 수 있다면 좋을 것입니다. 이를 위해서는 콘텐츠 관리 시스템 전반에 걸쳐 직접적인 코딩이 덜 필요합니다. 하지만… 그것은 훌륭한 도구입니다(현재로서는!). 예를 들어 – 단축 코드가 있는 WordPress 플러그인은 WordPress 환경에 이상적입니다. 당신이 관심이 있다면, Calendly... 내가 당신을 위해 이것을 쉽게 만들 수 있습니다!

Calendly 시작하기

면책 조항: 저는 Calendly의 사용자이자 시스템의 계열사이기도 합니다. 이 기사에는 기사 전체에 제휴사 링크가 있습니다.