Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • Pipes & Integrations

  • Introduction to Pipes

  • Adding Pipes

  • Using Pipes

  • Tadabase Functions

    Text Pipes

    Time Conversion

    Mask and Disguise

    Advanced Date Pipes

    Unit Conversion

    Mortgage Calculator Pipe

    Barcode Generator

    QR Code Generator

    Number Utility Pipe

    Search and Replace

    Tadabase Domain Utilities

    Base64 File Converter

    Tadabase Rest API Pipes

    Vertical Lookup Pipe

    Duplicate Parent and Children

    Connection Field Plucker Pipe

    Record Looper Pipe (Legacy)

    Generate CSV Pipe

    3rd Party Pipes

    Shopify

    Pipedrive Pipe

    Plaid Pipe

    Vehicle VIN Decoder

    OpenAI Pipe

    Freshdesk Pipe

    Toggl Track Pipe

    FedEx Pipe

    MySQL Pipe

    Letter Stream Pipe

    Microsoft OneDrive Pipe

    Klaviyo Pipe

    TaxJar Pipe

    QuickBooks Pipe

    Google Sheets Pipe

    Perspective API Pipe

    Advanced Integrations

    Zapier Integration

    Using Webhooks

    Saving files to Dropbox

    Adding PayPal payment buttons to your app

    Exporting records to Google Sheets

    Viewing data in Microsoft BI

    Chat Widgets

    REST API

    Using SendGrid for emails

    Saving files to AWS S3 Bucket (IAM Method)

    Incoming Webhooks

    Embeddable Components

    Saving Files to Custom S3 Bucket (Account Method, Recommended)

    PDF Forms

    Stripe Checkout

    JavaScript Callbacks and Actions

    Twilio Integration

Categories
Pipes & Integrations
Advanced Integrations
Chat Widgets

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. 

How did we do ?

Previous Article
Viewing data in Microsoft BI
Next Article
REST API
Article Navigation
  • Install Widget
  • Identify Users
  • Additional User Properties
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational