<script>
  function initFreshChat() {
    window.fcWidget.init({
      token: "WEB_CHAT_TOKEN,
      host: "https://wchat.freshchat.com"
    });
  }
  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,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);
</script>

Note: Replace ‘Web Chat Token’ in the above code with your Freshchat token by going to 

Admin > Web Messenger.

Paste the code snippet on every page of your website where you want your Freshchat conversations widget (web messenger) to appear.

Install Freshchat on your web app and restore conversations(logged-in users)

You can install Freshchat on your web app in a few minutes and start communicating with logged-in users on your website.

You can restore user conversations for logged-in users on your web app, every time they initiate a conversation from a different device or browser. To do this, you need to set a unique external ID and restore ID for every user. 

Use the following code snippet to identify logged-in users and restore conversations across browsers and devices.

<!--Body-->
function initFreshChat() {
 window.fcWidget.init({
  token: "WEB_CHAT_TOKEN",
  host: "WEB_CHAT_URL",
  externalId: '1234567',
  restoredId: restoreId? restoreId : null,
   onInit: function() {
     window.fcWidget.on('widget:loaded', function() { 
       window.fcWidget.user.get(function(resp) {
	 var status = resp && resp.status,
	 data = resp && resp.data;
	 if (status !== 200) {
	   window.fcWidget.user.setProperties({
	   firstName: "John", //user's first name
	   lastName: "Doe", //user's last name
	   email: "john.doe@gmail.com", //user's email address
	   phone: "8668323090", //phone number without country code
	   phoneCountryCode: "+1",  // phone's country code
	   plan: "Estate",  // user's meta property 1
	   status: "Active", // user's meta property 2
	  "Last Payment": "12th August" // user's meta property 3
	});
	window.fcWidget.on('user:created', function(resp) {
	  var status = resp && resp.status,
	  data = resp && resp.data;
	  if (status === 200) {
	    if (data.restoreId) {
		// Update restoreId in your database
	       }
              }
            });
           }
        });
     });
   }
 });
}
function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="WEB_CHAT_URL/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);
<!--Body-->

• External ID - This has to be unique to each logged in user. This information should be passed to Freshchat from your side. For example, a user’s email ID can be their external ID.
• Restore ID - This will be created by Freshchat when a logged-in user (from your webapp) initiates a conversation on Freshchat for the first time. Restore ID is also unique to each user. This ID will be passed to your website from Freshchat on the user creation callback function. You need to store this ID in your database. 

Customize the Freshchat web messenger to reflect your brand

Step 1: Add your business logo and name

Go to Admin > Account Settings > Site/App Settings

Here you can upload your business logo, add your business (App) name, and web notifications domain name.

The ‘Preferred Web Notifications Domain Name’ is useful when users choose to enable browser notifications from you.

Step 2: Pick a theme for your messenger

Go to Admin > Web Messenger > Customize Appearance

Here you can add your brand logo, color, messenger header style, background, and size of your Freshchat conversations widget (web messenger).  You can also choose to display the typing indicator by enabling the toggle. 

With the Messenger Visibility option, you can make it stay visible, hidden, or only visible within your working hours (Default Business Hours). You can see a preview of all your configurations on the right.

Note: Messenger Visibility does not affect the first response time, offline experience or any other metric in your Freshchat account. And, at the moment only Default Business Hour is supported with messenger visibility. It is not applicable to Business Hours by Groups.

Invite team members to Freshchat

You can invite team members to Freshchat by going to Admin > Agents and adding them there.