Calendly:如何在您的网站或 WordPress 网站中嵌入计划弹出窗口或嵌入式日历

日历安排小工具

几周前,我在一个网站上,注意到当我点击一个链接来安排与他们的约会时,我没有被带到目的地网站,有一个小部件发布了 Calendly 调度程序直接在弹出窗口中。 这是一个很棒的工具……让某人留在您的网站上比将他们转发到外部页面要好得多。

什么是日历?

Calendly 直接与您的集成 谷歌工作区 或其他日历系统来构建既美观又易于使用的日程表。 最重要的是,您甚至可以限制让某人在您的日历上与您联系的时间。 例如,在特定日期,我通常只有几个小时可用于外部会议。

使用这样的调度程序也比仅仅填写表格要好得多。 对于我的 数字化转型咨询公司, 我们有领导团队参加会议的团体销售活动。 我们还将我们的网络会议平台集成到 Calendly,以便日历邀请包含所有在线会议链接。

Calendly 推出了一个小部件脚本和样式表,它在将日程安排表单直接嵌入页面、通过按钮打开、甚至从网站页脚中的浮动按钮打开方面做得非常出色。 Calendly 的脚本写得很好,但是将它集成到您​​的站点的文档却一点也不好。 事实上,我很惊讶 Calendly 还没有为不同平台发布自己的插件或应用程序。

这非常有用。 无论您是从事家庭服务并希望为您的客户提供一种安排预约的方式、遛狗者、希望访客安排演示的 SaaS 公司,还是需要轻松安排多个成员的大型公司...... Calendly嵌入的小部件是一个很棒的自助服务工具。

如何在您的网站中嵌入日历

奇怪的是,你只能找到这些嵌入的方向 事件类型 级别而不是您的 Calendly 帐户中的实际事件级别。 您将在右上角的事件类型设置的下拉列表中找到代码。

日历嵌入

单击它后,您将看到嵌入类型的选项:

嵌入弹出文本

如果您获取代码并将其嵌入您网站上任何您想要的位置,则会出现一些问题。

  • 如果你想在一个页面上调用几个不同的小部件......也许有一个按钮来启动调度程序(弹出文本)以及页脚按钮(弹出窗口小部件)......你将添加样式表和脚本次。 那是不必要的。
  • 在站点中内联调用外部脚本和样式表文件并不是将服务添加到站点的最佳方法。

我的建议是在您的标题中加载样式表和 Javascript……然后在整个站点中使用其他小部件。

Calendly 的小部件如何工作

Calendly 有两个文件需要嵌入您的网站,一个样式表和 javascript。 如果您要将这些插入到您的网站中,我会将以下内容添加到您的 HTML 的 head 部分中:

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

你会看到的 Calendly 脚本分解如下:

  • 网址 – 我想在我的小部件中加载的确切事件。
  • 文本 – 我希望按钮具有的文本。
  • 颜色 – 按钮的背景颜色。
  • 文字颜色 –文本的颜色。
  • 品牌推广 – 删除 Calendly 品牌。

Calendly 的文本弹出窗口

我还希望使用链接或按钮在我的整个网站上都可用。 为此,您可以在您的 Calendly 锚文本。 我的还有其他类可以将其显示为按钮(在下面的示例中看不到):

<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 同一页面中的调度程序。

旁注:我确实希望 Calendly 修改它的实现方式,这样它就不必太技术化了。 如果您可以只拥有一个类,然后使用目标 href 加载小部件,那就太好了。 这将需要更少的跨内容管理系统的直接编码。 但是......这是一个很棒的工具(现在!)。 例如,带有短代码的 WordPress 插件非常适合 WordPress 环境。 如果你有兴趣,Calendly……我可以很容易地为你构建这个!

开始使用日历

免责声明:我是 Calendly 的用户,也是他们系统的附属机构。 本文在整篇文章中都有附属链接。