> 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/order-receipt-old-version-sdk.md).

# 场景应用：推送订单回执（旧版SDK）

特定场景配置指南：推送订单回执

在顾客成功付款后，向他的 Messenger 推送订单回执。后续，你还可以向他推送发货提醒、物流更新。提升服务质量的同时，增加一个获取粉丝的渠道。你甚至可以在未来向顾客推送活动信息，提升重复购买。

要发送订单回执，你需要完成两步配置：

* 在网页上放置 Checkbox 插件 / Send to Messenger 插件，引导用户勾选 / 点击。以此获取用户的 ID。
* 在程序中配置订单数据。以发送正确的订单信息。

![顾客收到订单回执](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LFS3t6dZzs63I6znrzI%2F-LFS45c_V3KL5SoTk6Em%2F01kye-w6fgg.gif?alt=media\&token=d57b944e-afda-43c8-a9c0-1548e0f597df)

为了方便推广与对比效果，我们为你提供了一系列推广工具。在本场景中，我们推荐使用 3 种入口方式，你可以任选一或多种：

1. 在结账完成页，添加 “发送消息插件”。顾客点击按钮的同时，发送订单回执。
2. 在商品详情页，添加 “复选框插件”。如果你同时在做 [购物车召回](https://docs.bothub.ai/advanced-tool/ec-bot/abandoned-cart)，那么你也可以将此作为入口。
3. 在付款页，添加 “复选框插件”。引导用户订阅 “订单回执、物流更新提醒”。

下面，为你详细介绍 3 种入口分别的效果及配置方法。

## 在结账完成页添加 “发送消息插件” <a href="#zai-jie-zhang-wan-cheng-ye-tian-jia-fa-song-xiao-xi-cha-jian" id="zai-jie-zhang-wan-cheng-ye-tian-jia-fa-song-xiao-xi-cha-jian"></a>

‌

优势：在付款完成后一键获取回执，对用户来说是很自然的操作。用这种方式，一次性地将订单回执发送给用户。注意，如果你希望未来继续向用户发送物流更新提醒，何种方式不适用，需要使用复选框插件，参考后文。‌

### 效果图 <a href="#xiao-guo-tu" id="xiao-guo-tu"></a>

![结账页 发送消息按钮](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfSK5NhvP8jL2M6zJCx%2F-LfSKc1Ht2UHDUh4JhiN%2Fimage.png?alt=media\&token=0031794e-c384-4312-aeba-0540e5670a0c)

### 准备入口

从左侧来源管理中创建发送消息插件的推广入口

![创建发送消息插件](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LFS3t6dZzs63I6znrzI%2F-LFS4MOeG_ipyJGAI1pD%2Fimage-20180620175457009.png?alt=media\&token=c048f5b3-6dc0-4cdb-931a-ab3b6fd748ec)

创建完成后，填写上你网站的域名，点击启用并保存。

![填写你的网站域名](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LFS3t6dZzs63I6znrzI%2F-LFS4Vm7Z_CpaiWK4lKd%2Fimage-20180620175846525.png?alt=media\&token=9a197bae-0a4d-4955-b819-243a30eebe42)

入口准备好了，下面我们在网站上部署代码。

### 部署代码

1. 拷贝插件页面的初始化代码（如下图）：

![拷贝红框所示代码](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LFqlRMZCTXj0Fl4OpeH%2F-LFqo4ZFpnG8PvPNZ7Ld%2F001.jpg?alt=media\&token=1910a6b6-a20a-4bd3-9bfa-ca18927746c2)

2\. 在拷贝的代码中再添加一项：

```javascript
ecommerce: {
    send_to_messenger: {
        receipt: 订单回执数据
    }
}
```

最后代码将会呈现出这个样子：

```markup
<script>
window.BOTHUB = {
    "facebook_page_id": "1667702766649208",
    "language": "zh_CN",
    "entrance": {
        "fb_send_to_messenger_data_ref": "base64:eyJnYXRld2F5IjoiZW5nYWdlbWVudCIsImNvZGUiOiI0NWkiLCJwc2lkIjoie3tmYl91c2VyX2lkfX0ifQ=="
    },
    ecommerce: {
        send_to_messenger: {
            receipt: 订单回执数据
        }
    }
};
(function(s,id,l){s.id=id;s.src=l;window[id]||document.body.appendChild(s)})
(document.createElement('script'),'bothub-sdk','//sdk.bothub.ai/bothub.js');
</script>
```

{% hint style="warning" %}
其中，`facebook_page_id`、`language`、`entrance`三项将会随着`Bot`的不同而不同，最后显示的效果以实际代码为准。
{% endhint %}

3\. 将代码中的“订单回执数据”，在渲染页面时替换为实际要发送的订单数据：

```javascript
{
  "recipient_name":"Stephane Crozatier",  // 收件人全名
  "order_number":"12345678902", // 订单号
  "currency":"USD", // 订单货币
  "payment_method":"Visa 2345",     // 支付方式，可以为任意字符串，例如"Paypal", "Paid"
  "order_url":"http://petersapparel.parseapp.com/order?order_id=123456", // 订单链接
  "timestamp":"1428444852",      // 下单时间
  "address":{  // 订单地址信息
    "street_1":"1 Hacker Way", 
    "street_2":"",
    "city":"Menlo Park",
    "postal_code":"94025",
    "state":"CA",
    "country":"US"
  },
  "summary":{ // 订单金额总计
    "subtotal":75.00,
    "shipping_cost":4.95,
    "total_tax":6.19,
    "total_cost":56.14
  }, // 下单时使用的优惠。若没有，adjustments可以传空数组
  "adjustments":[
    {
      "name":"New Customer Discount",
      "amount":20
    },
    {
      "name":"$10 Off Coupon",
      "amount":10
    }
  ],
  "elements":[ // 物品详细信息
    {
      "title":"Classic White T-Shirt",
      "subtitle":"100% Soft and Luxurious Cotton",
      "quantity":2,
      "price":50,
      "currency":"USD",
      "image_url":"https://fakeimg.pl/200x200/"
    },
    {
      "title":"Classic Gray T-Shirt",
      "subtitle":"100% Soft and Luxurious Cotton",
      "quantity":1,
      "price":25,
      "currency":"USD",
      "image_url":"https://fakeimg.pl/200x200/"
    }
  ]
}
```

4\. 将上述配置代码放置到`</body>` 标签内最底部。&#x20;

5\. 拷贝`HTML`代码，添加至结账完成页`<body>`标签里合适位置：

![拷贝红框所示代码](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LFqlRMZCTXj0Fl4OpeH%2F-LFqoWDVpkfZ8uS93mPj%2F002.jpg?alt=media\&token=9a4cecca-9b12-4b85-9c1b-6b1e006a43c8)

&#x20; 6\. 完成。用户点击 “send to messenger” 按钮，将会收到订单回执信息。

## 在商品详情页添加 “复选框插件” <a href="#zai-shang-pin-xiang-qing-ye-tian-jia-fu-xuan-kuang-cha-jian" id="zai-shang-pin-xiang-qing-ye-tian-jia-fu-xuan-kuang-cha-jian"></a>

优势：我们建议每个电商客户都使用 Messenger 做购物车召回，它帮你带来 5% - 10% 的额外订单。商品页的 “复选框插件” 用处多多——除了发送召回消息，我们还可以向勾选并成功下单的顾客发送订单回执，甚至是包裹更新提醒。‌

### 效果图 <a href="#xiao-guo-tu-1" id="xiao-guo-tu-1"></a>

![详情页 复选框插件](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfSK5NhvP8jL2M6zJCx%2F-LfSLMnRuU0BmCHKBpmY%2Fimage.png?alt=media\&token=4398f290-17c2-4d60-b6a7-914cce7cd6ce)

### 准备入口 <a href="#zhun-bei-ru-kou-1" id="zhun-bei-ru-kou-1"></a>

* 如果你已经完成 [场景应用：购物车召回配置](https://docs.bothub.ai/advanced-tool/ec-bot/abandoned-cart) ，那么现在你的网站上已经有了对应入口，可直接进行代码部署。
* 如果你还没有进行 [场景应用：购物车召回配置](https://docs.bothub.ai/advanced-tool/ec-bot/abandoned-cart)，我们建议你先进行配置，以更好引导顾客完成点击。此外，通过 Messenger 召回弃单，带来额外销售额。配置完成后，可继续进行下面的代码部署。

### 部署代码‌ <a href="#bu-shu-dai-ma-1" id="bu-shu-dai-ma-1"></a>

在这个页面，我们需要放置`checkbox`插件，并且存储用户在您网站上的账号，以便给用户发送订单回执和物流更新提醒。‌

1. 将用户在您网站上的账号存入`localStorage`，这段代码放在`</body>`标签之前

```
<script>localStorage.bothub_custom_user_id = "<user_id of this user on your website>"</script>
```

&#x20;2 . 用户点击加车时调用如下代码

```
BOTHUB.Marketing.logEvent('fb_mobile_add_to_cart')
```

如此，在用户勾选并加车后，bothub会将用户在你网站上的id与Facebook提供的ref进行绑定，使得在此后的一段时间内，你可以通过API，指定向该用户发送消息。‌

### 使用API发送订单回执 <a href="#shi-yong-api-fa-song-ding-dan-hui-zhi" id="shi-yong-api-fa-song-ding-dan-hui-zhi"></a>

在你得知用户成功下单后，你可以指定向该custom\_user\_id的用户发送消息。发送方法参见[发送消息API](https://docs.bothub.ai/advanced-tool/api/messenger-api)。你可以在API管理中，选择有效的API KEY，获取正确的消息格式（JSON与CURL）来进行编辑和测试。

![获取有效API密钥](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfSK5NhvP8jL2M6zJCx%2F-LfSL7JKetni0PHT5FQG%2Fimage.png?alt=media\&token=40b60b7e-cfc7-4ef2-a234-392ff56243ba)

## 在付款页添加 “复选框插件” <a href="#zai-fu-kuan-ye-tian-jia-fu-xuan-kuang-cha-jian" id="zai-fu-kuan-ye-tian-jia-fu-xuan-kuang-cha-jian"></a>

### 效果图 <a href="#xiao-guo-tu-2" id="xiao-guo-tu-2"></a>

![  付款页 复选框插件 ](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfSK5NhvP8jL2M6zJCx%2F-LfSLUwnkWyGaKRUHgTK%2Fimage.png?alt=media\&token=6ac9975d-5659-4424-b0e7-e50c067903b1)

### 创建自定义事件 <a href="#chuang-jian-zi-ding-yi-shi-jian" id="chuang-jian-zi-ding-yi-shi-jian"></a>

至受众人群-事件中添加自定义事件。在这个场景中，用户点击某个按钮时需要触发此事件，并将用户在你网站上的custom\_user\_id传给bothub。‌

这里我们命名事件为"subscribe\_to\_order\_updates"，你也可以使用其他名称。记住这个名称，事件触发代码中需要用到。

![添加自定义事件](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfSK5NhvP8jL2M6zJCx%2F-LfSL_g2CPvuFpeq41l4%2Fimage.png?alt=media\&token=8f575c6a-66d6-442f-8f36-9112f3c0b48e)

### 准备入口 <a href="#zhun-bei-ru-kou-2" id="zhun-bei-ru-kou-2"></a>

从左侧来源管理中创建复选框插件的推广入口：

![添加复选框插件](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfSK5NhvP8jL2M6zJCx%2F-LfSLyglXJSQekTO1-38%2Fimage.png?alt=media\&token=61546f70-af80-4c28-a4bc-32192770d3c4)

创建完成后，填写上你网站的域名，点击启用并保存。

![填写你的网站域名](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfSK5NhvP8jL2M6zJCx%2F-LfSM11hwCJNlMmkecXb%2Fimage.png?alt=media\&token=cb00bf07-3f49-4b3b-b05a-a6cc01f05af0)

入口准备好了，下面我们在网站上部署代码。‌

### 部署代码 - 订单确认页‌ <a href="#bu-shu-dai-ma-ding-dan-que-ren-ye" id="bu-shu-dai-ma-ding-dan-que-ren-ye"></a>

在这个页面，我们需要放置`checkbox`插件，并且存储用户在您网站上的账号，以便给用户发送订单回执和物流更新提醒。‌

1. 将用户在您网站上的账号存入`localStorage`，这段代码放在`</body>`标签之前

```
<script>localStorage.bothub_custom_user_id = "<user_id of this user on your website>"</script>
```

‌ 2. 拷贝插件页面的初始化代码（如下图），将配置代码放到`</body>`标签内最底部：‌

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfSK5NhvP8jL2M6zJCx%2F-LfSM6FSNur4Dy8bEqwX%2Fimage.png?alt=media\&token=9a5bf236-fcc4-4cb3-89c9-417055f26ede)

&#x20;3\. 拷贝`HTML`代码，添加至页面`<body>`标签里合适位置‌

![](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfSK5NhvP8jL2M6zJCx%2F-LfSMF9Az5qgzdzAVMcA%2Fimage.png?alt=media\&token=8b5eb435-1c2e-4313-99d1-e5e21e5e59d5)

&#x20;4\. 用户点击"订阅"（或其他触发按钮）后，调用如下代码（事件名称与创建的自定义事件一致）：

```
BOTHUB.Marketing.logEvent('subscribe_to_order_updates')
```

若用户已勾选`checkbox`插件，点击按钮同时bothub会将用户在你网站上的id与Facebook提供的ref进行绑定，使得在此后的一段时间内，你可以通过API，指定向该用户发送消息。‌

### 使用API发送订单回执‌ <a href="#shi-yong-api-fa-song-ding-dan-hui-zhi-1" id="shi-yong-api-fa-song-ding-dan-hui-zhi-1"></a>

在你得知用户成功下单后，你可以指定向该custom\_user\_id的用户发送消息。发送方法参见[发送消息API](https://docs.bothub.ai/advanced-tool/api/messenger-api)。你可以在API管理中，选择邮箱的API KEY，获取正确的消息格式（JSON与CURL）来进行编辑和测试。

![获取有效API密钥](https://3545383198-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBxiFMKIFEMsz8J7IuU%2F-LfSK5NhvP8jL2M6zJCx%2F-LfSMJyYTBLntlXB0Bm9%2Fimage.png?alt=media\&token=caa4894c-db85-43d3-985a-f348dfe8f48a)
