如何创建小组件

概览

TicketingHub 预订小组件是一款可集成到网站中的 JavaScript 工具，客户可以直接通过它预订产品。您可以在控制面板中创建小组件，按部分逐一完成配置，然后将一小段代码粘贴到您的网站上。

支持的浏览器

Safari 16.4 及更高版本、Chrome 111 及更高版本、Firefox 128 及更高版本。

创建新小组件

在控制面板中，前往 小组件
点击 新建小组件
为小组件命名，选择它要销售的产品，然后点击 创建小组件

随后您会进入小组件的设置页面，在这里可以完成其余所有配置。左侧是按部分分组的设置，右侧则显示小组件的实时预览；您进行更改时，预览会随之刷新。

配置您的小组件

销售内容

选择小组件提供的产品、套餐和礼品卡，添加额外项目（全部添加或手动选择其中一部分），并决定客户是否可以购买产品作为礼券，或在小组件中兑换礼券。

预订流程

选择客户在小组件中的操作流程：先选票（先选择票券，再选择日期和时间）、先选活动（浏览日历，再选择要预订的内容）或 仅兑换礼券。您还可以设置默认日历视图，并要求客户输入两次电子邮箱地址，以避免拼写错误。

销售规则

控制小组件何时以及销售哪些内容：销售开始的日期和时间、日历打开时显示的日期、何时显示时段的剩余容量，以及客户可以使用哪些货币付款。如果日历显示的第一周或第一个月没有可预订的内容，日历会继续向后查找，并打开第一个有可预订内容的日期。

外观

添加自定义 CSS，进一步调整小组件的外观，使其与您的品牌保持一致。

分析

连接 Google Analytics 或 Google Tag Manager，以跟踪访客如何使用您的小组件。

高级设置

设置购买完成后将客户转到的页面，并设置转售商使用的 URL 参数，以便将其预订归因于相应的转售商。

预览、发布和部署

您所做的更改会以草稿形式应用于实时预览中——点击 更新预览，即可在右侧查看更改，而不会影响线上小组件。确认无误后，点击发布使更改上线，或点击取消放弃草稿。

要将小组件添加到您的网站，请打开 安装说明：将 script 标签复制到您的页面中，然后在 嵌入式 小组件（直接显示在页面内容中）和 模态框/弹窗 小组件（点击按钮后在叠加层中打开）之间进行选择，并粘贴相应的代码片段。

小组件如何滚动页面

当客户进入下一步时，小组件会将页面滚动回预订表单顶部，因此，滚动浏览了很长票券列表的客户不会落在下一步页面的中间位置。如果您将小组件放在自己的可滚动面板中，滚动的将是该面板；只有当面板本身已经滚出视野时，您的页面才会同时滚动。小组件会在表单顶部滚出视野时进行滚动，也会在表单底部超出屏幕、但其上方仍有充足空间时进行滚动。已经能够完整显示在屏幕上的表单会保持原位，同时小组件会为固定在页面顶部的页眉留出空间。

如果这不符合您的页面布局，可以通过将 "scrollOnStepChange": false 添加到您粘贴的小组件代码中，阻止页面滚动：

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOnStepChange":false}'></div>

如果您的页眉会在访客向下滚动时隐藏，并在向上滚动时重新出现，小组件将无法测量其高度，表单顶部可能会被页眉遮挡。与其关闭滚动功能，不如向小组件提供页眉的像素高度：

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOffset":80}'></div>

克隆现有小组件（经典小组件）

如果您使用经典小组件编辑器，可以复制小组件，而不必重新创建：

前往 小组件
选择一个现有小组件
点击克隆
选择目标渠道并确认选择

自定义克隆的小组件，然后发布并将代码复制到您的网站上。