Note: Integrate CRM Tracking code to install chat on your website. Click here to know more.

Install chat on your website (logged-out visitors)

It’s easy to install the Chat messenger on your website. It only takes a few minutes and you can start chatting with your website visitors (people who haven’t logged in).


To access the Javascript code, go to Admin Settings > Marketplace and Integrations and click Web Messenger. This opens the page where you can find the code snippet.

 

<!-- Body -->
<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>
<!-- Body -->
Note: 

1. Replace ‘Web Chat Token’ in the above code with your Chat token by going to Admin Settings > Web Messenger.

2. Paste the code snippet on every page of your website where you want Chat to appear.


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


You can install chat 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 webapp, 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 Chat from your side. For example, a user’s email ID can be their external ID.

  • Restore ID - This will be created by Chat when a logged-in user (from your webapp) initiates a conversation on Chat for the first time. Restore ID is also unique to each user. This ID will be passed to your website from Chat on the user creation callback function. You need to store this ID in your database. 

The next time the same user starts a conversation through chat, from a different browser or app, this restore ID, along with the external ID must be passed from your side to chat for the user conversation to be restored. Otherwise, every conversation initiated by the user on a new/fresh browser session will create a new user and the conversation history will be lost.


Note: 

1.Replace ‘Web Chat Token’ in the above code with your chat token by going to Settings > Web                Messenger.

2. Replace user values with your placeholders.

3. Paste the code snippet on every page of your website where you want chat to appear.

Install Chat on multiple websites (more than one website)


If you have multiple websites, you can still use one account across all these sites to engage with your leads and customers. 


All you have to do is to define a unique site ID, while adding the Chat installation code to these sites, to differentiate users and conversations across the websites.


<!-- Body -->
<script>
  function initFreshChat() {
    window.fcWidget.init({
      token: "WEB_CHAT_TOKEN",
      host: "https://wchat.freshchat.com",
    siteId: "UNIQUE_SITE_ID"
    });
  }
  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>
<!-- Body -->