Publishing Your Chatbot

Learn how to publish your chatbot and add it to your website with a simple script.

Once you've created and configured your chatbot in hyfn.ai, publishing it to your website is straightforward. The process involves copying a simple script from your dashboard and adding it to your website.

Publishing Your Chatbot

1. Navigate to the Publish Page

In your hyfn.ai dashboard, go to your account section and find the Agents tab. Click on Publish to access the publishing interface.

2. Copy the Embed Script

On the publish page, you'll find a script snippet that looks like this:

<script src="https://cdn.hyfn.ai/widget.js" data-agent-id="your-agent-id"></script>

Simply copy this script to your clipboard. The script contains your unique agent ID and will load the chatbot widget on your website.

3. Add to Your Website

Paste the copied script into your website's HTML. You can add it in several ways:

Option 1: In the HTML Head

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
  <script src="https://cdn.hyfn.ai/widget.js" data-agent-id="your-agent-id"></script>
</head>
<body>
  <!-- Your website content -->
</body>
</html>

Option 2: Before the Closing Body Tag

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your website content -->
  
  <script src="https://cdn.hyfn.ai/widget.js" data-agent-id="your-agent-id"></script>
</body>
</html>

Option 3: Using a Content Management System If you're using a CMS like WordPress, Shopify, or similar:

Go to your theme settings or page editor
Find the HTML/script injection section
Paste the script code
Save your changes

Customization Options

Basic Styling

The chatbot widget will automatically match your website's design, but you can customize its appearance by adding CSS variables:

:root {
  --hyfn-primary-color: #3B82F6;
  --hyfn-background-color: #FFFFFF;
  --hyfn-text-color: #1F2937;
  --hyfn-border-radius: 12px;
}

Positioning

The widget will appear as a floating chat button in the bottom-right corner of your website. This positioning is optimized for user experience and doesn't interfere with your website's content.

Testing Your Chatbot

Preview Mode

Before publishing, you can test your chatbot in preview mode directly from the hyfn.ai dashboard to ensure it's working correctly.

Live Testing

After adding the script to your website:

Refresh your website
Look for the chat widget in the bottom-right corner
Click on it to start a conversation
Test various questions to ensure responses are working

Troubleshooting

If the chatbot widget doesn't appear:

Check that the script is properly pasted in your HTML
Verify your internet connection
Ensure the script is loading (check browser developer tools)
Confirm your agent ID is correct

Script Loading Issues

If you see console errors:

Make sure the script URL is accessible
Check that your website allows external scripts
Verify there are no JavaScript conflicts

Analytics and Monitoring

Once your chatbot is live, you can monitor its performance from your hyfn.ai dashboard:

Conversation Count: Track how many conversations are happening
User Engagement: Monitor user interaction patterns
Response Quality: Review chatbot responses and user feedback

Updating Your Chatbot

When you make changes to your chatbot configuration in hyfn.ai:

Changes are automatically reflected on your website
No need to update the embed script
Updates take effect immediately

This simple process makes it easy to add AI-powered customer support to any website with just a few clicks and a single script tag.

Publishing Your Chatbot

Learn how to publish your chatbot and add it to your website with a simple script.