Your Website

> ## Documentation Index > Fetch the complete documentation index at: https://docs.cosmo.humanizing.com/llms.txt > Use this file to discover all available pages before exploring further. # Deployment > Learn how to deploy your Chatbot to your site using the embed script ## 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: The most common deployment option. Adds a floating chat bubble to your website that visitors can click to interact with your agent. 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: ```html theme={null} ``` 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 `` tag for optimal performance: ```html theme={null} Your Website ``` ### Placement Options | Location | Recommendation | Use Case | | ---------------- | --------------- | ------------------------------------------------ | | Before `` | **Recommended** | Most websites - ensures page content loads first | | Before `` | Alternative | Sites needing the widget immediately available | | Via tag manager | Advanced | Sites 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 `` 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 `` 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: ```jsx theme={null} 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: ```vue theme={null} ``` ### 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 | Setting | Description | | ------------------- | ----------------------------------------------- | | **Avatar** | Choose the 3D avatar that represents your agent | | **Appearance** | Light or dark theme for the chat interface | | **Brand Color** | Your primary accent color | | **Bubble Position** | Left or right corner of the screen | | **Bubble Icon** | Custom icon for the chat bubble | ### Content Settings | Setting | Description | | ----------------------- | ------------------------------------------- | | **Welcome Message** | Initial greeting when chat opens | | **Header Title** | Custom title in the widget header | | **Suggested Questions** | Pre-populated questions to help users start | | **Languages** | Available 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: Clear your browser cache and any CDN/server caches to ensure the latest version loads. Navigate to your website and look for the chat bubble in the corner you specified. Click the bubble and ask a test question to verify the agent responds correctly. 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 Review chat history and see what visitors are asking. Track usage metrics and identify trends in user behavior. Expand your agent's knowledge with additional content. Fine-tune colors, appearance, and widget behavior.