Chatty Form Documentation

Back to docs

Chatty Form User Guide

Welcome to Chatty Form! This guide will help you understand how to use our chatbot platform to create, customize, and deploy conversational interfaces for collecting information from users.

Table of Contents

  1. Creating Chat Bots
  2. Creating Chat Flows
  3. Flow Nodes
  4. Designing Chat UI
  5. Publishing Your Chat
  6. Embedding Your Chat
  7. Checking Submissions
  8. Emails Feature
  9. Ready-Made Templates

Creating Chat Bots

Chat bots in Chatty Form are the foundation of your conversational experiences. Each bot has its own flow, settings, and data collection capabilities.

Steps to Create a Chat Bot:

  1. Navigate to the "My Chat Bots" page from the dashboard
  2. Click the "Create New Bot" button
  3. Enter a name for your chat bot (this will be displayed to users)
  4. Optionally add a description to help you remember what this bot is for
  5. Click "Create Bot" to finalize the creation

Once created, your bot will appear in the "Draft" status and be ready for you to design its conversation flow.

Managing Your Bots:

  • Edit: Click the edit button to change the name or description
  • Delete: Click the trash icon to permanently remove a bot (and all associated flows and submissions)
  • Status Indicators: Bots can be Draft, Published, or Archived

Creating Chat Flows

Chat flows define the conversation path your users will follow. Think of it as a visual map of how the conversation should proceed based on user inputs and decisions.

Accessing the Flow Builder:

  1. From the "My Chat Bots" page, click on your bot's card to open the flow builder
  2. You'll see a canvas with a sample conversation flow already loaded

Building Your Flow:

  1. On the left side, you'll find a palette of different node types you can add
  2. Drag and drop nodes onto the canvas to build your conversation
  3. Connect nodes together with arrows to define the flow sequence
  4. Customize each node's content and settings by clicking on it
  5. Save your progress regularly using the "Save Flow" button

Understanding Flow Connections:

  • Each arrow represents the path from one node to another
  • Some nodes (like conditional nodes) can have multiple outputs based on different conditions
  • The flow starts with the first node and follows the connections as the user interacts

Saving and Testing:

  • Use the "Save Flow" button frequently to save your work
  • Use the "Test Chat" panel on the right to preview your flow as you build it
  • Make sure all paths in your flow lead to a logical conclusion

Flow Nodes

Flow nodes are the building blocks of your chat conversations. Each node type serves a specific purpose in guiding the conversation.

1. Text Node

Purpose: Displays static text content to the user.

Features:

  • Supports Markdown formatting (headings, lists, links, images)
  • Can include rich text with bold, italic, and other formatting
  • Used for welcome messages, instructions, or informative content

