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

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:

Thank you.

Solution 1:^[1]

I'm assuming most of this code is verbatim from freshchat? I don't have access to a freshchat account but the connection is triggered on this line:

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

So what is happening here is basically an if statement (a ternary 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: What is the difference between addEventListener and attachEvent?

So if you want to wait until the user has entered details, you will need to move this to where you are checking for the existence of those details:

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);
    }
  }

You don't really need the try/catch for getting the form info, but you should check that it is valid input (i.e. that an email address is formatted correctly, and that a name is given and not left blank).

You might also want to disable the button after the user has pressed it once, and re-enable it if there is an error, to prevent excessive calls to the API (which you might have to pay for). Another way to prevent this is to provide the user with an animation to show that something is happening while they wait for the chat to initiate, but these are out of the scope of this question.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'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

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]