Prechat form App Tutorial
Introduction
Prechat form in conversation
The widget's native prechat form (https://developer.tiledesk.com/widget/advanced/prechat-form-json) is very useful to ask some data before starting a conversation. But sometimes you want to let the end-user play around with your chatbot freely, avoiding asking unuseful sensitive data. Ask data only when necessary, i.e. just before talking with a human agent.
This tutorial builds a chatbot placed in front of a department. When the user asks for an agent, a form appears in the conversation flow asking personal info (email, fullname, telephone). As soon as the user fills out the form the chatbot hands off the conversation to a human agent who can read the user data from the conversation panel.
With this approach you can create your own form without the limitations of the widget's native form. Your form will be a complete web app shown as an iframe inside the widget. You can implement any interaction and from your app you can talk to Tiledesk using APIs or send messages back into the same conversation where the app is hosted.
This tutorial covers three basic features:
Let's start.
Create and render an app
Create a new Project
To use Tiledesk APIs or integrate your chatbots you must sign up on Tiledesk (https://tiledesk.com/). Then go to the console: https://panel.tiledesk.com/v3/dashboard
After signup follow the wizard to create your first Tiledesk project.
For this tutorial we chose "Widget Prechat App" as Project name:
Create your project. After creation you will be redirected to the project home (you can skip the last widget installation step for this tutorial).
Create a simple chatbot
First, create a simple chatbot and place it in front of a Department so it will absorb initial support requests. When the user asks for an agent, the chatbot will open a conversation-embedded Application asking the user to fill data (name, email). As soon as the form is completed the conversation will be switched to a human agent.
The Prechat form application will interact with the Tiledesk request-context through APIs, filling the context with the information obtained.
Select the chatbot icon on the left menu, then press the "ADD BOT" button:
Choose "Resolution bot" as chatbot type:
Set a name (e.g., "Helpbot") and press "CREATE BOT":
When asked, choose "Activate bot" so the chatbot is immediately available:
In the Helpbot intents list, select the "start" intent:
Modify the start intent, adding a Quick reply button using the chatbot microlanguage (an asterisk followed by a space and the quick reply text), for example:
Save the answer and go back to the intents list. Add a new answer (+ New answer button) and configure it:
Intent: "agent_handoff"
Questions: "I want an agent"
Answer: "Prechat form (placeholder)..."
Enable the webhook switch on the bottom "Enable webhook call for this intent". This forwards the reply to the programmatic backend logic covered next.
Create the backend on Replit
To run the app logic you need a web application endpoint. This tutorial uses Repl.it to quickly create a Node.js web app endpoint.
Develop your application logic — Let's fork!
Fork the tutorial application at:
https://replit.com/@tiledesk/tiledesk-prechatform-widget-app#index.js
Once forked press the Run button. Your application will start and show logs.
Connect your application to the chatbot: In the Tiledesk Console, go to Helpbot, enable Fulfillment (https://developer.tiledesk.com/resolution-bot/home#fulfillment) and set the /bot API endpoint URL by joining your Replit app endpoint with the /bot method.
Example Replit app endpoint screenshot:
In this tutorial the URL used is:
https://tiledesk-prechatform-widget-app.tiledesk.repl.co/bot
Press the UPDATE BOT button. Now you're ready to test the prechat form App with your chatbot.
Let's run
To run the example, choose "Simulate visitor" on the top of your project console. The widget test page will open. These are the main steps involved in the interaction:
You can try a live tutorial here: https://tiledesk-html-site.tiledesk.repl.co/conversation-embedded-prechat-form-app.html
You can get the source code directly from the Replit app.
If you have any problems, write to the Community forum: https://tiledesk.discourse.group/
See you in the next tutorial!
Do you have suggestions on this article? Please send feedback to [email protected]
Previous: Payment App Tutorial — https://developer.tiledesk.com/widget/widget-app-introduction/widget-app-payment Next: Advanced — https://developer.tiledesk.com/widget/advanced
Last updated 2 years ago