如何设置微信小程序

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:

  1. Authorize Grata’s WeChat Plug-in,
  2. Add a chat button to your MP, and
  3. 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 on settings “设置” at the bottom of left side bar, click on the second tab for third-party settings “第三方设置” and then on the text to cancel authorization “停止授权“ for Grata. On the confirmation screen, click the green button to confirm the operation, or the grey 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

请用以下代码实现联系按钮。用户点击此按钮会跳到微信服务回话页面以及建议用户分享当前小程序页面的截图。

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

您还需要将以下事件处理器添加到小程序中:

sendContact: function (e) {
  wx.getUserInfo({
    success: function (user) {
      var openIdStr = base64_encode("OPENID"); // 此处填写用户的 Open ID
      // 调用后端 API
  wx.request({
    url: 'https://api.guestops.com/connect-api/weChatCallback/getMPUserInfo.action',
    data: {
      appId: wx.getAccountInfoSync().miniProgram.appId,
      openId: openIdStr
      unionId: unionIdStr //可选
      userInfo: user.userInfo, //可选
      phone: phoneStr //可选
      type: //可选, see list of type values below
      note: //可选, any text string to share info with CS agents
        }
      })
    }
  })
}
在上面的事件处理器中对用户的微信Open ID, Union ID, 或Phone进行编码时,使用以下代码:
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
}
When you send data to Grata, you can choose to include any of the types below to help your agents quickly recognize the context. Each type has an associated color and icon. You could consider setting the type based on the page the customer is on when they launch the chat, for example, if they are on the checkout page, or a product detail page.
 

参数值 图标 类型名称 (英文) 类型名称 (中文)
call Callback 要求回拨
campaign Campaign page 活动页面
cart Cart page 购物车
checkout Checkout page 结账页面
contact Contact Us page 联系我们页面
invoice Invoice 发票相关
order Invoice 发票相关
friendPay Pay-for-friend 替朋友支付
pdp PDP PDP
plp PLP PLP
return Product Return 退货
profile Profile page 个人信息页面
scan QR Code Scan 二维码扫描
remind Reminder 提醒
chat Transfer 转发