Tiledesk Developer Hub
WebsiteCommunityTutorialsGet started
  • Introduction
  • Community
  • Ask for Support
  • Public Roadmap and Changelog
  • Tutorials
  • Widget
    • Widget SDK
    • Javascript API: Methods
    • Javascript API: Attributes
    • Javascript API: Listeners/Events
    • Widget Authentication
    • Widget Angular integration
    • Widget React integration
    • Widget for Android with WebView
    • Widget for iOS with WKWebView
    • Widget for Flutter with WebView
    • Widget for React with WebView
    • Widget for Wix Website platform
    • Tutorials
      • Hide widget
      • Show/Hide widget programmatically
      • Force widget loading without user interaction
      • Mobile positioning
      • Custom size (width/height)
      • Installing widget on selected pages
    • Conversation Embedded Apps
      • Payment App Tutorial
      • Prechat form App Tutorial
    • Advanced
      • Preset the Widget on a specific Department
      • Authentication Flow
      • Widget protocol specs
      • Prechat Form JSON specs
      • Prevent multiple conversations
      • Old versions
        • Web SDK v4
  • External Chatbot
    • Introduction
    • Hello World tutorial
    • Chatbot to Human handoff
    • Send Text Buttons
    • Advanced Tutorials
      • Introduction
      • Tutorial 1 - Dialogflow as external chatbot
      • Tutorial 2 - Buttons and images
      • Tutorial 3 - Automatic human handoff with fallback intent
      • Tutorial 4 - Explicit Human handoff with user intent
      • Tutorial 5 - Gracefully handling operating hours during handoff
      • Generate Dialogflow Google Credentials file
    • Rasa tutorials
      • Rasa Tutorial 1 - Rasa as external chatbot
  • Resolution bot
    • Introduction
    • Quickstart
    • Webhook service
    • Rich messages
    • Tutorials
      • Chatbot chooser (multilanguage)
      • Department chooser
      • Order info (webhook)
  • APIs
    • REST APIs
      • Introduction
      • Authentication
      • Requests
      • Leads
      • Messages
      • Activities
      • Projects
      • Team
      • User
      • Analytics
      • Canned responses
      • Tags
      • Events
      • Jwt
      • Labels
      • Images
      • Files
      • Segments
      • Chatbots
      • Knowledge Bases
        • Knowledge Base
        • Contents
        • Question & Answer
      • Management Api
        • Departments
        • Groups
    • NodeJS SDK
    • Webhooks
      • Subscriptions
    • Conversation Messages APIs tips
    • Realtime API
    • JWT Authentication
      • JWT Custom authentication Tutorial
    • Tutorials
      • REST API
        • Sending and receiving messages with Tiledesk APIs
        • PHP Tiledesk REST API example
        • Import multiple messages into Tiledesk using REST APIs from third party app
      • Webhooks
        • Custom Request assignment
        • Request transcript on close
  • Apps
    • Build Custom App - Quick start
    • External Channels integration flow diagram
    • Telegram integration tutorial
  • Dashboard & AgentChat SDK
    • Dashboard SDK
    • Agent Chat SDK
  • Architecture
    • Architecture overview
    • Components list
    • Bot Design diagram
    • Multi Channel Message Flow
  • Installation
    • Installation
    • Running Tiledesk using Docker Compose
    • Running Tiledesk with Kubernetes using Helm
    • Choosing Hardware
  • Configuration
    • Chat21 channel configuration
    • Email parameters and templates configuration
    • Configure the logging system
Powered by GitBook
On this page
  • Embedding Apps
  • Conversation-embedded app anatomy
  • Embed App with microlanguage
  • App height
  • App status
  • App > Tiledesk APIs interaction
  • Send messages to end-users

Was this helpful?

  1. Widget

Conversation Embedded Apps

PreviousInstalling widget on selected pagesNextPayment App Tutorial

Last updated 1 year ago

Was this helpful?

Embedding Apps

Embedded App example

Applications (aka Apps) displayed in the conversation flow are a very useful tool. They allow to achieve two main objectives:

  1. Enhancement of the UI. They enhance the interactive and functional power of a conversation

  2. Data isolation. They totally isolate the data flow from the conversation

Enhancement of the UI is obviuous. You can, for example, play an entire video game in the conversation flow, without ever leaving the conversation in the chat. You can also complete a complex input form, that through a chatbot is difficult to fill. There are many use cases where an app running in the conversation increases the end-user perceived interactive power.

Data isolation is less obvious but probably more important. In Tilesk, the conversational app is an entire web application running on his own web server on the HTTPS protocol. This means that data exchanged with the app is unkonwn by Tiledesk and is exchanged directly between the app and his own backend. This pertains to privacy and security. Imagine for example that a user should pay for a cart. The chatbot can provide to the user a payment-app where the user is asked about his credit card and these data are directly exchanged with the payment backend, never with Tiledesk. No info about the transaction is stored into the conversation. Through an app only the actors interested in the interaction are involved.

Conversation-embedded app anatomy

Embed App with microlanguage

tdFrame:APPLICATION_ENDPOINT

For example:

tdFrame:https://tiledesk-conversational-app.tiledesk.repl.co/chatbot

App height

You can also specify the App height in the conversation, using the followinf format:

tdFrame,hHEIGHT:APPLICATION_ENDPOINT

For example:

tdFrame,h310:https://tiledesk-conversational-app.tiledesk.repl.co/apps/creditcard

With Tiledesk displaying an app to the end-user means to simply send him a message.

App status

It's worth to understand that an app is totally under your control. You are totally responsable of the app data, app features, app Tiledesk and Third party's APIs usage and ...app status!

The "app status" is the status of your app in the conversation workflow. Suppose for example that you embedded an App in the conversation to allow users to pay for a cart using their credit card. Wath you want is an App "active" only when the user has to pay, while the app should be in a sort of "inactive" status when the user stopped or terminated his payment.

To manage the app status there is a simple way. You can use the messageId that comes in the webhook of you application to uniquely identify your application. Consider that in the most frequent use case there is a strict corrispondence between the App and the message where it is displayed into.

The basic principle is that you can use the unique messageId to uniquely identify the app in the conversation flow and use this same messageId as a unique-id in your Database to save data relative to that app instance, including his status.

App > Tiledesk APIs interaction

Your App can always use Tiledesk APIs to communicate with your project, for example to send messages back to your conversation whenever it wants.

Send messages to end-users

As you can see in the picture sending messages from the App back to the conversation can be very useful. You can for example notify in a graceful and useful manner the end of an operation packed with some useful data.

An App is just a message of type frame. See the to see the details.

'frame' type message

In addition to using the widget JSON protocol, you can better use the to render the App in the chatbot's reply without knowing weird JSON specifications.

Set App's height with microlanguage
Use the messageId as App's unique reference on your backend

How? With each webhook payload you receive a token that you can use to talk with the conversation where (as a message) the App is hosted into. Just use this token in Tiledesk APIs to call any (allowed) you want...

...but specially the method. This is a special method that allows the user to send messages to the conversation where the token belongs to.

Send messages to the conversation

It's now time to face a Tutorial example, the .

Widget JSON protocol
microlanguage
REST method
SendSupportMessage()
Credit Card payment App tutorial