Skip to content

Website Embed

Add your AI chatbot to any website with a simple script tag.

Quick Setup

<script
  src="https://app.functionalai.com/chatbot.js"
  data-token="your-token-here"
  defer>
</script>
Add this before </body> and you're done!

Overview

Website embedding allows you to add your Functional AI chatbot to any website, regardless of platform. Simply add a script tag to your HTML.

Benefits

  • Universal compatibility - Works on any website
  • Simple setup - One line of code
  • Automatic updates - Widget updates automatically
  • Full customization - Appearance syncs from dashboard

Prerequisites

Before embedding:

  • Functional AI account
  • Configured assistant
  • Assistant set to public
  • Access to your website's HTML

Getting the Embed Code

Step 1: Make Assistant Public

  1. Go to Assistants
  2. Select your assistant
  3. Toggle Assistant Privacy to public

Step 2: Get the Code

  1. Click Manage Assistant
  2. Go to the Sharing tab
  3. Find the Website Integration section
  4. Copy the script code

The Embed Code

<script
  src="https://app.functionalai.com/chatbot.js"
  data-token="your-unique-token"
  defer>
</script>

Token Security

The token identifies your assistant. While it's public-facing (embedded in your website), treat it as you would any API key.

Installation

Basic Installation

Add the script before the closing </body> tag:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content -->

    <!-- Functional AI Chatbot -->
    <script
      src="https://app.functionalai.com/chatbot.js"
      data-token="your-unique-token"
      defer>
    </script>
</body>
</html>

Platform-Specific Instructions

  1. Go to Appearance > Theme Editor
  2. Select footer.php
  3. Add the script before </body>

Or use "Insert Headers and Footers" plugin.

  1. Settings > Custom Code
  2. Add Custom Code
  3. Set placement to "Body - end"
  4. Apply to "All pages"
  1. Settings > Advanced > Code Injection
  2. Paste in Footer section
  1. Project settings > Custom Code
  2. Paste in Footer Code section
// In _app.js or layout component
import Script from 'next/script'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://app.functionalai.com/chatbot.js"
        data-token="your-unique-token"
        strategy="lazyOnload"
      />
    </>
  )
}

// In public/index.html before </body>
<script
  src="https://app.functionalai.com/chatbot.js"
  data-token="your-unique-token"
  defer>
</script>

<!-- In App.vue -->
<script>
export default {
  mounted() {
    const script = document.createElement('script')
    script.src = 'https://app.functionalai.com/chatbot.js'
    script.setAttribute('data-token', 'your-unique-token')
    script.defer = true
    document.body.appendChild(script)
  }
}
</script>

Simply add the script before </body> in your layout template.

Widget Behavior

Default Position

Bottom-right corner of the viewport.

Appearance

Matches your customization settings from the Functional AI dashboard.

Mobile Responsive

The widget adapts to mobile screens automatically.

Persistence

Conversation history is maintained during the browser session.

Customization

Widget appearance is controlled from your Functional AI dashboard:

  1. Go to Assistants
  2. Select your assistant
  3. Click Appearance tab
  4. Customize colors, theme, avatars
  5. Save

Changes sync automatically to all embedded widgets.

See Customization for details.

Testing Your Embed

Verify Installation

  1. Open your website
  2. Look for the chat bubble (bottom-right)
  3. Click to open the chat
  4. Send a test message

Troubleshooting Steps

If the widget doesn't appear:

  1. Check the script placement - Should be before </body>
  2. Verify the token - Copy fresh from dashboard
  3. Test in incognito - Eliminates cache issues
  4. Check browser console - Look for errors

Browser Console Check

  1. Open Developer Tools (F12 or right-click > Inspect)
  2. Go to Console tab
  3. Look for errors related to the chatbot script
  4. Check Network tab to verify script loaded

Advanced Configuration

Loading on Specific Pages

To show the widget only on certain pages, add conditional logic:

<script>
if (window.location.pathname === '/support') {
  const script = document.createElement('script')
  script.src = 'https://app.functionalai.com/chatbot.js'
  script.setAttribute('data-token', 'your-unique-token')
  document.body.appendChild(script)
}
</script>

Multiple Assistants

For different assistants on different pages, use different tokens:

<!-- Support page -->
<script data-token="support-assistant-token" ...></script>

<!-- Sales page -->
<script data-token="sales-assistant-token" ...></script>

Troubleshooting

Widget Not Appearing

Issue Solution
Script not loading Check placement before </body>
Wrong token Copy fresh token from dashboard
Assistant private Make assistant public
Cache Test in incognito mode
JS errors Check browser console

Widget Appears But Won't Open

  • Check for CSS conflicts (z-index issues)
  • Look for JavaScript errors
  • Test in a different browser

Style Conflicts

If your site's CSS affects the widget:

  1. The widget uses scoped styles
  2. Check for overly broad CSS selectors
  3. Use browser inspector to identify conflicts
  4. Contact support for advanced issues

Best Practices

Do

  • Test thoroughly before going live
  • Use incognito mode for testing
  • Keep your token secure
  • Monitor conversations after launch

Don't

  • Add multiple instances of the script
  • Modify the script src URL
  • Cache the script locally (use CDN)
  • Forget to make assistant public

Next Steps