如何设置微信小程序到Grata

您可以添加多个 微信小程序 (MP) 到 Grata 行实时聊天支持。在大多数情况下，您将需要您的迷你程序的开发人员的协助得到安装。以下是安装的基本步骤：

1. 授权 Grata 的微信插件，
2. 在你的 MP 上添加一个聊天按钮，然后
3. 设置 MP 和 Grata 之间的数据共享。

链接您的MP 到 Grata

按照 链接微信公众号到Grata 的步骤让你的 MP 的所有者扫描 Grata 后台的“添加小程序”二维码并授权 Grata 插件。

在将MP添加到Grata之后，可以通过编辑帐户昵称和图标颜色来自定义帐户在控制台中的显示方式。

如果您需要禁用帐户，请从微信后端进行操作。单击左侧栏底部的“设置”，单击“第三方设置”，然后单击文本以取消Grata的授权“停止授权”。在确认屏幕上，单击绿色按钮以确认操作，或单击灰色按钮以返回。

在您的 MP 中添加一个聊天按钮

您的 MP 开发人员可以帮助您在任何希望客户能够启动聊天的页面上添加聊天按钮。按钮的外观和感觉完全取决于您。
如果您不熟悉微信小程序中的客服聊天，因为小程序聊天与其他渠道的运营方式有点不同，我们鼓励您在开始开发之前仔细考虑您想要的用户体验。有的小程序选择首秀

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

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

数据分享到Grata

与微信公众号不同， 微信小程序只允许开发者提取一次用户的基本资料信息。出于这个原因，如果您希望您的代理能够在 Grata 配置文件中看到客户名称和头像，您需要您的 MP 开发人员将这些数据传递给 Grata 。

一旦你与 Grata 对接，你可以选择发送用户微信资料以外的其他信息，例如：用户联系方式，用户当前所在的 MP 页面，购物车中的商品，或任何其他有助于代理商提供更好服务的内容。

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

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
}

当您向 Grata 发送数据时，您可以选择包含下面的任何类型，以帮助您的代理快速识别上下文。每种类型都有相关联的颜色和图标。您可以考虑根据客户在启动聊天时所在的页面设置类型，例如，如果客户在结帐页面或产品详细信息页面。