Skip to content

Sharing & Embedding

Share your assistant via links or embed it on your website.

Making Your Assistant Public

Enable Public Access

  1. Go to Assistants > Manage Assistant
  2. Navigate to the Sharing tab
  3. Your assistant automatically becomes shareable with a unique share link

Public = Anyone Can Access

Configure your assistant properly before sharing. Review security settings to control how visitors identify themselves.

How It Works

Token generated: Signed JWT with assistant ID, owner email, expiration Anonymous access: Users don't need accounts Security: Token is signed, cannot be tampered with. Disable sharing to invalidate.

Sharing Options

Direct URL for users to chat with your assistant.

Get link: Manage Assistant > Sharing tab > Copy share link

Use for: Email, social media, marketing materials, support tickets

Website Embed

Add a chat widget to any website using a simple script tag.

Get embed code: Manage Assistant > Sharing tab > Get Integration Code

The embed code uses your assistant ID in the URL:

<script async
  src="https://api.functional-ai.com/shared-chat/widget-script/YOUR_ASSISTANT_ID/">
</script>

Install: Paste before the closing </body> tag

Technical Details
  • Async loading: No impact on page load
  • Widget: Floating button with customizable position
  • State: Conversation persisted via session
  • Browser support: All modern browsers, mobile-responsive

Installation Examples

<!DOCTYPE html>
<html>
<body>
    <!-- Your content -->
    <script async
      src="https://api.functional-ai.com/shared-chat/widget-script/YOUR_ASSISTANT_ID/">
    </script>
</body>
</html>

Option 1: Appearance > Theme Editor > footer.php (paste before </body>) Option 2: Use plugin "Insert Headers and Footers"

Use native Shopify integration for automatic installation and updates.

import { useEffect } from 'react';

export function ChatWidget({ assistantId }: { assistantId: string }) {
  useEffect(() => {
    if (document.getElementById('chat-widget-script')) return;

    const script = document.createElement('script');
    script.id = 'chat-widget-script';
    script.src = `https://api.functional-ai.com/shared-chat/widget-script/${assistantId}/`;
    script.async = true;
    document.body.appendChild(script);

    return () => script.remove();
  }, [assistantId]);

  return null;
}

<script>
export default {
  props: ['assistantId'],
  mounted() {
    const script = document.createElement('script')
    script.src = `https://api.functional-ai.com/shared-chat/widget-script/${this.assistantId}/`
    script.async = true
    document.body.appendChild(script)
  }
}
</script>

Identity Verification

For authenticated users on your website, you can pass identity information to the widget:

<script async
  src="https://api.functional-ai.com/shared-chat/widget-script/YOUR_ASSISTANT_ID/"
  data-user-identifier="user@example.com"
  data-hmac-signature="generated-hmac-signature">
</script>

See Security Settings for complete setup instructions including how to generate HMAC signatures on your backend.

Widget Behavior

Position: Configurable via appearance settings - bottom-right, bottom-left, or side drawer

Interaction: Click to open, type messages, minimize/close

Persistence: Conversation history maintained within session

Customization: Uses your appearance settings - colors, theme, layout style. Changes auto-update.

Before Sharing

Security

Public assistants are accessible by anyone. Configure security settings to require identification if needed. Monitor conversations and set clear boundaries in instructions.

Troubleshooting

Widget Not Appearing

Diagnostic:

  1. Verify script is before </body> tag
  2. Check browser console (F12) for errors
  3. Verify assistant ID is correct in the URL
  4. Test in incognito mode
  5. Check network tab for script loading status

Common causes: CSP blocking script, ad blockers, incorrect assistant ID

Widget Appears But Doesn't Work
  • Error shown: Check assistant is still shared and not deleted
  • No responses: Check Conversations panel, verify instructions, check console for API errors
  • Conflicts: Check z-index, test different browsers
Style Conflicts

The widget launcher can be customized via appearance settings. For additional CSS overrides:

/* Adjust z-index if needed */
#fai-widget-container {
  z-index: 999999 !important;
}

Note: Chat interface runs in iframe - only the launcher can be styled via CSS.

Next Steps