Freshchat Demo

Deme to open Freshchat on a hyperlink select.

by Paul Leech

HTML

<a id="open_fc_widget" onClick="openWidget()" style="cursor:pointer;">Contact us</a>
<script src="https://snippets.freshchat.com/js/fc-pre-chat-form-v2.js"></script>
<script>
  var preChatTemplate = {
    //Form header color and Submit button color.
    mainbgColor: '#3766ab',
    //Form Header Text and Submit button text color.
    maintxColor: '#fff',
    //Chat Form Title
    heading: 'Chat with us',
    //Chat form Welcome Message
    textBanner: '<strong>Thank you for contacting us</strong><br />Please provide us with some information before we start this chat:',
    //Submit Button Label.
    SubmitLabel: 'Start Chat',
    //Fields List - Maximum is 5
    fields : {
      field1 : {
        //The Below key pair values are mandatory.
        //Supported field types are text, number, phone, email and dropdown
        type: "text",
        //Labels supported by default are Name or First Name, Last Name and Phone. Anyother labels will be added to the conversation meta.
        label: "What is your name? (Nombre)", 
        //Supported Values is yes or no (all in lowercases).
        required: "yes", 
        //Error message to be displayed on invalid content.
        error: "Please enter a valid name" 
      },
      field2 : {
        //Supported field types are text, number, phone, email and dropdown
        type: "email",
        //Labels supported by default are Name or First Name, Last Name and Phone. Anyother labels will be added to the conversation meta.
        label: "Email address (Correo electrónico)",
        //Supported Values is yes or no (all in lowercases).
        required: "no",
        //Error message to be displayed on invalid content.
        error: "Please Enter a valid Email"
      },
      field3 : {
        //Supported field types are text, number, phone, email and dropdown
        type: "text",
        //Labels supported by default are Name or First Name, Last Name and Phone. Anyother labels will be added to the conversation meta.
    ...

CSS

#fc_frame {
  display: none;
}