Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • πŸ“–  Manual

  • πŸ‘‹Welcome

    Welcome to Tadabase

    What Is No-Code?

    Tadabase Support

    Getting Started With Tadabase

    Platform Overview

    🧰The Data Builder

    Data Tables

    Fields

    Text Fields

    Personal Fields

    Number Fields

    Date Fields

    Option Fields

    File and Image Fields

    Equation Fields (Category)

    Equation Fields

    Connection Fields

    Date Equation Examples

    Records

    Record Logs

    Import Templates

    Export Templates

    Automating Tasks

    Number Equation Examples

    Text Equation Examples

    Multi-Function Equation Examples

    ✏️Page Builder

    Page Builder Overview

    Layouts

    Pages

    Components Overview

    PDF Pages

    πŸ“—System Components

    System Components Overview

    Menu

    User Menu

    Breadcrumbs

    PDF Print (Alpha)

    Link Button

    Login

    Signup

    Profile

    HTML

    Image

    Subscriptions (Alpha)

    πŸ“˜Data Components

    Data Components Overview

    Form Component

    Table Component

    List Component

    Kanban Component

    Calendar Component

    Resource Component

    Map Component

    Timeline Component

    Accordion Component

    Card Component

    Chart Component

    Search Component

    Import Component

    Data Source

    Data Source Filtering

    Links

    Display Rules

    Inline Editing

    Data Component Visual Directory

    Custom Component

    Custom Component Helpers

    Writing Your Own Component Helpers

    πŸ™‹Users

    Users

    Roles

    Single Sign On (SSO)

    Adding Stripe Subscriptions

    πŸ”’Security and Reliability

    Tadabase Builder Security

    App Security

    User Security

    πŸ”—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

    βš™App Settings

    General Settings

    Layout & Format Settings

    Custom Domain

    Customizing CSS

    Changing app themes

    Support Settings

    404 Error Page

    πŸ’³Account

    Plans

    Managing Your Account

    Sharing your app builder

    Managing your Apps

    🧩Pipes

    Introduction to Pipes

    Adding Pipes

    Using Pipes

    PDF Gen V2

Categories
πŸ“– Manual
πŸ”— 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
    Developer portal Tadabase Community
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational