如何在第三方 javascript 代码 (freshchat) 加载新 google 网站的 google 应用内置的聊天前表单之前将参数传递给它

Question

Objective:

在 google 应用程序脚本中构建一个聊天前表单，这样它就可以在 google 网站中用作网络应用程序，这样它就可以获取用户的姓名、姓氏、phone 和电子邮件并将这些参数传递给 freshchat javascript 片段，因此当聊天开始时，可以在 freshchat 工具中看到用户的信息。

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>Chat form</title>
  </head>
  <body>
    <h1>Chatea Con Nosotros</h1>
    <form>
      <input type="text" id="fname" placeholder="Nombre">
      <input type="text" id="lname" placeholder="Apellido">
      <input type="text" id="email" placeholder="Email">
      <input type="text" id="phone" placeholder="Teléfono">
      <input type="button" value="Iniciar Chat" id="btnStartChat"/> 
    </form>
    <?!= include("index_js"); ?> 
  </body>
</html>

index_js

<script>
  //global variables
  var ffname = '';
  var flname= '';
  var femail = '';
  var fphone = '';

  //freshchat code starts ------------------------
  function initFreshChat() {
    window.fcWidget.init({
      token: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx",
      host: "https://wchat.freshchat.com",
      open: true,
      externalId: "john.doe1987",     // user’s id unique to your system
      firstName: ffname,              // user’s first name
      lastName: flname,                // user’s last name
      email: femail,    // user’s email address
      phone: fphone,            // phone number without country code
      phoneCountryCode: "+1"          // phone’s country code
    });
  }
  function initialize(i,t){
    var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e. async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))
  }function initiateCall(){
    initialize(document,"Freshdesk Messaging-js-sdk")
  }
//freshchat code ends ---------------------  

  document.getElementById("btnStartChat").addEventListener("click", getFormValues);
  
  function getFormValues(){
    try{
      ffname = document.getElementById("fname").value;
      flname = document.getElementById("lname").value;
      femail = document.getElementById("email").value;
      fphone = document.getElementById("phone").value;
      window.addEventListener("load", initiateCall());
    }
    catch(e){
      console.log('error here: ' + e.message);
    }
  }

</script>

code.gs

function doGet(){
  var page = HtmlService.createTemplateFromFile('index');
  return page.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).setHeight(400).setWidth(100);
  //return page.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

//funtion to append other files to htmlservice file
function include(filename){
  //return the content of an html file
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

问题：

问题是我不确定如何让 freshchat 功能在我用表单中的输入数据填充全局变量后才启动。如果我在 window.fcWidget.init({...}) 区域内手动输入数据，它会很好地工作，但我不确定如何在单击按钮时以编程方式进行输入。

咨询的消息来源：

谢谢。

Answer 1

我假设大部分代码都是从 freshchat 逐字记录的？我无权访问 freshchat 帐户，但在这条线上触发了连接：

window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);

所以这里发生的基本上是一个 if 语句（一个三元 if https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) so if a listener can be added to the window, then add the event listener, and if not, attach the event to the window (this is probably a way to accommodate different types and version of browsers, and may not be needed for more modern browsers). More info in this:

因此，如果您想等到用户输入详细信息，则需要将其移至检查这些详细信息是否存在的位置：

function getFormValues(){
    try{
      ffname = document.getElementById("fname").value;
      flname = document.getElementById("lname").value;
      femail = document.getElementById("email").value;
      fphone = document.getElementById("phone").value;
      window.addEventListener("load", initiateCall());
    }
    catch(e){
      console.log('error here: ' + e.message);
    }
  }

您并不真的需要 try/catch 来获取表单信息，但您应该检查它是否是有效输入（即电子邮件地址的格式是否正确，是否提供了名称留空）。

您可能还想在用户按下该按钮一次后禁用该按钮，并在出现错误时 re-enable 禁用该按钮，以防止过度调用 API（您可能付钱）。防止这种情况的另一种方法是为用户提供动画，以显示在他们等待聊天开始时发生的事情，但这超出了这个问题的范围。

