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
- Copy the snippet from Admin Settings > Integrations > Freshsales for web > Javascript, which is prefilled with your freshsales_portal_url and authentication_token.
- 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,
- Replace the element ID’s with the actual field ID’s of your web form.
- 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,
- Replace the element ID’s with the actual field ID’s of your web form.
- 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:
|
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,
-
Identify the specific call to action buttons that you’d like to be notified about.
-
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,
-
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.