Help Topics
WeChat Mini-Program Setup
You can connect multiple WeChat Mini-Programs (MP) to Grata for live chat support. In most cases, you will need the assistance of the developer of your Mini-Program to get setup. Here are the basic steps to get setup:
- Authorize Grata’s WeChat Plug-in,
- Add a chat button to your MP, and
- Setup data sharing between your MP and Grata.
Connect your MP to Grata
Follow the same steps you would when connecting a WeChat Official Account to Grata, by having the owner of your MP scan the “Add Mini-Program” code from the Grata backend and authorize the Grata plug-in.
After you have added the MP to Grata, you can customize how the account will appear in the console by editing the account nickname and icon color.
If you ever need to disable the account, do so from the WeChat backend. Click to expand the Settings and Development “设置与开发” menu at the bottom of left side bar, then select Account Info “公众号设置”. On the page, click on the third tab for Authorization Management “授权管理”. Find Grata in the list and then click View platform details “查看平台详情”. You should see a red button on the next page to Cancel authorization “取消授权“. On the confirmation screen, click the green button to confirm the operation, or the other button to go back.
Add a chat button to your MP
Your MP developer can help you add a contact button on any pages where you would like your customer to be able to launch a chat. The look and feel of the button is entirely up to you.
If you’re not familiar with how customer service chat works in a WeChat Mini-Program, it’s As Mini-Program chat works a bit differently than other channels, we encourage you to think carefully through your desired User Experience before your start development. Some MPs choose to first show
Wherever you want to display a contact button in your MP, implement this chat launcher button, which prompts the user to share a screenshot of their current MP page:
<button id="grataStartChatButton" open-type='contact' show-message-card='true' bindtap='sendContact'>Start Chat</button>
<button id="grataStartChatButton" open-type='contact' bindtap='sendContact'>Start Chat</button>
Data sharing to Grata
Unlike WeChat Official Accounts, Mini-Programs only allow the developer to pull a user’s basic profile information once. For that reason, if you want your agents to be able to see customer names and avatars in the Grata profile, you’ll need your MP developer to pass this data to Grata.
Once you’ve interfaced to Grata, you can choose to send additional information beyond the user’s WeChat profile data, for example: user contact information, the current MP page the user is on, items in their shopping cart, or any other context that would be helpful for your agents to give better service.
You can add the following event handler to your MP to send the data to Grata:
sendContact: function (e) {
wx.getUserInfo({
success: function (user) {
var openIdStr = base64_encode("OPENID"); // Insert user's OPEN ID here
// Call backend API
wx.request({
url: 'https://api.guestops.com/connect-api/weChatCallback/getMPUserInfo.action',
data: {
appId: wx.getAccountInfoSync().miniProgram.appId,
openId: openIdStr
unionId: unionIdStr //optional
userInfo: user.userInfo, //optional
phone: phoneStr //optional
type: //optional, see list of type values below
note: //optional, any text string to share info with CS agents
}
})
}
})
}
function base64_encode(str) {
var c1, c2, c3;
var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var i = 0, len = str.length, string = '';
while (i < len) {
c1 = str.charCodeAt(i++) & 0xff;
if (i == len) {
string += base64EncodeChars.charAt(c1 >> 2);
string += base64EncodeChars.charAt((c1 & 0x3) << 4);
string += "==";
break;
}
c2 = str.charCodeAt(i++);
if (i == len) {
string += base64EncodeChars.charAt(c1 >> 2);
string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
string += base64EncodeChars.charAt((c2 & 0xF) << 2);
string += "=";
break;
}
c3 = str.charCodeAt(i++);
string += base64EncodeChars.charAt(c1 >> 2);
string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
string += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
string += base64EncodeChars.charAt(c3 & 0x3F)
}
return string
}
Value | Icon | Type Name (En) | Type Name (Cn) |
call |
Callback | 要求回拨 | |
campaign |
Campaign page | 活动页面 | |
cart |
Cart page | 购物车 | |
chat |
Transfer | 转发 | |
checkout |
Checkout page | 结账页面 | |
contact |
Contact Us page | 联系我们页面 | |
friendPay |
Pay-for-friend | 替朋友支付 | |
invoice |
Invoice | 发票相关 | |
order |
Invoice | 发票相关 | |
pdp |
PDP | PDP | |
plp |
PLP | PLP | |
profile |
Profile page | 个人信息页面 | |
remind |
Reminder | 提醒 | |
return |
Product Return | 退货 | |
scan |
QR Code Scan | 二维码扫描 |