Answer 2

我只是按照 first link 的说明自定义了标签。它在 Google 站点嵌入 <> 框中工作。

您可能遗漏的一件事是，这种小部件有多个安全层，因此可能不支持使用自定义 HTML 表单（参考资源不包括说明使用它们）。

Code.gs

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index');
}

index.html

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>
<script src="https://snippets.freshchat.com/js/fc-pre-chat-form-v2.min.js"></script>
<script>
  var preChatTemplate = {
    //Form header color and Submit button color.
    mainbgColor: '#0aa4db',
    //Form Header Text and Submit button text color.
    maintxColor: '#fff',
    //Chat Form Title
    heading: 'GadgetGod',
    //Chat form Welcome Message
    textBanner: 'We can\'t wait to talk to you. But first, please take a couple of moments to tell us a bit about yourself.',
    //Submit Button Label.
    SubmitLabel: 'Start Chat',
    //Fields List - Maximum is 5
    //All the values are mandatory and the script will not work if not available.
    fields : {
      field1 : {
        //Type can be either text or title
        type: "title",
        //Label for Field Title, can be in any language
        label: "Nombre",
        //Field ID for Title
        fieldId: "title",
        //Required "yes" or "no"
        required: "yes",
        //Error text to be displayed
        error: "Please Enter a valid Title"
      },
      field2 : {
        //Type for Name - Do not Change
        type: "name",
        //Label for Field Name, can be in any language
        label: "Apellido",
        //Default - Field ID for Name - Do Not Change
        fieldId: "name",
        //Required "yes" or "no"
        required: "yes",
        //Error text to be displayed
        error: "Please Enter a valid name"
      },
      field3 : {
        //Type for Email - Do Not Change
        type: "email",
        //Label for Field Email, can be in any language
        label: "Email",
        //Default - Field ID for Email - Do Not Change
        fieldId: "email",
        //Required "yes" or "no"
        required: "yes",
        //Error text to be displayed
        error: "Please Enter a valid Email"
      },
      field4 : {
        //Type for Phone - Do Not Change
        type: "phone",
        //Label for Field Phone, can be in any language
        label: "Teléfono",
        //Default - Field ID for Phone - Do Not Change
        fieldId: "phone",
        //Required "yes" or "no"
        required: "yes",
        //Error text to be displayed
        error: "Please Enter a valid Phone Number"
      },
      field5 : {
        //Type for Dropdown
        type: "dropdown",
        //Label for Field Dropdown, can be in any language
        label: "Plan",
        //Field ID for Plan Dropdown
        fieldId: "plan",
        //Required "yes" or "no"
        required: "yes",
        //Error text to be displayed
        error: "Please select an option",
        //Options for the Dropdown field
        options: ['Sprout','Blossom','Garden','Estate','Forest']
      }
    }
  };
  window.fcSettings = {
    token: "WEB_CHAT_TOKEN",
    host: "https://wchat.freshchat.com",
    config: {
      cssNames: {
        //The below element is mandatory. Please add any custom class or leave the default.
        widget: 'custom_fc_frame',
        //The below element is mandatory. Please add any custom class or leave the default.
        expanded: 'custom_fc_expanded'
      }
    },
    onInit: function() {
      console.log('widget init');
      fcPreChatform.fcWidgetInit(preChatTemplate);
    }
  };
</script>
<script src="https://wchat.freshchat.com/js/widget.js" async></script>
<body>
  
</body>

</html>

如何在第三方 javascript 代码 (freshchat) 加载新 google 网站的 google 应用内置的聊天前表单之前将参数传递给它

how to pass parameters to third party javascript code (freshchat) before it loads with a pre-chat form built in google apps for a new google site

javascript

google-apps-script

web-applications

freshdesk

google-sites-2016