场景应用:推送订单回执

1
Last updated 8 months ago

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

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

要发送订单回执,你需要完成两步配置:

  • 在网页上放置 Checkbox 插件 / Send to Messenger 插件,引导用户勾选 / 点击。以此获取用户的 ID。

  • 在程序中配置订单数据。以发送正确的订单信息。

顾客收到订单回执

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

  1. 在结账完成页,添加 “发送消息插件”。顾客点击按钮的同时,发送订单回执。

  2. 在商品详情页,添加 “复选框插件”。如果你同时在做 购物车召回,那么你也可以将此作为入口。

  3. 在付款页,添加 “复选框插件”。引导用户订阅 “订单回执、物流更新提醒”。

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

在结账完成页添加 “发送消息插件”

优势:在付款完成后一键获取回执,对用户来说是很自然的操作。用户收到回执后即成为Facebook页面粉丝,便于后续发送物流更新等。

效果图

结账页 发送消息按钮

准备入口

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

创建发送消息插件

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

填写你的网站域名

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

部署代码

  1. 拷贝插件页面的初始化代码(如下图):

拷贝红框所示代码

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

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

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

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

其中,facebook_page_idlanguageentrance三项将会随着Bot的不同而不同,最后显示的效果以实际代码为准。

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

{
"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> 标签内最底部。

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

拷贝红框所示代码

6. 完成。用户点击 “send to messenger” 按钮,将会收到订单回执信息。

在商品详情页添加 “复选框插件”

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

效果图

详情页 复选框插件

准备入口

  • 如果你已经完成 场景应用:购物车召回配置 ,那么现在你的网站上已经有了对应入口,可直接进行代码部署。

  • 如果你还没有进行 场景应用:购物车召回配置,我们建议你先进行配置,以更好引导顾客完成点击。此外,通过 Messenger 召回弃单,带来额外销售额。配置完成后,可继续进行下面的代码部署。

部署代码

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

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

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

2. 拷贝插件页面的初始化代码(如下图):

拷贝红框所示代码

3. 在拷贝的代码中再添加一项:

ecommerce: {
messenger_checkbox: {
receipt: 订单回执数据
}
}

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

<script>
window.BOTHUB = {
"facebook_page_id": "1667702766649208",
"language": "zh_CN",
"entrance": {
"fb_messenger_checkbox_ref": "{\"gateway\":\"engagement\",\"code\":\"4b\",\"psid\":\"0\"}"
},
ecommerce: {
messenger_checkbox: {
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>

其中,facebook_page_idlanguageentrance三项将会随着Bot的不同而不同,最后显示的效果以实际代码为准。

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

{
"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/"
}
]
}

5. 将上述配置代码放置到</body>标签内最底部。

6. 拷贝HTML代码,添加至页面<body>标签里合适位置:

拷贝红框所示代码

7. 用户点击“加入购物车”按钮后调用如下代码:

BOTHUB.Marketing.logEvent('fb_mobile_add_to_cart')

在付款页添加 “复选框插件”

优势:在付款确认页,请顾客订阅 订单回执/物流提醒 是自然而合理的步骤,顾客在这步有较高的积极性来主动勾选。即使你已经在商品页添加了 复选框插件,也不妨碍你在此处添加,因为它很可能为你带来更多勾选顾客。

效果图

付款页 订阅订单更新消息

准备入口

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

创建复选框插件

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

填写你的网站域名

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

部署代码 - 订单确认页

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

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

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

2. 拷贝插件页面的初始化代码(如下图):

拷贝红框所示代码

3. 在拷贝的代码中再添加一项:

ecommerce: {
messenger_checkbox: {
receipt: 订单回执数据
}
}

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

<script>
window.BOTHUB = {
"facebook_page_id": "1667702766649208",
"language": "zh_CN",
"entrance": {
"fb_messenger_checkbox_ref": "{\"gateway\":\"engagement\",\"code\":\"4b\",\"psid\":\"0\"}"
},
ecommerce: {
messenger_checkbox: {
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>

其中,facebook_page_idlanguageentrance三项将会随着Bot的不同而不同,最后显示的效果以实际代码为准。

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

{
"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/"
}
]
}

5. 将上述配置代码放置到</body> 标签内最底部。

6. 拷贝HTML代码,添加至页面<body>标签里合适位置:

拷贝红框所示代码

部署代码 - 订单支付成功页

在这个页面我们需要将订单回执信息发送给用户。用户点击“完成订单”按钮调用如下代码:

BOTHUB.Marketing.logEvent('complete_order')

若用户已勾选checkbox插件,点击按钮后即可收到订单回执信息。