Info
Content

Chat Widgets

In this article we will guide you through how to embed a chat widget in your application for you to chat with your users.

image-(9).png

In the example below we'll look at how to add Freshchat, which is what we use here at Tadabase, but these same instructions can likely apply to any other chat platform such as Intercom, Drift, etc. 

Install Widget

After signing up for a Freshchat or other chat platform account you will be asked to install a script onto your page.

Copy the code snippet supplied: 

And paste the code snippet into the Custom Header Code section of your app within the Settings tab of the left-hand Builder Navigation Bar.

You will now have a chat widget enabled in your app for you and your users to chat.

 

Identify Users

When chatting with a user, you will not automatically know who you are chatting with, rather you first have to identify the logged-in user and pass that information into the chat.

If you have ever chatted with the Tadabase team, you've likely noticed that we address you by name and are already aware of your email address, since this is the information about each logged-in user that is passed into the chat. You can accomplish the same chat identification method when chatting with your users with the following instructions.

Each chat platform company has their own approach for identifying user details, however for the purpose of this example we will look at Freshchat's approach.

The following instructions are provided by Freshchat to identify the logged-in user: 

// Copy the below lines under window.fcWidget.init inside initFreshChat function in the above snippet

// To set unique user id in your system when it is available
window.fcWidget.setExternalId("john.doe1987");

// To set user name
window.fcWidget.user.setFirstName("John");

// To set user email
window.fcWidget.user.setEmail("john.doe@gmail.com");

// To set user properties
window.fcWidget.user.setProperties({
  plan: "Estate",                 // meta property 1
  status: "Active"                // meta property 2
});

If you want to identify the name and email address of the logged-in user you are chatting with, copy the following code: 

// To set user name
window.fcWidget.user.setFirstName("{loggedInUser.Name}");

// To set user email
window.fcWidget.user.setEmail("{loggedInUser.Email}");

 And paste it inside the Javascript tab of your layout:

You will now know the name and email address of the user you are chatting with as long as the user is logged in to your app. 

 

Additional User Properties

You can technically pass along any field from the logged-in user as a property to identify more details about the user. 

// To set user properties
window.fcWidget.user.setProperties({
  Role: "{loggedInUser.Role}",   				// meta property 1
  status: "{loggedInUser.Status}"               // meta property 2
});

These scripts are often very opinionated and can stop working if you do not format all code precisely. 

A few tips to keep in mind when formatting user properties: 

  1. Make sure each property is separated by a comma except for the last one. 
  2. The ability to add logged-in user variables is only available on the Page and Layout level, not inside the app Settings tab where you added the initial script. 
  3. You can test the output using console.log("{loggedInUser.Email}") in the JavaScript tab of your layout or page, which will output the value inside your browser's console. (Shortcut on Google chrome is: Ctrl + Shift + J)
  4. Our support team is unable to support every integration beyond ensuring that your user variables get passed correctly in the Javascript of your app's page or layout. If you are having an issue with a specific chat integration, let us know and we'll try to help, however please keep in mind that there are hundreds of chat platforms and we can not provide custom solutions for each one. 
Back to top