Chatty Form Documentation

Back to docs

Embedding Your Chat in Chatty Form

This guide explains how to embed your published chatbot on your website or application to collect responses directly from visitors.

Overview

Embedding allows you to integrate your chatbot seamlessly into your website or application. Visitors can interact with your chat without leaving your site, improving conversion rates and user experience.

Prerequisites

Before embedding your chat, ensure that:

  • Your chatbot has been successfully published
  • You have the embed code available
  • You have access to your website's HTML code or content management system
  • Your website supports JavaScript execution

Getting Your Embed Code

Step 1: Access the Embed Feature

  1. Open your published chatbot in the flow builder
  2. Look for and click the "Embed" button in the top navigation toolbar
  3. A modal window will appear containing the embed code

Step 2: View Embed Options

The embed modal shows:

Embed Code: The HTML/JavaScript snippet to paste into your website

Preview: A demonstration of how your chat will appear when embedded

Display Options: Configure how the chat will appear on your site

Step 3: Copy the Embed Code

  1. Select all the code in the code box (Ctrl+A or Cmd+A)
  2. Copy the code (Ctrl+C or Cmd+C)
  3. Keep this code accessible for the installation step

Embed Options Explained

Display Modes

Full Width Mode

  • The chat takes up the entire width of the container
  • Best for dedicated chat pages or when chat is the main focus
  • Requires a dedicated page or large section of your site
  • Provides maximum space for conversation
  • Ideal for comprehensive questionnaires or support chat
  • The chat appears as a small icon/bubble in a corner of your page
  • Users click to expand the chat interface
  • Less intrusive, doesn't compete with page content
  • Good for content-rich sites or when chat is supplementary
  • Takes minimal page space when minimized
  • Bottom Right: Appears in the bottom-right corner of the screen
  • Most familiar to users
  • Common placement for chat widgets
  • Doesn't interfere with main content
  • Center: Appears in the middle of the screen
  • More attention-grabbing
  • Good for urgent or important interactions
  • More likely to be noticed by visitors

Installing the Embed Code

For Static HTML Websites

  1. Open the HTML file where you want to embed the chat
  2. Paste the embed code before the closing </body> tag
  3. Save the file and upload to your server
  4. Test the page to ensure the chat appears correctly

For Content Management Systems (WordPress, Drupal, etc.)

WordPress:

  1. Go to your WordPress admin panel
  2. Navigate to Appearance → Widgets or Appearance → Editor
  3. Find the area where you want to add the chat
  4. Add an HTML widget/block or edit the appropriate template
  5. Paste the embed code in the HTML section
  6. Save and preview your changes

Other CMS:

  1. Navigate to the page or section where you want to add the chat
  2. Switch to HTML or code editing mode
  3. Paste the embed code in the desired location
  4. Save and publish your changes

For Modern Web Frameworks (React, Vue, etc.)

  1. Create a component where you want the chat to appear
  2. Add a script tag dynamically or through a hook
  3. Ensure the script executes after the DOM loads
  4. Follow your framework's recommended practices for third-party scripts

Best Placement Strategies

High-Converting Placements

Above the Fold

  • Position visible without scrolling
  • Good for priority information gathering
  • Higher visibility increases interaction rates

Contextual Placements

  • Near related content or calls-to-action
  • When users are already engaged with relevant content
  • Natural point for interaction in user journey

Exit Intent

  • Appears when users seem ready to leave
  • Opportunity to capture information before departure
  • Often uses popup mode for this strategy

Considerations by Mode

For Full Width Embeds:

  • Use on dedicated landing pages
  • Good for comprehensive surveys or support
  • Ensure enough space on the page
  • May work well in a popup modal rather than directly on page

For Popup Embeds:

  • Place consistently across multiple pages
  • Don't interfere with primary navigation
  • Consider timing (immediate vs. after delay)
  • Respect user preferences and privacy regulations

Testing Your Embed

