The Freshsales javascript library helps you identify the people on your website as leads (or contacts), tracks their activities in real time, gives you a history of their past activities and the pages they have viewed. 


STEP 1 : Getting started

  1. Copy the snippet from Admin Settings > Integrations > Freshsales for web > Javascript, which is prefilled with your freshsales_portal_url and authentication_token. 
  2. Or, replace freshsales_portal_url and authentication_token  in the below snippet with your Freshsales portal’s URL and Authentication token and copy it.
<script> function createTempFunction(function_name) { (window.freshsales)[function_name]=function() { (window.freshsales).push([function_name].concat(Array.prototype.slice.call(arguments,0))) }; } (function(url, app_token) { window.assets_url='//d952cmcgwqsjf.cloudfront.net'; window.freshsales = window.freshsales || []; functions_list='init identify trackPageView trackEvent set'.split(' '); for(var i=0; i < functions_list.length; i++) { var function_name = functions_list[i]; createTempFunction(function_name); } var script_tag = document.createElement('script'); script_tag.async=1; script_tag.src= window.assets_url +'/assets/analytics.js'; var first_script_tag = document.getElementsByTagName('script')[0]; first_script_tag.parentNode.insertBefore(script_tag,first_script_tag); freshsales.init(url, app_token); })('freshsales_portal_url','authentication_token'); </script>

 

       3. Paste the library on the HTML header of your website.



STEP 2:  Create leads 

Freshsales creates leads when website visitors submit their email address in a web form (signup, webinar registration form) on your website. In the snippet below, 

  1. Replace the element ID’s  with the actual field ID’s of your web form.
  2. After the web form’s submission and validation, call  identify method.

  

var identifier = $("#email").val(),
      lead_properties = {
 "First name" : $("#first_name").val(), 
   "Last name" : $("#last_name").val(),
 "Date Of Birth" : $("#dob").val(), //Date of Birth is created as Lead custom field
   "company" : {
         "Name" : $("#company_name").val(),
     "Website" : $("#compan_website").val()
    }
};
freshsales.identify(identifier, lead_properties); 

  

      3. If your web form has fields that aren’t in Freshsales, you can create custom fields for the same and get the values pushed to Freshsales. 


 "Date Of Birth" is created as a custom field of the type date picker.   



STEP 3:  Create contacts

To capture website visitors as contacts using fs_contact,

  1. Replace the element ID’s  with the actual field ID’s of your web form.
  2. After the web form’s submission and validation, call identify method

  

var identifier = $("#email").val(),
      contact_properties = {
        "fs_contact" : true,
 "First name" : $("#first_name").val(),
   "Last name" : $("#last_name").val(),
 "Date Of Birth" : $("#dob").val(),
   "company" : {
         "Name" : $("#company_name").val(),
     "Website" : $("#compan_website").val()
    }
      };
freshsales.identify(identifier, contact_properties);

 


Note: 

  1. To capture website visitors as both leads and contacts separately, identify the forms you want to generate contacts, and include the fs_contact property in that snippet.
  2. The library also tracks their activities before and after signing up, and displays it in their details page in Freshsales.




STEP 4:  Track Pageviews 

The Freshsales library pasted on your HTML header gets embedded in all the web pages and tracks them as soon as the library is initialized. 


However, if yours is a single page application, you’d need to call   

 freshsales.trackPageView(“<URL of the Page>”);

in the individual pages on your website to track pageviews. 



STEP 5: Track Events

Track visitor activities on your website - like downloading a whitepaper, clicking on the social profiles’ follow buttons - as events in Freshsales. 


To track events, 

  1. Identify the specific call to action buttons that you’d like to be notified about. 
  2. Call the trackEvent method from the snippet below.


var sample_event_properties = {
  'title': 'How to win more sales' // Replace with title of the whitepaper
};
freshsales.trackEvent('Downloaded White paper',  sample_event_properties);

 


STEP 6:  Update lead and contact information

The library also updates lead and contact information through web forms and visitor activity on the website and webapp. 

To update lead/contact information, 

  1. Call the set  method from the snippet below.

 

var sample_properties = {
  'Address': '8691 MacGyver Mews', // Replace with address of user
  'City': 'New Jermaine', // Replace with city of user
  'Mobile': '13457879', // Replace with mobile number of user
  'Custom Field': 'custom field value' // Replace with a custom field
};
freshsales.set(sample_properties);

 

  • Every time a form is submitted or an action performed, the email address of that user is searched for matches in Freshsales.
  • The search begins with the list of leads and if a match isn’t found, the list of contacts is searched.
  • However, if a match is found in the list of leads, the data is associated with that lead’s record.
  • If a match is found in the contacts, all details submitted in the web form are filled in that contact’s record.
  • In the event of multiple matches, the data is associated with the record with the most recent activity.