Skip to main content

​
Overview

Once you’ve configured and tested your agent in the Playground, deploying it to your website is straightforward. The platform provides deployment channels that let you add your AI assistant to any website with just a few lines of code.
Always test your agent thoroughly in the Playground before deploying to production. A well-configured agent makes a great first impression with your visitors.

​
Deployment Channels

The Deploy section offers multiple ways to integrate your agent:

Chat Widget

The most common deployment option. Adds a floating chat bubble to your website that visitors can click to interact with your agent.

Help Page

Host a dedicated help page where users can chat directly with your agent. Ideal for support centers and documentation sites.

​
Chat Widget Deployment

The chat widget is an embeddable component that adds AI-powered chat to any website. It appears as a floating bubble in the corner of your page.

​
Getting the Embed Code

Navigate to Deploy → Chat Widget in your agent’s menu. The embed code section displays two script tags that you’ll need to add to your website: 
<script src="https://chat.humanizing.com/embed.js"></script>
<script>humanizing.init("YOUR_PUBLIC_KEY");</script>
Your agent’s unique public key is automatically included in the embed code. This key identifies your specific agent and loads its configuration, styling, and knowledge base.

​
Copying the Code

  1. Locate the Embed Code section at the bottom of the Playground page or in the Chat Widget deployment settings
  2. Click the copy button (clipboard icon) in the top-right corner of the code block
  3. The complete embed code is copied to your clipboard

​
Adding the Script to Your Website

​
Basic Installation

Add the embed code to your website’s HTML. The scripts should be placed near the closing </body> tag for optimal performance: 
<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Humanizing Agent Chat Widget -->
  <script src="https://chat.humanizing.com/embed.js"></script>
  <script>humanizing.init("YOUR_PUBLIC_KEY");</script>
</body>
</html>

​
Placement Options

LocationRecommendationUse Case
Before </body>RecommendedMost websites - ensures page content loads first
Before </head>AlternativeSites needing the widget immediately available
Via tag managerAdvancedSites using Google Tag Manager or similar tools
Placing scripts at the end of the body allows your page content to load and render before the widget initializes, providing a better user experience.

​
Platform-Specific Instructions

​
WordPress

For WordPress sites, you can add the embed code using one of these methods:
  1. Go to Appearance → Customize in your WordPress admin
  2. Find the Additional CSS/Scripts section (varies by theme)
  3. Add the embed code to the footer scripts area
  4. Click Publish to save changes
  1. Install a header/footer scripts plugin (e.g., “Insert Headers and Footers”)
  2. Navigate to the plugin settings
  3. Paste the embed code in the Footer Scripts section
  4. Save your changes
  1. Go to Appearance → Theme File Editor
  2. Select footer.php from the right sidebar
  3. Add the embed code just before the closing </body> tag
  4. Click Update File
Editing theme files directly is not recommended as changes may be lost during theme updates. Use a child theme or plugin method instead.

​
Shopify

Add the chat widget to your Shopify store:
  1. Go to Online Store → Themes in your Shopify admin
  2. Click Actions → Edit code on your active theme
  3. Open theme.liquid from the Layout folder
  4. Paste the embed code just before the closing </body> tag
  5. Click Save

​
Webflow

For Webflow sites:
  1. Open your project in the Webflow Designer
  2. Go to Project Settings → Custom Code
  3. Paste the embed code in the Footer Code section
  4. Publish your site to apply changes

​
React / Next.js

For React-based applications, add the script dynamically: 
import { useEffect } from 'react';

function ChatWidget() {
  useEffect(() => {
    // Load the embed script
    const script = document.createElement('script');
    script.src = 'https://chat.humanizing.com/embed.js';
    script.async = true;
    document.body.appendChild(script);

    // Initialize after script loads
    script.onload = () => {
      window.humanizing.init('YOUR_PUBLIC_KEY');
    };

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
}

export default ChatWidget;
Then include the component in your app layout or specific pages where you want the widget.

​
Vue.js

For Vue applications: 
<script setup>
import { onMounted, onUnmounted } from 'vue';

let script = null;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://chat.humanizing.com/embed.js';
  script.async = true;
  script.onload = () => {
    window.humanizing.init('YOUR_PUBLIC_KEY');
  };
  document.body.appendChild(script);
});

