ChatFlow Logo

How to Publish Your Chatbot

Step-by-step guide to getting your embed code and installing the chatbot on your website

How to Publish Your Chatbot

After setting up and testing your chatbot, it's time to publish it on your website. This guide shows you how to get the embed code and install it on various platforms.

Prerequisites

  • A configured chatbot with FAQs or documents
  • Tested in Playground - Verify it works before publishing
  • Access to your website's HTML/code editor

Steps

Step 1: Open the Publish Tab

  1. Go to Chatbots in the sidebar
  2. Click on your chatbot to open it
  3. Click the Publish tab

Step 2: Copy the Embed Code

You'll see a code snippet that looks like this:

<script
  src="https://app.chatflow.com/chatflow-chatbot.js"
  data-chatbot-id="your-chatbot-id"
  defer>
</script>

Click the Copy button to copy the entire code snippet to your clipboard.

Step 3: Install on Your Website

Paste the code into your website's HTML, just before the closing </body> tag.

<html>
<head>
  <!-- Your head content -->
</head>
<body>
  <!-- Your website content -->

  <!-- Paste ChatFlow embed code here -->
  <script
    src="https://app.chatflow.com/chatflow-chatbot.js"
    data-chatbot-id="your-chatbot-id"
    defer>
  </script>
</body>
</html>

Platform-Specific Instructions

WordPress

Option 1: Using Theme Editor

  1. Go to Appearance > Theme Editor
  2. Select your theme's footer.php file
  3. Paste the code before </body>
  4. Click Update File

Option 2: Using a Plugin

  1. Install "Insert Headers and Footers" plugin
  2. Go to Settings > Insert Headers and Footers
  3. Paste the code in the Footer section
  4. Click Save

For detailed steps, see WordPress Integration.

Wix

  1. Go to your Wix Dashboard
  2. Click Settings > Custom Code
  3. Click + Add Custom Code
  4. Paste your embed code
  5. Set placement to Body - End
  6. Click Apply

For detailed steps, see Wix Integration.

Shopify

  1. Go to your Shopify Admin
  2. Click Online Store > Themes
  3. Click Actions > Edit Code
  4. Open theme.liquid
  5. Paste the code before </body>
  6. Click Save

For detailed steps, see Shopify Integration.

Webflow

  1. Go to your Webflow project settings
  2. Click the Custom Code tab
  3. Paste the code in Footer Code
  4. Click Save Changes
  5. Publish your site

For detailed steps, see Webflow Integration.

Squarespace

  1. Go to Settings > Advanced > Code Injection
  2. Paste the code in Footer
  3. Click Save

Custom HTML/React/Next.js

For custom implementations, paste the script in your main HTML file or layout component.

React/Next.js Example:

// In your _app.js or layout.tsx
import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://app.chatflow.com/chatflow-chatbot.js"
        data-chatbot-id="your-chatbot-id"
        strategy="afterInteractive"
      />
    </>
  )
}

Verify It's Working

Step 1: Visit Your Website

Open your website in a new browser tab (or incognito window for best results).

Step 2: Look for the Chat Widget

You should see the chat widget in the corner of your screen (default: bottom right).

Step 3: Test the Chatbot

  1. Click the chat widget to open it
  2. Send a test message
  3. Verify the response matches your expectations

Step 4: Check in ChatFlow Dashboard

  1. Go to Conversations in your ChatFlow dashboard
  2. You should see your test conversation appear
  3. This confirms the connection is working

Advanced Options

Multiple Pages

The embed code works across all pages where it's installed. For most CMS platforms, adding it to the theme/footer applies it site-wide.

Specific Pages Only

If you only want the chatbot on specific pages:

  1. Add the code only to those page templates
  2. Or use conditional logic in your code

Hiding on Certain Pages

To hide the chatbot on specific pages, you can add CSS:

/* Hide chatbot on pricing page */
.chatflow-widget { display: none !important; }

Or use JavaScript to control visibility based on URL.

Troubleshooting

Widget Not Appearing

  1. Check the code placement - Must be before </body>
  2. Clear browser cache - Hard refresh (Ctrl+Shift+R)
  3. Check for JavaScript errors - Open browser console (F12)
  4. Verify chatbot ID - Ensure the ID matches your chatbot
  5. Check ad blockers - Disable them temporarily

Widget Appearing But Not Working

  1. Test in Playground first - Ensure chatbot works in dashboard
  2. Check network requests - Look for failed API calls in console
  3. Verify domain - Some plans have domain restrictions

Code Not Saving

  1. Check permissions - You may need admin access
  2. Try a different method - Use a plugin instead of direct editing
  3. Contact platform support - They can help with code injection

Styling Conflicts

  1. Check z-index - Widget may be hidden behind elements
  2. Check CSS overrides - Your site CSS may affect the widget
  3. Inspect element - Use browser dev tools to diagnose

What's Next

After publishing, consider:

Need Help?

PreviousHow to Test in Playground
NextHow to Connect WhatsApp