> For the complete documentation index, see [llms.txt](https://bothub.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bothub.gitbook.io/project/advanced-tool/ec-bot/abandoned-cart.md).

# 场景应用：购物车召回配置

特定场景配置指南：购物车召回

定位“放弃购物车”的顾客，请他们回到网站下单，为网站增加额外收益。\
举个🌰：顾客A访问了你的店铺，向购物车添加了商品后，没有立即完成付款。这时候，通过Messenger向他说“购物车商品打折啦，回来完成付款吧！”

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LFS6vEm8EIG18IoAaZn%2F-LFS7B73hjbbzsA4kwBh%2Fimage.png?alt=media\&token=bc562617-bd12-449f-ad4b-0ee94e2dd0e3)

如果你是 Shopify 商家，推荐直接使用我们开发的 [CartsBot](https://app.cartsbot.com/views/install/) APP，不需要编辑代码，几分钟完成设置，还有 自动生成优惠券 等优化功能。\
如果不是 Shopify 商家，也可以通过手动配置，实现 Messenger 购物车召回。

## 准备工作

* 一个连了Facebook Page 的 Bot [去创建](https://messenger.bothub.ai/)
* 一个会添加网页代码的工程师

## 设置步骤

1. 数据集成 - 商品 Feed ，[导入商品 Feed](https://docs.bothub.ai/advanced-tool/product/product-feed)。
2. 内容管理 - 自定义内容，创建1条召回消息。你可以自定义编辑这部分内容。

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfJJBljIW529oty9HOH%2F-LfJJDhAWzdszoi6Y0oW%2Fimage.png?alt=media\&token=5de89efe-567e-49c0-aef5-9b9232a2d69a)

&#x20;   3\. 受众人群 - 受众定义，创建受众。添加事件“added\_to\_cart”，选择发生。添加事件“purchase”，选择“不发生”。该受众为添加购物车但未付款的用户。\
&#x20;       顾客勾选checkbox并向购物车内添加商品时，将自动加入受众。

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LVBSsjH2Zj1oSkUdHKe%2F-LVBTlXtuPVFpxMAUnMS%2F24.png?alt=media\&token=cd232273-34bb-4ef6-a14f-7acaa4a0d2d3)

&#x20;   4\. 受众人群 - 触发规则，添加触发规则。\
&#x20;       选择触发事件“added\_to\_cart”；\
&#x20;       受众选择“Users who abandoned cart”；\
&#x20;       设置消息延迟时间（建议1小时内）；\
&#x20;       发送内容选择之前创建的内容块。

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfJJBljIW529oty9HOH%2F-LfJJiqumW2kWXYnU6ka%2Fimage.png?alt=media\&token=cc24e170-7710-47e7-af1e-7c0dcc8c9386)

&#x20;   5\. 推广工具 - 来源管理，添加复选框/优惠券插件。你可以设置插件的隐藏时间——用户在勾选后的一段时间内，用同个浏览器访问店铺，都不会再看到插件。

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LWUWaS-EaBADkeX2Gqg%2F-LWUgASSzIF_BqNpoCGt%2Fimage.png?alt=media\&token=4a94ffb7-8c04-441d-a993-d0b1a6a59818)

&#x20;       复选框插件：如果你的店铺支持‘复选框’默认勾选，推荐选择此插件。

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LHHEneZxd0coD-UcePX%2F-LHHLGRFuCm2eoAQWw9_%2Fimage.png?alt=media\&token=6b784a5f-aeaf-45c0-b45f-40156783cd03)

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfJchuXki3zYpzEh3_k%2F-LfJd2gf71xNqXPsj8NC%2Fimage.png?alt=media\&token=12bfaecf-e3e0-4c8b-93dd-73c526bb4f69)

&#x20;       优惠券插件：引导顾客主动勾选，成为主页粉丝。如果你的店铺不支持‘复选框’默认勾选，建议你使用优惠券插件。[查看示例](https://demo.bothub.ai/sdk/plugins/discount.php)

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LHHEneZxd0coD-UcePX%2F-LHHLRUczKR8w7oSKrhY%2Fimage.png?alt=media\&token=99c9fe97-bb8f-4c32-b6c2-6ae0801616e9)

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfJJBljIW529oty9HOH%2F-LfJKBCCvl6mZPBd7ZOn%2Fimage.png?alt=media\&token=1fb53da2-7222-4277-8053-178bb9a5699b)

&#x20;     创建好插件后，填写商店域名，以便插件正常显示。完成设置后，点击保存。如果你在Bothub 新版SDK上线（2019年5月16日）之前，已经在网站上做好了集成，请按照[旧版代码部署方法](https://docs.bothub.ai/advanced-tool/ec-bot/abandoned-cart-old-version-sdk)操作修改。旧版SDK将于2019年11月30日停止支持，请尽快更新至新版SDK。

## 集成SDK - 优惠券插件

1. 在商品页添加HTML代码。至推广工具-来源管理中，找到Discount Widget插件，拷贝HTML代码，粘贴至商品页Add to Cart（触发事件）按钮下方。

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfJJBljIW529oty9HOH%2F-LfJKX0I36jfOCaHQz-R%2Fimage.png?alt=media\&token=7d2b9fdd-7a2f-4bbb-a791-53c852c832b2)

&#x20;   2\. 在商品页添加初始化代码。拷贝插件中的初始化代码，粘贴至店铺页`<head>`标签内。

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfJJBljIW529oty9HOH%2F-LfJKTl0Edxs7LFNBouC%2Fimage.png?alt=media\&token=a6218148-155b-432d-8039-4a5b3051410c)

&#x20;   3\. 在用户点击加车时，向bothub发送`add_to_cart`事件。实际情况中，按钮可能有其他元素，不需要改动，添加如下`onclick`代码即可。

```javascript
<button [按钮中可能有的其他内容] onclick="window.BH.Event.addedToCart({
    sku: '260874012',
    product: 'Leaf Print Padded Bikini Set - Bee Yellow S',
    currency: 'USD',
    price: 26.99,
})";>
</button>
```

&#x20;   4\. 在购买完成页，发送`purchase`事件，确保用户在购买完成后，Bot不再向其发送消息。这样，代码配置的部分就完成了。

```markup
<!-- 这是配置的初始化脚本，和在网页中部署一样 -->
<script src="https://assets.bothub.ai/bothub/sdk/configs/bothub-widgets-config-126.js"></script>

<script>
window.bhAsyncInit.push(function() {
    window.BH.Event.purchase({
        // 订单号
        orderNumber: '123',
        // 币种
        currency: 'US',
        // 总金额
        totalPrice: 12345,
    })
});
</script>
```

&#x20;   5\. 测试一下，在商品页勾选checkbox后，点击加入购物车，不完成购买。Bot稍后便自动发送召回消息。

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfJJBljIW529oty9HOH%2F-LfJLSvzeSf6QDytqI_Z%2Fimage.png?alt=media\&token=e8380a16-8a5b-45cb-a07d-315b982af082)

## 集成SDK - 优惠券插件（旧版）

## 参考文档

示例代码：[点击这里](https://demo.bothub.ai/sdk/)\
SDK文档：[点击这里](https://docs.bothub.ai/advanced-tool/promotion/sdk)