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.
I just followed the instructions of the first link and customized the labels. It it works within a Google Sites embed
<>box.One thing that you might be missing is that this kind of widgets have several security layers, so it might be possible that using custom HTML forms is not supported (the referred resources doesn't include instructions to use them).
Code.gs
index.html