如何在第三方 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
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({...})
区域内手动输入数据,它会很好地工作,但我不确定如何在单击按钮时以编程方式进行输入。
咨询的消息来源:
- https://support.freshchat.com/support/solutions/articles/233349-setting-up-a-pre-chat-form-on-freshdesk-messaging
- https://developers.freshchat.com/web-sdk/#customisation-wgt
谢谢。
我假设大部分代码都是从 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(您可能付钱)。防止这种情况的另一种方法是为用户提供动画,以显示在他们等待聊天开始时发生的事情,但这超出了这个问题的范围。
我只是按照 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>
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({...})
区域内手动输入数据,它会很好地工作,但我不确定如何在单击按钮时以编程方式进行输入。
咨询的消息来源:
- https://support.freshchat.com/support/solutions/articles/233349-setting-up-a-pre-chat-form-on-freshdesk-messaging
- https://developers.freshchat.com/web-sdk/#customisation-wgt
谢谢。
我假设大部分代码都是从 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(您可能付钱)。防止这种情况的另一种方法是为用户提供动画,以显示在他们等待聊天开始时发生的事情,但这超出了这个问题的范围。
我只是按照 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>