Squarespace 上的订座

Squarespace 自带的方案

Squarespace 自带的预约产品面向美容院和咨询师。它是一个人订一个时段，这不是餐厅的运作方式：您有二十张大小不一的桌子，占桌时长取决于人数，而且厨房不可能让所有人都在 7:30 入座。Squarespace 用户的另一条路是平台的组件，那会带来按顾客人数收取的费用和每月订阅费。看看我们的 OpenTable 对比，了解那要花多少钱。

Tablez 围绕桌位、占桌时长和接单节奏打造，并且每月 60 个预订以内免费，之后每月 £9.99，不按人头收费。

把订座表单添加到页面

1. 在编辑器中打开页面并点击编辑。
2. 在您想放订座表单的位置添加一个区块，并选择代码。
3. 类型保持为 HTML，粘贴您的嵌入代码：

<script src="https://tablez.uk/embed.js" data-venue="your-venue"></script>

4. 点击应用，然后点击保存。

表单会显示在区块中，并随着顾客填写自动调整高度。所有当前的 Squarespace 套餐都有代码块。如果您用的是没有代码块的很旧的套餐，请使用嵌入块，并放入组件页面里的 iframe 版本。

页眉中的“预订餐桌”按钮

大多数餐厅希望在导航栏中放一个按钮，而不是把表单埋在某个页面里。最简单的办法是在网站样式中添加页眉按钮或导航链接，指向您的订座页面 https://tablez.uk/book/your-venue。设置为在新标签页打开。无需代码，在手机菜单上也能用。

如果您希望按钮把表单在页面上方的浮层中打开，请把脚本的按钮版本粘贴到页脚或页面的代码区块中：

<script src="https://tablez.uk/embed.js" data-venue="your-venue" data-mode="button" data-label="Book a table" data-colour="#0f5c4c"></script>

修改颜色以匹配您的网站。要让 Squarespace 现有按钮打开浮层，需要给它添加 tablez-open 类，但 Squarespace 不允许在自带按钮上这样做，所以实用的办法是使用生成的按钮或普通链接。

与您的风格匹配

在 Tablez 后台设置主题色并上传标志，表单会使用它们。表单背景透明，会呈现它所在区块的颜色。如果您的网站有深色区块，请把表单放在浅色区块里；它是为浅色背景设计的。

Fluid Engine 和手机版布局

在 Fluid Engine（Squarespace 7.1）中，代码区块可以自由调整大小。在手机上让它占满区块全宽，在桌面端约 600px，这样表单不会被挤压。请在编辑器里检查手机视图：表单以手机优先设计，无需折腾就应该显示正常。

要留意的事

• 不要把代码粘贴到文本区块里，那样只会显示为文字。必须使用代码区块。
• Squarespace 的代码注入（在设置中）用于全站脚本。您可以把按钮脚本放在那里，让每个页面都有按钮，但如果只在一个页面放表单，请使用代码块。
• 如果您对 Squarespace 的 cookie 横幅使用严格模式，嵌入不受影响，因为它不会在您的域名上设置 cookie。