onUnmounted(() => {
  if (script) {
    document.body.removeChild(script);
  }
});
</script>

<template>
  <!-- Your component content -->
</template>

​
Google Tag Manager

To deploy via Google Tag Manager:
  1. Create a new Custom HTML tag in GTM
  2. Paste the embed code in the HTML field
  3. Set the trigger to All Pages (or specific pages)
  4. Test in Preview mode
  5. Publish your container

​
Widget Customization

Before deploying, customize your widget appearance in the Deploy → Chat Widget settings:

​
Styling Options

SettingDescription
AvatarChoose the 3D avatar that represents your agent
AppearanceLight or dark theme for the chat interface
Brand ColorYour primary accent color
Bubble PositionLeft or right corner of the screen
Bubble IconCustom icon for the chat bubble

​
Content Settings

SettingDescription
Welcome MessageInitial greeting when chat opens
Header TitleCustom title in the widget header
Suggested QuestionsPre-populated questions to help users start
LanguagesAvailable language options for visitors
All customization changes require clicking Save before they take effect. The live preview in the settings page shows how changes will look.

​
Verifying Your Deployment

After adding the embed code to your website:
1

Clear cache

Clear your browser cache and any CDN/server caches to ensure the latest version loads.
2

Visit your site

Navigate to your website and look for the chat bubble in the corner you specified.
3

Test the widget

Click the bubble and ask a test question to verify the agent responds correctly.
4

Check mobile

Test on mobile devices to ensure the widget is accessible and functional.

​
Troubleshooting

Possible causes:
  • Script not loading due to Content Security Policy (CSP)
  • JavaScript error on the page blocking execution
  • Ad blocker interfering with the widget
Solutions:
  • Check browser console for errors (F12 → Console)
  • Add the widget domain to your CSP allowlist
  • Disable ad blockers temporarily to test
  • Verify the embed code is correctly placed in your HTML
Possible causes:
  • Invalid or expired public key
  • Network connectivity issues
  • Agent not properly configured
Solutions:
  • Verify the public key matches your agent
  • Check your agent is active in the dashboard
  • Test in the Playground to ensure the agent works
Possible causes:
  • CSS conflicts with your website styles
  • Unsaved changes in widget settings
  • Browser caching old styles
Solutions:
  • The widget uses shadow DOM to isolate styles, but global resets may affect it
  • Save changes in the Chat Widget settings page
  • Hard refresh your page (Ctrl+Shift+R / Cmd+Shift+R)
Possible causes:
  • Embed code added to global template
Solutions:
  • Use conditional logic in your CMS to show the widget only on specific pages
  • Use Google Tag Manager with page-specific triggers
  • For developers: conditionally render the script based on route

​
Security Considerations

Never expose your agent’s admin credentials or API keys in client-side code. The public key in the embed code is designed to be public and is the only credential needed for the widget.

​
Best Practices

  • Use HTTPS: Always serve your website over HTTPS to ensure secure communication with the widget
  • Review content: The agent only responds based on its knowledge base - ensure no sensitive information is included in sources
  • Monitor conversations: Regularly review conversation logs for any issues or abuse

​
Help Page Deployment

For a standalone help page experience:
  1. Navigate to Deploy → Help Page in your agent’s menu
  2. Click Setup to configure your help page
  3. Customize the page appearance and branding
  4. Share the provided URL or embed it in your site
The help page provides a full-screen chat experience, ideal for:
  • Dedicated support portals
  • Documentation search
  • Customer self-service centers

​
Next Steps

Monitor Conversations

Review chat history and see what visitors are asking.

View Analytics

Track usage metrics and identify trends in user behavior.

Add More Sources

Expand your agent’s knowledge with additional content.

Customize Styling

Fine-tune colors, appearance, and widget behavior.