Verification Steps

  1. Visual Check:
  • Visit the page where you embedded the chat
  • Ensure it appears as expected
  • Check responsiveness on different screen sizes
  1. Functionality Test:
  • Interact with the chat to ensure it works properly
  • Test all input fields and navigation
  • Verify that data is being collected correctly
  1. Cross-Browser Testing:
  • Check functionality in different browsers (Chrome, Firefox, Safari, Edge)
  • Ensure consistent appearance and behavior
  • Verify JavaScript compatibility
  1. Mobile Responsiveness:
  • Test on mobile devices and tablets
  • Ensure touch interactions work properly
  • Check readability of text and usability of inputs

Common Testing Scenarios

  • Submit sample data to verify collection
  • Test all flow paths through your chat
  • Verify that thank you messages appear
  • Check that any email notifications are sent

Customization Options

Through Your Website

  • Adjust the container size if using full-width mode
  • Add CSS styling to complement your site design
  • Modify positioning based on your page layout

Through Chatty Form Settings

  • Adjust colors in the Theme tab to match your branding
  • Upload your logo in the Settings
  • Configure message delays for natural feel
  • Set up thank you messages that align with your site's tone

Performance Considerations

Load Time Impact

  • The embed code adds minimal load time to your page
  • Script loads asynchronously to avoid blocking other content
  • Monitor overall page performance after adding the embed

Resource Usage

  • Chat functionality runs independently after loading
  • Uses minimal system resources on user devices
  • Server load is handled by Chatty Form infrastructure

Troubleshooting Common Issues

Chat Not Appearing

  • Problem: Embed code is added but chat doesn't show
  • Solution: Verify the chat is published and code is placed correctly
  • Solution: Check browser console for JavaScript errors
  • Solution: Ensure ad blockers aren't interfering

Malformed Layout

  • Problem: Chat appears but doesn't fit properly in container
  • Solution: Check your page's CSS for conflicting styles
  • Solution: Ensure adequate space for the chosen display mode
  • Solution: Verify that the embed code wasn't modified incorrectly

Functionality Issues

  • Problem: Chat appears but interactions don't work properly
  • Solution: Check for JavaScript conflicts with other site scripts
  • Solution: Verify the embed code hasn't been altered
  • Solution: Test in different browsers

Data Collection Problems

  • Problem: Users can interact but data isn't being collected
  • Solution: Verify the chat is published, not in draft mode
  • Solution: Check that the bot ID in the embed code is correct
  • Solution: Ensure your internet connection works properly

Tracking and Analytics

Monitoring Embedded Chat Performance

  • Track submissions in the Chatty Form dashboard
  • Monitor engagement rates and completion percentages
  • Analyze user drop-off points in your flows
  • A/B test different placement strategies

Integration with Site Analytics

  • Set up event tracking for chat interactions
  • Monitor page views where chat is embedded
  • Track conversion rates from chat submissions
  • Analyze how embedded chat affects overall site engagement

Security and Privacy

Data Handling

  • All data collected goes through Chatty Form's secure systems
  • Your website doesn't need to handle sensitive user data
  • Comply with privacy regulations through Chatty Form's policies
  • Verify your privacy policy mentions the use of chat functionality

Embed Security

  • The embed code uses secure HTTPS connections
  • No direct access to your website's data
  • Chatty Form handles all data processing securely
  • Regular security audits and updates

Advanced Configuration

Timing Options

  • Control when the chat becomes visible to users
  • Set delays for popup appearance
  • Implement exit-intent detection
  • Schedule when chat is available

Targeting Options

  • Show chat to specific user segments
  • Display based on visitor behavior
  • Geographic or device-based filtering
  • Session-based presentation rules

Need Help?

  • Verify all prerequisites are met before troubleshooting
  • Check that your embed code matches exactly what was provided
  • Review your website's developer console for errors
  • Contact support if issues persist after basic troubleshooting