Objective:
build a prechat form in google apps scripts so this can be used in a google site as a webapp so that it would take a user's name, lastname, phone and email and pass those parameters to the freshchat javascript snippet, so when the chat is initiated, the user's info can be seen in the freshchat tool.
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();
}
Problem:
the problem is that I'm not sure how to get the freshchat function to be initiated only once I have populated the global variables with input data from the form.
if I manually enter data within the window.fcWidget.init({...}) area it works nicely but I'm not sure how to do it programatically upon a button click.
sources consulted:
- 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
Thank you.