Configuration:

  • Enter your text content in the editor
  • Format using Markdown syntax (e.g., # Heading, italic, bold)

2. Image Node

Purpose: Displays images to enhance the conversation.

Features:

  • Accepts image URLs or uploaded images
  • Responsive formatting to fit the chat interface
  • Alt text support for accessibility

3. Video Node

Purpose: Shows videos to the user during the conversation.

Features:

  • Embeds videos from video hosting platforms
  • Auto-play options
  • Responsive video player

Purpose: Provides external links to resources or websites.

Features:

  • Creates clickable links
  • Option to open in new tab
  • Descriptive text display

5. Iframe Node

Purpose: Embeds external content from other websites.

Features:

  • Embeds any webpage that allows iframe embedding
  • Configurable dimensions
  • Allows seamless integration of third-party tools

6. Input Field Node

Purpose: Collects user input of various types.

Input Types Available:

  • Text Input
  • Email Input
  • Number Input
  • Date Input
  • File Upload
  • Phone Number

Configuration:

  • Set the input type and label
  • Define if the field is required
  • Set validation rules (min/max length, date range, etc.)

7. Select Node

Purpose: Presents users with predefined options to choose from.

Features:

  • Multiple-choice selection
  • Configurable option labels
  • Stores user selection for later use

Configuration:

  • Add options for the user to select
  • Set the prompt/question for the selection
  • Define the name used when storing the response

8. Conditional Node

Purpose: Routes conversations based on previous user inputs or conditions.

Features:

  • Evaluates conditions to determine next step
  • Can branch to different parts of the flow
  • Uses data collected earlier in the conversation

Configuration:

  • Define the condition statement
  • Specify different outputs based on whether the condition is met
  • Reference field names from previous input nodes

9. Redirect Node

Purpose: Sends users to an external URL after collecting information.

Features:

  • Redirects user to specified URL
  • Can pass collected data as URL parameters
  • Useful for sending users to payment pages or other external systems

10. LLM (Large Language Model) Node

Purpose: Integrates AI-powered responses into your chat.

Features:

  • Generates responses using AI
  • Requires an API key for AI service
  • Can be customized with prompts

Configuration:

  • Enter your AI API key
  • Define the prompt that guides the AI response
  • Configure response handling

11. Webhook Node

Purpose: Triggers external web services or APIs during the conversation.

Features:

  • Sends data to external endpoints
  • Can be triggered at specific points in the flow
  • Useful for integrating with CRM, databases, or other systems

Configuration:

  • Define the endpoint URL
  • Set up authentication if needed
  • Map chat fields to request parameters

12. Telegram Node

Purpose: Send notifications or data to a Telegram bot/channel.

Features:

  • Integrates with Telegram messaging
  • Can send form data or notifications
  • Requires Telegram Bot Token

Configuration:

  • Provide your Telegram Bot Token
  • Define the chat ID or channel
  • Format the message content

13. Request Node

Purpose: Makes HTTP requests to external services and processes responses.

Features:

  • Sends GET/POST requests to APIs
  • Can process and use response data
  • Supports various request headers and bodies

Configuration:

  • Define endpoint URL and HTTP method
  • Set headers and request body
  • Map response data for use in the flow

Designing Chat UI

The settings section allows you to customize the appearance, behavior, and functionality of your chatbot.

Accessing Settings:

  1. From the flow builder, click the "Settings" icon (gear icon) in the top navigation
  2. This opens a comprehensive settings panel divided into tabs

Setting Tabs and Options:

Info Tab

  • Chatbot Title: The name displayed to users
  • Description: Welcome message or introductory text
  • Chatbot Logo: Upload a logo that appears in the chat interface

Settings Tab

  • Message Delay: Control how long messages pause before appearing (0.5 seconds by default)
  • Chat Interface Type: Choose between "Full Width" (embedded in the page) or "Popup" (floating chat bubble)
  • Popup Position: If using popup mode, choose "Bottom Right" or "Center"
  • Email Collection: Enable/disable email collection feature
  • Notification Email: Specify where form submission notifications should be sent

Theme Tab

  • Primary Color: Main color used throughout the chat interface
  • Secondary Color: Supporting color for elements like backgrounds
  • Chat Icon Style: Visual style of the chat launch icon
  • Chat Icon Color: Color of the floating chat icon
  • OG Image: Social media preview image when the chat URL is shared

Thank You Tab

  • Enable Thank You Page: Toggle to show a custom thank you message after form completion
  • Enable Try Again Button: Allow users to restart the conversation after completion
  • Thank You Message: Custom message to display at the end of the conversation

Advanced Settings:

  • Remove Branding: Option to remove Chatty Form branding (available on Pro and Elite plans)
  • Social Media Optimization: Configure how your chat appears when shared on social platforms

Publishing Your Chat

Once you're happy with your chat flow, you need to publish it to make it accessible to users.

Steps to Publish:

  1. Navigate to your chat bot's flow builder
  2. Ensure all flow paths are complete and tested
  3. Click the "Publish" button in the top navigation
  4. If prompted about validation errors, fix any issues (especially required fields in Input Form nodes)
  5. Wait for the publishing process to complete
  6. A success message confirms the publication

What Happens When You Publish:

  • Your chat becomes accessible via a public URL
  • The chat starts collecting submissions to your dashboard
  • Any embedded version updates with the new flow
  • The bot status changes from "Draft" to "Published"

Managing Published Status:

  • You can continue editing your flow while it's published
  • Edits won't affect the live version until you republish
  • Use the "Save Flow" button to preserve your edits
  • Unpublish by going to settings and changing the status

Embedding Your Chat

After publishing, you can embed your chat into your website to collect responses directly.

Getting Embed Code:

  1. Click the "Embed" button in the top navigation of the flow builder
  2. Copy the provided HTML snippet
  3. Paste this code into your website's HTML where you want the chat to appear

Embed Options:

  • Full Width: Chat takes up the entire page width (works best on dedicated pages)
  • Popup: Small chat bubble appears in the corner (recommended for most websites)
  • Popup Position: Choose between bottom-right or center placement

Customization:

  • The embedded chat inherits your branding settings (colors, logos)
  • Works responsively across different devices
  • Maintains the same functionality as the standalone version

Testing Your Embed:

  • Paste the code on your website
  • Test the flow to ensure everything works as expected
  • Verify that form submissions are captured in your dashboard

Checking Submissions

All user interactions and form data collected through your chat bots are stored in the submissions section.

Viewing Submissions:

  1. From your bot's flow builder, click on the "Submissions" tab in the sidebar
  2. You'll see a list of all submissions with timestamps
  3. Click the eye icon to view the detailed conversation and collected data

Submission Details:

  • Submission ID: Unique identifier for each interaction
  • Timestamp: When the conversation started
  • Conversation Flow: Step-by-step record of the user's journey through your flow
  • Collected Data: All information gathered from input fields

Managing Submissions:

  • View Details: Click the eye icon to see the complete conversation
  • Delete: Remove individual submissions with the trash icon
  • Export: Bulk export submissions (currently manual viewing available)

Pagination:

  • Submissions are shown 10 per page
  • Use the pagination controls to navigate between pages
  • All submissions for the specific bot are listed chronologically

Emails Feature

Chatty Form offers email notification capabilities to keep you informed about new submissions.

Enabling Email Notifications:

  1. Go to your chat bot's settings
  2. Under the Settings tab, ensure "Email Enabled" is turned ON
  3. Enter the email address where you want notifications sent
  4. Save the settings

Email Content:

  • Each submission triggers an email notification
  • Email contains the collected data from the conversation
  • Includes timestamp and submission ID for reference

Important Notes:

  • You can receive notifications at only one email address per bot
  • Email notifications only work with published bots
  • Verify the email address is correct to prevent delivery failures

Ready-Made Templates

Chatty Form provides ready-made templates to help you quickly set up common use cases.

Available Templates:

  1. Hotel Booking - Complete hotel reservation flow
  2. Haircut Booking - Barber shop appointment scheduling
  3. AI Assistant - Intelligent chatbot powered by LLM
  4. Pizza Order Bot - Food ordering system

Using Templates:

  1. Visit the homepage and scroll to the "Templates" section
  2. Click "Demo" to preview the template before importing
  3. Click "Get Template" to download the template file
  4. Navigate to your chat bot's flow builder
  5. Click the "Import" button (upload arrow icon) in the top navigation
  6. Select the downloaded template file
  7. The flow will be imported and ready for customization

Customizing Templates:

  • After importing, you can edit any aspect of the template
  • Change text, add or remove nodes, modify logic as needed
  • Templates are fully customizable once imported

Note about AI Assistant Template:

  • This template requires an LLM API key to function
  • Add your own API key in the LLM node settings after importing
  • Without a valid API key, the AI responses won't work

Benefits of Templates:

  • Save time on common chatbot patterns
  • Learn from professionally designed examples
  • Modify and extend based on your specific needs
  • Best starting point for similar use cases

Need More Help?

If you need additional assistance:

  • Use the demo links on the homepage to understand how different features work
  • Contact support through the platform if you have specific questions
  • Check back regularly for new templates and features
  • Experiment in draft mode before publishing anything