如何设置微信小程序

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

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
}